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 => {&nbsp; console.log(e.target==this);});document.getElementById("btn1").addEventListener('click', (e) => {&nbsp; console.log(e.target==this);});document.getElementById("btn2").addEventListener('click', function() {&nbsp; // event is not passed&nbsp; console.log(this==this);});document.getElementById("btn3").addEventListener('click', function(e) {&nbsp; 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',&nbsp;e&nbsp;=>&nbsp;{ }您将事件传递给以箭头函数的形式处理该事件的函数。这可以更明确地写成这样。document.addEventListener('submit',&nbsp;(e)&nbsp;=>&nbsp;{ }如果要传递多个参数，则必须按照上面所示的方式使用括号。箭头函数将始终在全局 this 的上下文中执行，而不是在调用它的范围内执行。另一方面你的第二个例子document.addEventListener('submit',&nbsp;&nbsp;function()&nbsp;{ }正在使用一个经典函数。这将始终在调用它的范围内执行。当您需要该信息（例如：到底单击了什么以及对单击事件的该元素的引用）或阻止默认行为时，您倾向于将事件传递给处理程序。您显示的示例都是提交事件。默认情况下提交会重新加载页面。这通常不是一个理想的行为，所以你倾向于这样做submitEventHandler(event){ &nbsp;&nbsp;event.preventDefault(); }