为什么在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 可以更好地处理错误,因为事件处理代码中的错误可以更有效地被捕获和管理,而不像内联事件处理程序那样困难。
  • 5
    点赞
  • 3
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值