关于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事件