冒泡

最新推荐文章于 2023-01-06 11:36:53 发布

zuo_zuo_blog

最新推荐文章于 2023-01-06 11:36:53 发布

阅读量530

点赞数 1

分类专栏：深入应用

本文链接：https://blog.csdn.net/zuo_zuo_blog/article/details/103991474

版权

深入应用专栏收录该内容

16 篇文章 0 订阅

订阅专栏

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>

zuo_zuo_blog

关注

1
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
冒泡

1. 冒泡：当一个元素上的事件被触发后，同样的事情在所有父元素上都会被触发a）从原始元素一直冒泡到DOM树最上层box3.onmouseover = function() { alert("我是3") } document.onmouseover = function() { alert("我是body"); } 2. 捕获冒泡目标阶段捕获：从上往下...
复制链接

扫一扫

专栏目录