简单解析js的事件冒泡
1.什么是事件冒泡？
以click点击事件为例。假如我们有一个多层结构标签。如下图，是4个div嵌套。每个div都有点击的监听事件，分别alert(“box4”),alert(“box3”),alert(“box2”),alert(“box1”)。当我们点击最里面的div时，点击事件开始传递。出现的效果是alert(“box4”)-alert(“box3”)-alert(“box2”)-alert(“box1”)。这就是事件冒泡阶段。效果如下：
在这里插入图片描述
HTML代码：
<divclass="box1"><divclass="box2"><divclass="box3"><divclass="box4"></div></div></div></div>
CSS代码：
* { margin: 0; padding: 0; } .box1{ width: 400px; height: 400px; background: red; } .box2{ width: 300px; height: 300px; background: yellow; } .box3{ width: 200px; height: 200px; background: skyblue; } .box4{ width: 100px; height: 100px; background: green; }
JS代码：
var oBox1=document.getElementsByClassName("box1")[0]; var oBox2=document.getElementsByClassName("box2")[0]; var oBox3=document.getElementsByClassName("box3")[0]; var oBox4=document.getElementsByClassName("box4")[0]; // 事件冒泡 由里向外执行 oBox1.onclick=function(ev){ alert("box1"); } oBox2.onclick=function(ev){ alert("box2"); } oBox3.onclick=function(ev){ alert("box3"); } oBox4.onclick=function(ev){ alert("box4"); }
2.如何取消事件冒泡
var oBox1=document.getElementsByClassName("box1")[0]; var oBox2=document.getElementsByClassName("box2")[0]; var oBox3=document.getElementsByClassName("box3")[0]; var oBox4=document.getElementsByClassName("box4")[0]; // 事件冒泡 由里向外执行 oBox1.onclick=function(ev){ // console.log(ev); // console.log("box1"); alert("box1"); if(ev&&ev.stopPropagation){ ev.stopPropagation();//除 IE外的浏览器 }else{ ev.cancelBubble=true;//针对IE } } oBox2.onclick=function(ev){ // console.log("box2"); alert("box2"); if(ev&&ev.stopPropagation){ ev.stopPropagation();//除 IE外的浏览器 }else{ ev.cancelBubble=true;//针对IE } } oBox3.onclick=function(ev){ // console.log("box3"); alert("box3"); if(ev&&ev.stopPropagation){ ev.stopPropagation();//除 IE外的浏览器 }else{ // ev.cancelBubble=true;//针对IE } } oBox4.onclick=function(ev){ console.log("box4"); console.log(ev); // alert("box4"); if(ev&&ev.stopPropagation){ ev.stopPropagation();//除 IE外的浏览器 }else{ ev.cancelBubble=true;//针对IE } }
