js事件的绑定和解除 addEventListener()

最新推荐文章于 2025-06-08 03:54:53 发布

原创最新推荐文章于 2025-06-08 03:54:53 发布 · 6.4k 阅读

0 ·

CC 4.0 BY-SA版权

练习同时被 3 个专栏收录

201 篇文章

订阅专栏

笔记

185 篇文章

订阅专栏

32 篇文章

订阅专栏

本文介绍如何使用addEventListener()方法为HTML元素添加事件监听器，实现同一事件触发多个处理函数的功能，并展示了兼容不同浏览器的事件绑定与解除绑定的方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

关键词：

addEventListener() 方法用于向指定元素添加事件句柄。

提示： 使用 removeEventListener() 方法来移除 addEventListener() 方法添加的事件句柄。

说明：一个事件触发时，想要同时调用多个处理函数；直接设置后面的覆盖前面的，可以通过事件绑定解决

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style>
           div {
               width: 300px;
               height: 200px;
               background: red;
           }
       </style>
   </head>
   <body>
           <div>给你点颜色看看</div>
   </body>
   <script>
   var div=document.getElementsByTagName('div')[0]
   addBind(div, 'click', giveRed)
   addBind(div, 'click', giveGreen)

   function giveGreen(){
   alert("绿色")
   }

   function giveRed(){
   alert("红色")
   }
   function addBind(obj, ev, func)
       {
           if (obj.addEventListener) {
               // 高级浏览器
               obj.addEventListener(ev, func, false)
           } else {
               // 低级浏览器
               obj.attachEvent('on'+ev, func)
           }
       }

// 兼容取消绑定
       function delBind(obj, ev, func)
       {
           if (obj.removeEventListener) {
               obj.removeEventListener(ev, func, false)
           } else {
               obj.detachEvent('on'+ev, func)
           }
       }

</script>

</html>