前端笔记72——事件冒泡机制

最新推荐文章于 2024-04-18 16:27:30 发布

野生杂学家阿博

最新推荐文章于 2024-04-18 16:27:30 发布

阅读量678

点赞数

分类专栏：前端文章标签： JavaScript 前端事件冒泡事件冒泡的影响为什么要用事件冒泡

本文链接：https://blog.csdn.net/chengxu_kuangrexintu/article/details/89692968

版权

前端专栏收录该内容

93 篇文章 1 订阅

订阅专栏

概述

事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。

注意：这里传递的仅仅是事件，并不传递所绑定的事件函数。
所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。

简单的例子

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box1{
				width: 600px;
				height: 400px;
				background-color: green;
				margin: 0 auto;
			}
			#box2{
				width: 300px;
				height: 200px;
				background-color: orange;
				margin: 100px auto;
			}
			#box3{
				width: 150px;
				height: 100px;
				background-color: royalblue;
				margin: 50px auto;
			}
		</style>
	</head>
	<body>
		<!--事件冒泡机制-->
		<div id="box1">
			<div id="box2">
				<div id="box3"></div>
			</div>
		</div>
		<script type="text/javascript">
			var oBox1 = document.getElementById("box1")
			var oBox2 = document.getElementById("box2")
			var oBox3 = document.getElementById("box3")
			function fn1(){
				// this在函数内部，指向调用它的那个对象，
				// 通常如果函数前面没有对象调用，基本上指向windows
				alert(this.id)
			}
			oBox1.onclick = fn1;
			oBox2.onclick = fn1;
		</script>
	</body>
</html>

事件冒泡带来的影响

事件冒泡可能会产生事件冲突，下面举个例子（这是一个错误的示范）：

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
			#box{
				width: 200px;
				height: 100px;
				background-color: green;
			}
		</style>
	</head>
	<body>
		<button id="btn">显示</button>
		<div id="box"></div>
		<script type="text/javascript">
			var oBtn = document.getElementById("btn")
			var oBox = document.getElementById("box")
			oBtn.onclick = function(){
				oBox.style.display = "block"
			}
			// 随着代码增多，有可能在document中加一个点击事件
			document.onclick = function(){
				// 隐藏box
				oBox.style.display = "none"
			}
		</script>
	</body>
</html>

事件冒泡的优点

每个事务都有他应该存在的道理，下面用一个例子来说明为什么要使用事件冒泡。

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<body>
		<!--事件冒泡是默认支持的机制，为什么要用到事件冒泡？-->
		<!--事件源-->
		<!--创建元素-->
		<input type="text" id="ipt"/><button id="btn">添加</button>
		<ul>
			<li>adfafa</li>
			<li>adfafa</li>
			<li>adfafa</li>
		</ul>
		<script type="text/javascript">
			var oIpt = document.getElementById("ipt")
			var oBtn = document.getElementById("btn")
			var oUi = document.getElementsByTagName("ul")[0]
			// 绑定添加的事件
			oBtn.onclick = function(){
				var inputValue = oIpt.value
				// 去创建一个li
				var oLi = document.createElement("li")
				// 给oLi添加内容
				oLi.innerHTML = inputValue
//				console.log(oLi)
				// 把li元素放到ul里面去
				oUi.appendChild(oLi)
			}
			//createElement，创建一个html元素
			//appendChild,添加一个元素
			// 需求：当点击所有的li的时候，让它变成红色
			var aLi = document.getElementsByTagName("li")
			// 给所有的li批量的绑定事件
//			for(var i = 0;i<aLi.length;i++){
//				aLi[i].onclick = function(){
//					// this指向当前你点击的这个li
//					this.style.color = "red"
//				}
//			}
			// 带来问题：新添加的元素不能绑定上面事件
			// 绑定不上事件的原因：循环先执行，添加元素后执行
			// 如何解决：事件冒泡
			oUi.onclick = function(ev){
				// 让它改变li的字体颜色，给那个li设置？点击的那个li就设置那个li
//				alert(ev.target.innerHTML)
				// ev.target就是被点击的那个li
				ev.target.style.color = "red"
			}
			// 事件委托:原来发生在li身上的事情，让它父亲来做
		</script>
	</body>
</html>

野生杂学家阿博

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
前端笔记72——事件冒泡机制

概述事件冒泡：当一个元素接收到事件的时候会把他接收到的事件传给自己的父级，一直到window 。注意：这里传递的仅仅是事件，并不传递所绑定的事件函数。所以如果父级没有绑定事件函数，就算传递了事件也不会有什么表现但事件确实传递了。简单的例子<!DOCTYPE html><html> <head> <meta charset="U...
复制链接

扫一扫