事件冒泡:obj.addEventListener(eventType ,fn ,false);
false => 冒泡(出来)
事件捕获:obj.addEventListener(eventType ,fn ,true);
true => 捕获(进去)
HTML部分:
<div id="div1"> div1 <div id="div2"> div2 <div id="div3">div3</div> </div> </div>
CSS部分:
div {padding: 50px;} #div1 {border: 1px solid red;} #div2 {border: 1px solid blue;} #div3 {border: 1px solid green; position: absolute; top: 300px;}
JS部分:
window.onload = function(){ var oDiv1 = document.getElementById(‘div1‘); var oDiv2 = document.getElementById(‘div2‘); var oDiv3 = document.getElementById(‘div3‘); function fn1(){ alert(this.id); } /*oDiv1.onclick = fn1; oDiv2.onclick = fn1; oDiv3.onclick = fn1;*/ //false = 冒泡 //告诉div,如果有一个出去的事件触发了你,你就去执行fn1这个函数 /*oDiv1.addEventListener(‘click‘ ,fn1 ,false); oDiv2.addEventListener(‘click‘ ,fn1 ,false); oDiv3.addEventListener(‘click‘ ,fn1 ,false); //div3->div2->div1*/ //true = 捕获 //告诉div,如果有一个进去的事件触发了你,你就去执行fn1这个函数 /*oDiv1.addEventListener(‘click‘ ,fn1 ,true); oDiv2.addEventListener(‘click‘ ,fn1 ,true); oDiv3.addEventListener(‘click‘ ,fn1 ,true); //div1->div2->div3*/ //当点击div1时,弹出1;(div1冒泡) //当点击div2时,弹出2、1;(div2捕获->div1冒泡) //当点击div3时,弹出2、3、1;(div2捕获->div3冒泡->div1冒泡) oDiv1.addEventListener(‘click‘ ,function(){ alert(1); } ,false); oDiv2.addEventListener(‘click‘ ,function(){ alert(2); } ,true); oDiv3.addEventListener(‘click‘ ,function(){ alert(3); } ,false); };
时间: 2024-09-27 12:13:37