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

概述

事件冒泡 :当一个元素接收到事件的时候 会把他接收到的事件传给自己的父级,一直到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
    评论
好的,关于 jQuery 的事件,我可以和你分享一些学习笔记。 1. 绑定事件 在 jQuery 中,我们可以通过以下方式来绑定事件: ``` $(selector).event(function(){ // 事件处理程序 }) ``` 其中,`selector` 表示要绑定事件的元素,`event` 表示要绑定的事件类型,比如 `click`、`mouseover` 等等。事件处理程序则是在事件触发时要执行的代码块。 2. 多个事件绑定 我们可以通过 `on()` 方法来同时绑定多个事件: ``` $(selector).on({ event1: function(){ // 事件处理程序1 }, event2: function(){ // 事件处理程序2 } }) ``` 这样,当 `event1` 或 `event2` 中任意一个事件触发时,对应的处理程序都会被执行。 3. 解除事件 如果需要解除某个元素的事件处理程序,可以使用 `off()` 方法: ``` $(selector).off(event); ``` 其中,`event` 表示要解除的事件类型。如果不指定事件类型,则会解除该元素上所有的事件处理程序。 4. 事件委托 在 jQuery 中,我们可以使用事件委托来提高性能。事件委托是指将事件绑定到父元素上,而不是绑定到子元素上,然后通过事件冒泡来判断是哪个子元素触发了该事件。这样,当子元素数量较多时,只需要绑定一次事件,就可以监听到所有子元素的事件。 ``` $(selector).on(event, childSelector, function(){ // 事件处理程序 }) ``` 其中,`selector` 表示父元素,`event` 表示要绑定的事件类型,`childSelector` 表示要委托的子元素的选择器,事件处理程序则是在子元素触发事件时要执行的代码块。 以上是 jQuery 中事件的一些基本操作,希望对你有所帮助。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值