085|事件冒泡和触发对象

最新推荐文章于 2024-08-15 19:36:37 发布

Asteroid 325

最新推荐文章于 2024-08-15 19:36:37 发布

阅读量249

点赞数

本文链接：https://blog.csdn.net/weixin_43846020/article/details/108150961

版权

JS 专栏收录该内容

34 篇文章 0 订阅

订阅专栏

触发对象

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>085事件冒泡和触发对象</title>
		<script>
			/*
			  target  目标对象/触发对象
			  IE8以下不兼容 window.event.srcElement
			*/
		   window.onload=function(){
			   var oli=document.getElementById("li1");
			   oli.onclick=function(){
				   alert(this);//[object HTMLLIElement]
				   alert(this.innerHTML);//111
			   }
		   }
		</script>
	</head>
	<body>
		<ul>
			<li id="li1">111</li>
			<li>222</li>
			<li>333</li>
		</ul>
	</body>
</html>

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>085事件冒泡和触发对象</title>
		<script>
			/*
			  target  目标对象/触发对象
			  IE8以下不兼容 window.event.srcElement
			  this 永远指当前函数的主人
			*/
		   window.onload=function(){
			   var oli=document.getElementById("li1");
			   /*
			   oli.οnclick=function(ev){
				   var e=ev||window.event;
				   var target=e.target||window.event.srcElement;
				   
				   alert(target.innerHTML);//111
				   
				  // alert(this);//[object HTMLLIElement]
				 //  alert(this.innerHTML);//111
			   }
			   */
			  
			  var oul=document.getElementById("ul1");
			  oul.onclick=function(ev){
				  var e=ev||window.event;
				  var target=e.target||window.event.srcElement;
				  //如果点击222那个li
				  alert(this.tagName);//UL
				  alert(target.innerHTML);//222
			  }
		   }
		</script>
	</head>
	<body>
		<ul id="ul1">
			<li id="li1">111</li>
			<li>222</li>
			<li>333</li>
		</ul>
	</body>
</html>

事件冒泡

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>085冒泡</title>
		<style>
			div{padding:50px;}
			#div1{background-color: red;}
			#div2{background-color: blue;}
			#div3{background-color: orange;}
		</style>
		<script>
			/*
			浏览器上事件天生的一个特点：事件流
			事件冒泡：由里向外逐级触发
			事件捕获：由外向里逐级触发
			*/
			window.onload=function(){
				var adivs=document.getElementsByTagName("div");
				for(var i=0;i<adivs.length;i++){
					adivs[i].onclick=function(){
						alert(this.id);
					}
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3"></div>
			</div>
		</div>
		
	</body>
</html>

在这里插入图片描述

阻止冒泡

cancelBubble=true stopPropagation()

在这里插入图片描述

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>085冒泡</title>
		<style>
			div{padding:50px;}
			#div1{background-color: red;}
			#div2{background-color: blue;}
			#div3{background-color: orange;}
		</style>
		<script>
			/*
			浏览器上事件天生的一个特点：事件流
			事件冒泡：由里向外逐级触发
			事件捕获：由外向里逐级触发
			
			阻止事件冒泡：浏览器兼容问题
			事件对象的属性和方法：
			cancelBubble=true    stopPropagation()
			*/
			window.onload=function(){
				var adivs=document.getElementsByTagName("div");
				for(var i=0;i<adivs.length;i++){
					adivs[i].onclick=function(ev){
						var e=ev||window.event;
						alert(this.id);
						//e.cancelBubble=true;
						//e.stopPropagation();
						stopBubble(e);
					}
				}
			}
			
			//封装跨浏览器兼容的阻止事件冒泡
			function stopBubble(e){
				//e  是事件对象
				if(e.stopPropagation){
					e.stopPropagation();
				}else{
					e.cancelBubble=true;
				}
			}
		</script>
	</head>
	<body>
		<div id="div1">
			<div id="div2">
				<div id="div3"></div>
			</div>
		</div>
		
	</body>
</html>