事件冒泡有空补充(印象笔记里)
事件捕获
浏览器默认,由里向外逐渐触发事件,这种行为叫做事件冒泡。
利用事件监听可以使浏览器,由外向里逐渐触发事件,这种行为叫做事件捕获。
事件流:
事件冒泡,由里向外逐渐触发事件。
事件捕获,由外向里逐渐触发事件。
代码示例
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>事件捕获</title> <style> div{padding: 50px} #div1{background-color: red} #div2{background-color: blue} #div3{background-color: orange} </style> <script> window.onload = function(){ var aDivs = document.getElementsByTagName('div'); for(var i = 0; i < aDivs.length; i++){ //通过事件监听的方式添加事件就会 看到的现象就会和事件冒泡的方向相反 aDivs[i].addEventListener("click", function(){ alert(this.id); }, true); } /* 事件冒泡的浏览器兼容写法 */ /* function stopBubble(e){ if(e.cancelBubble){ e.cancelBubble = true; }else{ e.stopPropagation(); } } */ /* 阻止事件冒泡 */ } /* 上述的行为是浏览器的默认行为。 浏览器默认,由里向外逐渐触发事件,这种行为叫做事件冒泡。 事件流: 事件冒泡,由里向外逐渐触发事件。 事件捕获,由外向里逐渐触发事件。 */ </script> </head> <body> <div id = 'div1'> <div id = 'div2'> <div id = 'div3'></div> </div> </div> </body> </html>
浏览器效果: