终于搞明白标签中绑定事件到底加不加括号了

终于搞明白标签中绑定事件到底加不加括号了

最近有看到文章讲解说用js绑定事件和标签内直接绑定事件的区别，但是比较零散，直说了对应的执行结果，让人看完还是迷迷糊糊，我就专门整理并对比了下区别，做下记录。

首先说下事件绑定的三种主要方式：

1、内联模式：将函数名直接作为html标签中属性的属性值。

<button onclick="func()">内联模式</button>

这种方式的缺点就是不符合行为分离的基本规范

2、脚本模式：获取节点并给节点添加属性

var btn = document.getElementById("btn");
btn.onlick=function(){
 XXX
}

这种方式虽然实现了分离，但只能添加一个函数，再次使用就会被覆盖

3、DOM2级事件

btn.addEventListener("click", function (event) {
  console.log(this);
}, false);

这种方式算可以多次添加，也有对应的移除方法。实现的方式就如同名称一样，给标签添加了一个事件监听器，监听到之后就执行对应的方法

今天主要是对比下事件添加时加不加括号的效果

也就是内联模式下的使用规范

<div id="container">
  <button id="btn" onclick="test()">test1</button>
  <button id="btn2" onclick="test2">test2</button>
</div>
<script>
  function test(e) {
    console.log('e', e)
    console.log(222, this)
    return 1
  }
  function test2(e) {
    console.log(222, this)
    return 1
  }
  </script>

喜欢深究的同学可以看下对应的结果，第一个test按钮点击时会触发，但是无法打印出e

第二个按钮则不会触发

这是因为内联模式下的事件属性是使用引号包裹，代表的是当点击该元素时，执行引号内的代码。

而在vue中使用@click绑定事件加不加括号都行，它会给你处理的

加括号的话，参数由你定义，不加括号的话，传入的参数是默认的event事件