时间戳

首页 > 解决方案 > addEventListener - 事件与函数摄入

javascript - addEventListener - 事件与函数摄入

问题描述

有点难以理解为什么以及何时应该将事件/函数作为事件侦听器应该寻找的第二个参数。例如：

document.addEventListener('submit', e => {

}

对比

document.addEventListener('submit',  function whateverName() {

}

标签： javascriptfunctionevents

解决方案

我创建了这个示例来尝试帮助演示这些差异。这主要取决于您如何访问this元素。使用箭头函数，您必须提供 ，event以便您可以使用 访问元素e.target。使用标准函数时，您不需要事件，而是可以依赖this引用绑定到EventListener.

该示例打印true元素是否匹配。使用箭头函数，您会注意到结果是false因为this在上下文中不存在。标准函数将返回true，因为this它确实存在于上下文中。

箭头功能完全相同。我只是展示这一点e并(e)代表同样的事情。查看箭头函数的文档以获取更多信息。

document.getElementById("btn0").addEventListener('click', e => {
  console.log(e.target==this);
});

document.getElementById("btn1").addEventListener('click', (e) => {
  console.log(e.target==this);
});

document.getElementById("btn2").addEventListener('click', function() {
  // event is not passed
  console.log(this==this);
});

document.getElementById("btn3").addEventListener('click', function(e) {
  console.log(e.target==this);
});
<button id="btn0" type="button">Arrow Function 1</button>
<button id="btn1" type="button">Arrow Function 2</button>
<button id="btn2" type="button">Function 1</button>
<button id="btn3" type="button">Function 2</button>

推荐阅读