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

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

最近有看到文章解说说用 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 事件