addEventListener - 事件与函数摄入

Question

在理解为什么以及何时应该将事件/函数作为事件侦听器应该寻找的第二个参数时遇到一些困难。例如：document.addEventListener('submit', e => { }与document.addEventListener('submit',  function whateverName() { }

Answer 1

我创建这个示例是为了帮助演示这些差异。这主要取决于您访问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>

Answer 2

在你的第一个例子中

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

}

您将事件传递给以箭头函数的形式处理该事件的函数。这可以更明确地写成这样。

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

}

如果要传递多个参数，则必须按照上面所示的方式使用括号。

箭头函数将始终在全局 this 的上下文中执行，而不是在调用它的范围内执行。

另一方面你的第二个例子

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

}

正在使用一个经典函数。这将始终在调用它的范围内执行。

当您需要该信息（例如：到底单击了什么以及对单击事件的该元素的引用）或阻止默认行为时，您倾向于将事件传递给处理程序。您显示的示例都是提交事件。默认情况下提交会重新加载页面。这通常不是一个理想的行为，所以你倾向于这样做

submitEventHandler(event){
  event.preventDefault();
}