Javascript addEventListener-事件与函数摄入

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

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

}

vs

---

我创建这个示例是为了帮助演示这些差异。这主要取决于您如何访问此元素。使用必须提供

事件

，以便可以使用

e.target

访问元素。使用标准函数时，您不需要事件，而是可以依赖

此

引用绑定到

事件侦听器的元素

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

箭头函数完全相同。我只是想说明
e
和
（e）
代表相同的东西。查看有关箭头功能的文档，了解更多信息


document.getElementById（“btn0”）.addEventListener（'click'，e=>{
log（e.target==this）；
});
document.getElementById（“btn1”）.addEventListener（'click'，（e）=>{
log（e.target==this）；
});
document.getElementById（“btn2”）.addEventListener（'click'，function（））{
//事件未通过
log（this==this）；
});
document.getElementById（“btn3”）.addEventListener（'click'，函数（e）{
log（e.target==this）；
});
箭头功能1
箭头功能2
职能1
第一个示例中的函数2

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

}

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

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

}

如果要传递多个参数，则必须按上述方式使用括号

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

另一方面，你的第二个例子

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

}

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

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

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

这些例子是相同的。唯一的区别是
this
在回调内部处理，但是示例中没有使用
this
。非常感谢@敬酒，不客气。如果您觉得这回答了您的问题，请将其标记为答案。与
和
的答案相同。你可以把两者都标为答案。谢谢万分感谢！
submitEventHandler(event){
  event.preventDefault();
}