javascript事件监听，事件冒泡/捕获总结

最新推荐文章于 2025-06-08 15:44:34 发布

原创最新推荐文章于 2025-06-08 15:44:34 发布 · 473 阅读

0 ·

CC 4.0 BY-SA版权

js 专栏收录该内容

5 篇文章

订阅专栏

本文详细介绍了JavaScript中事件监听的三种方法，包括不同浏览器的兼容性问题，以及事件捕获与事件冒泡的概念。通过具体示例展示了如何使用addEventListener实现事件的捕获和冒泡。

一、javascript事件监听的三种方法

[html]view plaincopy 
   
 element.addEventListener(type, listener[, useCapture]); // IE6~8不支持  
 element.attachEvent('on' + type, listener); // IE6~10支持, IE11不支持  
 element.'on' + type = function(){} // 所有浏览器  

以click 点击事件为例：

[html]view plaincopy 
   
 <!DOCTYPE HTML>  
 <html lang="zh-cn">  
 <head>  
 <meta charset="utf-8" />  
 <title>Javascript</title>  
 <style>  
 *{margin: 0;padding: 0;}  
 #big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}  
 #small{width: 150px;height: 100px;background-color: blue;}  
 </style>  
   
 </head>  
 <body>  
 <div id="big">  
     <div id="small"></div>  
 </div>  
   
 <script>  
 window.onload = function(){  
     var oSmall = document.getElementById('small');  
     var oBig = document.getElementById('big');  
   
     //第一种：所有浏览器支持  
     oBig.onclick = function(){  
         console.log('Big Div');  
     }  
     //第二种：ie8及ie8以下不支持  
     oBig.addEventListener('click', function(){  
         console.log('Big Div');  
     }, true);  
   
     //第三种：ie6~ie10支持  
     oBig.attachEvent('onclick', function(){  
         console.log('Big Div');  
     });  
 }  
 </script>  
 </body>  
 </html>  

二、事件捕获与事件冒泡

关于事件的捕获与冒泡，引用一段文字来说明：

很久以前有个叫Netscape的姑娘，她制订了JavaScript的一套事件驱动机制(即事件捕获)

后来又有一个叫“IE”的小子，这孩子比较傲气，他认为“凭什么我要依照你的规则走”，于是他又创造了一套自己的规则(事件冒泡)

再后来，有个叫W3C的媒婆，想撮合这两个孩子，将他们的特点融合在了一起，这下，事件产生的顺序变成：

事件从根节点开始，逐级派送到子节点，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“捕获阶段(Capture)”;

执行完捕获阶段后，事件由子节点往根节点派送，若节点绑定了事件动作，则执行动作，然后继续走，这个阶段称为“冒泡阶段(Bubble)”。

善良的Netscape以及其姐妹们都接受了媒婆的建议，采用了新的事件规则，而骄傲固执的IE小子始终按照自己的规则执行。最终使得这成为困扰前端开发人员的兼容性问题之一。

几个要点：

（1）通过 element.onclick、element.attackEvent('onclick', function(){}) 来监听事件，均为冒泡机制。例子：

[html]view plaincopy 
   
 <!DOCTYPE HTML>  
 <html lang="zh-cn">  
 <head>  
 <meta charset="utf-8" />  
 <title>Javascript</title>  
 <style>  
 *{margin: 0;padding: 0;}  
 #big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}  
 #small{width: 150px;height: 100px;background-color: blue;}  
 </style>  
 </head>  
 <body>  
 <div id="big">  
     <div id="small"></div>  
 </div>  
   
 <script>  
 window.onload = function(){  
     var oSmall = document.getElementById('small');  
     var oBig = document.getElementById('big');  
   
     oBig.onclick = function(){  
         console.log('Big Div');  
     }  
     oSmall.onclick = function(){  
         console.log('Small Div');  
     }  
     // 当点击 div#small时，先后输出：  
     // Small Div  
     // Big Div  
 }  
 </script>  
 </body>  
 </html>  

（2）w3c 标准中的 addEventListener 方法

W3C规范中定义了3个事件阶段，依次是捕获阶段、目标阶段、冒泡阶段（即上文引用文字中的蓝色字体部分）。addEventListener 中的第三个参数 true/false，规定了该事件在捕获阶段执行，还是在冒泡阶段执行。

实例说明：

[html]view plaincopy 
   
 <!DOCTYPE HTML>  
 <html lang="zh-cn">  
 <head>  
 <meta charset="utf-8" />  
 <title>Javascript</title>  
 <style>  
 *{margin: 0;padding: 0;}  
 #big{width: 300px;height: 180px;background-color: orange;margin: 20px auto;}  
 #small{width: 150px;height: 100px;background-color: blue;}  
 </style>  
 </head>  
 <body>  
 <div id="big">  
     <div id="small"></div>  
 </div>  
 <script>  
 window.onload = function(){  
     var oSmall = document.getElementById('small');  
     var oBig = document.getElementById('big');  
   
     oSmall.addEventListener('click', function(){  
         console.log('Small Div 捕获');  
     }, true);  
     oBig.addEventListener('click', function(){  
         console.log('Big Div 冒泡');  
     });  
     oBig.addEventListener('click', function(){  
         console.log('Big Div 捕获');  
     }, true);  
     document.addEventListener('click', function(){  
         console.log('Document 冒泡');  
     });  
     document.addEventListener('click', function(){  
         console.log('Document 捕获');  
     }, true);  
 }  
 </script>  
 </body>  
 </html>  