<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <style> div {padding: 50px;} #div1 {background: red;} #div2 {background: blue;} #div3 {background: green; position: absolute; top: 300px;} </style> <script> window.onload = function() { var oDiv1 = document.getElementById('div1'); var oDiv2 = document.getElementById('div2'); var oDiv3 = document.getElementById('div3'); function fn1() { alert( this.id ); } //依次执行321 oDiv1.onclick = fn1; oDiv2.onclick = fn1; oDiv3.onclick = fn1; //false表示冒泡 //告诉div1，如果有一个 出去 的事件触发了你，你就去执行fn1这个函数，先执行3最后执行1。 oDiv1.addEventListener('click', fn1, false); oDiv2.addEventListener('click', fn1, false); oDiv3.addEventListener('click', fn1, false); //告诉div1，如果有一个 进去 的事件触发了你，你就去执行fn1这个函数，先执行1最后执行3。 oDiv1.addEventListener('click', fn1, true); oDiv2.addEventListener('click', fn1, true); oDiv3.addEventListener('click', fn1, true); oDiv1.addEventListener('click', function() { alert(1); }, false); oDiv1.addEventListener('click', function() { alert(3); }, true); oDiv3.addEventListener('click', function() { alert(2); }, false); //执行321 } </script> </head> <body> 点击div3时，进来的点击事件（事件捕获）从1到3，出去的点击事件（事件冒泡）从3到1.每个div经历2个点击事件。 <div id="div1"> <div id="div2"> <div id="div3"></div> </div> </div> </body> </html>
<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>无标题文档</title> <script> /* 第一种事件绑定形式的取消 */ function fn1() { alert(1); } function fn2() { alert(2); } document.onclick = fn1; document.onclick = null; //取消，如果是通过attachEvent实现的绑定则不能这么取消。 /* ie : obj.detachEvent(事件名称，事件函数); 标准 : obj.removeEventListener(事件名称，事件函数，是否捕获); */ document.attachEvent('onclick', fn1); document.attachEvent('onclick', fn2); document.detachEvent('onclick', fn1); document.addEventListener('click', fn1, false);//绑定出去的函数 document.addEventListener('click', fn1, true);//绑定进来的函数 document.addEventListener('click', fn2, false); document.removeEventListener('click', fn1, false);//取消出去的函数 </script> </head> <body> </body> </html>
本文转自农夫山泉别墅博客园博客，原文链接：http://www.cnblogs.com/yaowen/p/5725566.html，如需转载请自行联系原作者
