乐趣区

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

退出移动版