<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>事件捕获</title> </head> <body> <!-- 事件捕获与事件冒泡事件流正好相反的顺序，事件捕获的事件流是最外层逐级向内传播，也就是先document，然后逐级div标签 ， span标签 , a标签; --> <div id="div"> <span id="span"> <a href="" id="aTag">事件测试</a> </span> </div> </body> <script type="text/javascript"> document.getElementById('aTag').addEventListener('click',aTag,true); document.getElementById('span').addEventListener('click',span,true); document.getElementById('div').addEventListener('click',div,true); function aTag(e){ alert('点击的是a标签'); } function span(e){ alert('点击的是span标签'); } function div(e){ alert('点击的是div标签'); } </script> <!-- 第三个参数设置为true，即为捕获事件，默认为false；否则的话，事件流还是和上面的一样，因为不管是在IE还是标准浏览器下，事件冒泡浏览器都支持的。 --> </html>
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>事件冒泡</title> </head> <body> <!-- IE的事件流叫做事件冒泡，即事件开始时由最具体的元素(文档中嵌套最深的那个节点)接收，然后逐级向上（一直到文档）；如下代码： --> <div id="div"> <span id="span"> <a href="" id="aTag">事件测试</a> </span> </div> </body> <script type="text/javascript"> document.getElementById('aTag').addEventListener('click',aTag); document.getElementById('span').addEventListener('click',span); document.getElementById('div').addEventListener('click',div); function aTag(e){ alert('点击的是a标签'); } function span(e){ alert('点击的是span标签'); } function div(e){ alert('点击的是div标签'); } </script> <!-- 当单击 “事件测试”文字后，那么click事件会按照如下顺序传播； 1)先打印出：点击的是a标签 2) 再打印出：点击的是span标签 3) 最后打印出：点击的是div标签 4) 最后肯定是document文档。 所有现代浏览器都支持事件冒泡 --> </html>
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title>跨浏览器事件捕获</title> </head> <body> </body> <script type="text/javascript"> var EventUtil = { addHandler: function(element,type,handler) { if(element.addEventListener) { element.addEventListener(type,handler,false); }else if(element.attachEvent) { element.attachEvent("on"+type,handler); }else { element["on" +type] = handler; } }, removeHandler: function(element,type,handler){ if(element.removeEventListener) { element.removeEventListener(type,handler,false); }else if(element.detachEvent) { element.detachEvent("on"+type,handler); }else { element["on" +type] = null; } }, getEvent: function(event) { return event ? event : window.event; }, getTarget: function(event) { return event.target || event.srcElement; }, preventDefault: function(event){ if(event.preventDefault) { event.preventDefault(); }else { event.returnValue = false; } }, stopPropagation: function(event) { if(event.stopPropagation) { event.stopPropagation(); }else { event.cancelBubble = true; } } }; </script> </html>