關于事件冒泡和捕獲的問題

由于習慣于jquery的方便操作，往往讓我們慢慢淡忘了原生js應有的功能和屬性，今天重溫一下事件冒泡和捕獲問題。

冒泡：從內向外，如：div > body > html (不同瀏覽器稍有不同)

捕獲：從外向內，如：html > body > div

阻止冒泡或捕獲：e.stopPropagation() || e.cancelBubble = true;

例子，具體也可以隨意修改予以測試：

<!DOCTYPE HTML>
<html><head><meta charset="UTF-8"><title>冒泡捕獲</title><link href="css/main.css"/><style type="text/css"></style></head><body><div id="container"><div id="level1" style="border:5px solid green;"><div id="level2" style="border:1px solid #ccc;margin:20px;">jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br>jfsdkljfklsdjklf <br><br><br><br><br><br><br><br><br><br><br></div></div></div><script>//標準瀏覽器，支持冒泡和捕獲，ie91011document.addEventListener('click', function(e){console.log('document');e.stopPropagation();}, false); // 如果此處為true，則在從外向內捕獲過程終止document.getElementById('level1').addEventListener('click', function(){console.log('level1');}, false);document.getElementById('level2').addEventListener('click', function(){console.log('level2');}, false);//<=ie8，只支持冒泡document.attachEvent('onclick', function(){console.log('document');});document.getElementById('level1').attachEvent('onclick', function(e){alert('level1');e.cancelBubble = true;});document.getElementById('level2').onclick = function(e){e = e || window.event;alert('level1');e.cancelBubble = true;};document.getElementById('level2').attachEvent('onclick', function(e){alert('level2');// e.cancelBubble = true;});</script></body>
</html>

轉載于:https://www.cnblogs.com/jackliu6/p/3628758.html

本文來自互聯網用戶投稿，該文觀點僅代表作者本人，不代表本站立場。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。
如若轉載，請注明出處：http://www.pswp.cn/news/376040.shtml
繁體地址，請注明出處：http://hk.pswp.cn/news/376040.shtml
英文地址，請注明出處：http://en.pswp.cn/news/376040.shtml

如若內容造成侵權/違法違規/事實不符，請聯系多彩編程網進行投訴反饋email:809451989@qq.com，一經查實，立即刪除！