JS（十二）

最新推荐文章于 2024-08-15 09:17:35 发布

MsStrbig

最新推荐文章于 2024-08-15 09:17:35 发布

阅读量280

点赞数

分类专栏： HTML+CSS 文章标签：计算机 javascript 前端 dom

本文链接：https://blog.csdn.net/MsStrbig/article/details/78670967

版权

HTML+CSS 专栏收录该内容

28 篇文章 1 订阅

订阅专栏

冒泡事件

（1）冒泡就是后代元素的事件被触发的时候，其祖先元素的相同事件也会被触发；冒泡是向上导向的；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 300px;
				height: 300px;
				background-color: #00BFFF;
			}
			#s1{
				background-color: yellow;
			}
		</style>
		
		<script type="text/javascript">
		window.οnlοad=function(){
		var box1=document.getElementById("box1");
		var s1=document.getElementById("s1");
		var body=document.body;
		//冒泡就是后代元素的事件被触发的时候，其祖先元素的相同事件也会被触发；冒泡是向上导向的
		//如果我们不需要冒泡,可以通过事件对象来取消冒泡;
		box1.οnclick=function(){
			
			alert("box1");
		}
		s1.οnclick=function(event){
			//
			event.cancelBubble=true;//可以通过cancelBubble
			alert("s1");
		}
		body.οnclick=function(){
			
			alert("body");
		}
		};
			
		</script>
		
	</head>
	<body>
		<div id="box1">
			我是div
			<span id="s1">我是span</span>
		</div>
		
		
	</body>
</html>

//冒泡的练习；

事件的委派

事件的委派:通过冒泡的方式来解决，多次创建响应事件的问题，我们可以对同一事件的祖先元素绑定，通过冒泡来解决，后代元素绑定事件的问题；

Event 事件对象的target属性用来表示触发事件对象；

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			.box1{
				
				width: 400px;
				height: 200px;
				background-color: aquamarine;
			}
		</style>
		<script type="text/javascript">
			window.οnlοad=function(){
				//获取超链接
				var ul=document.getElementById("s1");
				var lias=document.getElementsByTagName("a");
				var bnt01=document.getElementById("btn01");
				
				//为a绑定一个事件
//				for(var i=0;i<lias.length;i++)
//				{
//					lias[i].οnclick=function(){
//						alert("超链接");
//					};
//					
//				}
				bnt01.οnclick=function(){
					//创建超链接；
					var li=document.createElement("li");
					li.innerHTML="<a href='#' class='sn'>新建超链接</a>";
					ul.appendChild(li);
				}
				ul.οnclick=function(event){	
					//只有点击超链接的时候才执行，其他的地方不执行;
					if(event.target.className=="sn")
					   alert("超链接");
				}		
	};
		</script>
		
	</head>
	<body>
		<button id="btn01">创建一个超链接</button>
		<div class="box1">
			<ul id="s1" style="background-color:red ;">
				<li><a href="#" class="sn">超链接一</a></li>
				<li><a href="#" class="sn">超链接二</a></li>
				<li><a href="#" class="sn">超链接三</a></li>
			</ul>
		</div>
	</body>
</html>

MsStrbig

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
JS（十二）

冒泡事件（1）冒泡就是后代元素的事件被触发的时候，其祖先元素的相同事件也会被触发；冒泡是向上导向的； #box1{ width: 300px; height: 300px; background-color: #00BFFF; } #s1{ background-color: yellow; }
复制链接

扫一扫

专栏目录