欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

冒泡

程序员文章站 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>
相关标签: 冒泡