为什么在js中需要添加addEventListener()?

  • 为什么在js中需要添加addEventListener()?已关闭评论
  • 50 次浏览
  • A+
所属分类:Web前端
摘要

addEventListener(监听器)—EventTarget.addEventListener()方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window,也可以是任何支持事件的对象(比如 XMLHttpRequest)。


为什么在js中需要添加addEventListener()?

1.What?

addEventListener(监听器)---EventTarget.addEventListener()方法将指定的监听器注册到 EventTarget 上,当该对象触发指定的事件时,指定的回调函数就会被执行。事件目标可以是一个文档上的元素 Element、Document 和 Window,也可以是任何支持事件的对象(比如 XMLHttpRequest)。

addEventListener() 的工作原理是将实现 EventListener 的函数或对象添加到调用它的 EventTarget 上的指定事件类型的事件侦听器列表中。如果要绑定的函数或对象已经被添加到列表中,该函数或对象不会被再次添加。

2.Why ?

  • 关注点分离:使用 addEventListener 将 HTML 结构(内容)与 JavaScript 行为(呈现)分开,使代码更清晰和易于维护。

  • 灵活性:使用 addEventListener,你可以在同一个元素上附加多个事件监听器,而不会覆盖现有的监听器。这使得处理各种场景变得更加灵活。

  • 无侵入式 JavaScript:通过以编程方式附加事件监听器,可以使 HTML 标记保持干净,不受 JavaScript 代码的干扰,提高了可读性和可访问性。

  • 动态事件处理:你可以在运行时动态地附加事件监听器,这在处理动态创建或修改的元素时特别有用。

  • 闭包支持:使用 addEventListener 附加的事件监听器可以轻松访问封闭作用域(闭包)中的变量和函数,从而更容易地管理事件处理程序内的状态和上下文。

  • 更清晰的错误处理:使用 addEventListener 可以更好地处理错误,因为事件处理代码中的错误可以更有效地被捕获和管理,而不像内联事件处理程序那样困难。