冒泡
程序员文章站
2022-06-16 09:21:24
...
1. 冒泡：
当一个元素上的事件被触发后，同样的事情在所有父元素上都会被触发
a）从原始元素一直冒泡到DOM树最上层
box3.onmouseover = function() {
alert("我是3")
}
document.onmouseover = function() {
alert("我是body");
}
2. 捕获冒泡目标阶段
捕获：从上往下捕获事件
冒泡：从下往上
box3.addEventListener("click",function(){
alert("我是3");
},true);
document.addEventListener("click",function(){
alert("我是body");
},true);
3.阻止冒泡
w3c的方法是：（火狐、谷歌、IE11）
event.stopPropagation()
IE10以下则是使用：event.cancelBubble = true
box.onmouseover=function(event){
event=event||window.event;
if(event&&event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
console.log("鼠标放在box");
}
4.案例点击空白隐藏模态框
Document事件的绑定，无论绑定什么事件，只要事件被出发，传递过来的应该是指定的元素本身，而不是document。
<script>
var mask=document.getElementsByClassName("mask")[0];
var login=document.getElementsByTagName("a")[1];
login.onclick=function(event){
mask.style.display="block";
event=event||window.event;
if(event&&event.stopPropagation){
event.stopPropagation();
}else{
event.cancelBubble=true;
}
}
document.onclick=function(event){
event=event||window.event;
//兼容获取事件被触动时被传递过来的对象
var aaa=event.target||event.srcElement;
console.log(event.target);
//判断目标值的ID是否等于login，如果等于不隐藏盒子
if(aaa.id!=="login"){
mask.style.display="none";
}
}
</script>
5.事件委托案例
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style type="text/css">
li{
height: 36px;
line-height: 36px;
margin: 3px 0;
background-color: red;
cursor: pointer;
}
</style>
</head>
<body>
<button>创建4个</button>
<ul>
<li>我是li</li>
<a href="#">我是</a>
<li>我是li</li>
<li>我是li</li>
<a href="#">我是</a>
<li>我是li</li>
</ul>
<script>
var liArr=document.getElementsByTagName("li");
var btn=document.getElementsByTagName("button")[0];
var ul=document.getElementsByTagName("ul")[0];
btn.onclick=function(){
for(var i=1;i<=4;i++){
var newLi=document.createElement("li");
var newA=document.createElement("a");
newLi.innerHTML="我是创建的li";
newA.innerHTML="我是移民a";
ul.appendChild(newLi);
ul.appendChild(newA);
}
}
ul.onclick=function(event){
event=event||window.event;
var aaa=event.target||event.srcElement;
if(aaa.tagName==="LI"){
alert("我是li");
}
}
</script>
</body>
</html>
上一篇： React四之配置国际化
下一篇： 中文太TMD复杂