区分html，js，react，vue的事件函数

老是混淆不同的事件处理方式，干脆统一列出来区分下。

函数带括号与不带括号的区别

• 函数带括号：找到这个函数并立即执行，括号是“函数调用运算符”
• 函数不带括号：函数名只是一个变量，指向函数，不会立即执行，只在特定情况下触发执行
• 特殊情况： vue中在某些element-ui组件的事件中，有可能出现带括号会立即执行的问题，这个和组件中对于事件的处理方法不同有关系，一般的@click或@change不会有”带括号立即执行”的问题。

react和vue事件处理的区别

• vue事件绑定原理

• vue中@click和react的onClick实现原理不同，react的onClick必须接收一个函数体，如果加括号绑定，就会立即执行函数并将返回值赋给onClick，因此react的onClick事件函数不能加括号；而vue可以加也可以不加。

react事件处理

• 可参考React知识点汇总（基础使用1）、菜鸟教程
• 注意：
  • react中的事件函数的**函数名后不能跟()**，且需要bind绑定this指向，传参可在bind()中传也可使用箭头函数（参考 bind()）
  • React 事件绑定属性的命名采用驼峰式写法，而不是js/html里的小写
  • React 事件函数 要用 **JSX 语法**，而不是一个字符串(DOM 元素的写法)
• 例子：

  <!--  注意：这里函数要用 JSX 的语法，而不是一个字符串(DOM 元素的写法) -->
  <button onClick={this.activateLasers}>
    激活按钮
  </button>
  
  <!-- 对应的html语法 -->
  <button onclick="activateLasers()">
    激活按钮
  </button>

vue的事件处理

• 可参考官方文档
• vue的事件函数和react不同，是可以直接在事件函数名后跟()的（不跟()也可以），传参也可以直接在()中传递
  • 直接在事件函数名后跟()的，有的可以有的不可以，
• 当然，使用箭头函数传参也是没问题的
• 例子：

  <div id="example-1">
    <button v-on:click="counter += 1">Add 1</button>
    <!-- `greet` 是在下面定义的方法名 -->
    <button v-on:click="greet">Greet</button>
  </div>
  
  <script>
  var example2 = new Vue({
    el: '#example-2',
    data: {
      name: 'Vue.js',
      counter: 0
    },
    // 在 `methods` 对象中定义方法
    methods: {
      greet: function (event) {
        // `this` 在方法里指向当前 Vue 实例
        alert('Hello ' + this.name + '!')
        // `event` 是原生 DOM 事件
        if (event) {
          alert(event.target.tagName)
        }
      }
    }
  })
  </script>

事件函数 带/不带括号 区别

• 不带括号: @click="fun" 不传参 则默认传事件对象event fun(event){...}
• 带括号： @click="fun(value)"/ @click="fun()"时fun()内都无法获取事件对象event。
  • 不论是否传参，都属于传实参给函数，event（事件对象）自然接收不到，此时想要传event则需要手动传入event@click="fun($event,value)"
• 特殊情况：在某些element-ui组件的事件中，有可能出现带括号会立即执行的问题，这个和组件中对于事件的处理方法不同有关系，一般的@click或@change不会有”带括号立即执行”的问题。

HTML 事件

• 可参考菜鸟教程
• 例子：

  <!-- 可以直接写 JavaScript 代码 -->
  <button onclick="getElementById('demo').innerHTML=Date()">现在的时间是?</button>
  <!-- 或者是函数 -->
  <button onclick="displayDate()">现在的时间是?</button>

JS 事件

• 可参考菜鸟教程
• 例子：

  <script>
  document.getElementById("myBtn").onclick=function(){displayDate()};
  </script>