JavaScript中的事件冒泡

最新推荐文章于 2023-11-14 21:30:05 发布

雷旭4466

最新推荐文章于 2023-11-14 21:30:05 发布

阅读量460

点赞数

分类专栏： javascript 文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/leixu4466/article/details/130354994

版权

javascript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

文章目录

基础事件

事件指的就是用户和浏览器交互的行为
事件中有鼠标事件、键盘事件、表单事件、document事件

为了给事件对象分配一个处理事件的程序，事件处理程序用于反馈用户发生的行为，行为在js中的表示就是一个函数，当用户触发了某个行为以后需要执行事件处理程序的这个函数

事件的三要素

事件源（触发事件的元素）、事件类型（决定事件触发的方式例如点击，按下…）、事件的处理函数（事件触发后需要执行的代码）

事件捕获

当鼠标点击或者触发dom事件时（事件源触发），浏览器会从根节点=>事件源进行事件传播

事件冒泡

当一个元素接受到事件的时候，会把他接受到的事件传给自己的父级，一直到window（传递的是时间，而不是所绑定的事件函数）

事件源到根节点（由内到外）进行事件传播

<body>
	<div class="big">
		<div class="center">
			<div class="small"></div>
		</div>
	</div>
</body>

<script>
	let big = document.querySelector(".big")
	let center = document.querySelector(".center")
	let small = document.querySelector(".small")

	//获取节点，给节点添加事件监听器
	big.addEventListener('click',()=>{
		console.log('big')
	})

	center.addEventListener('click',()=>{
		console.log('center')
	})

	small.addEventListener('click',()=>{
		console.log('small')
	})
</script>

当点击small时，控制台会输出small center big

事件处理的三个阶段

捕获阶段
事件从document对象开始触发，然后到最精准的目标元素的执行阶段
当前目标阶段
事件按照捕获的顺序依次从最外层到自身，自身阶段触发的时候就是当前目标阶段
冒泡阶段
从自身元素向外层父元素和祖先元素依次执行与自身目标阶段相同的阶段，直至document

事件委托

事件委托也称为事件代理。就是利用事件冒泡，把子元素的事件都绑定到父元素上，如果子元素阻止了事件冒泡，那么委托就无法实现
原理实现：

不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点

应用场景：1000个button需要绑定点击事件
方案一：如果循环给每个按钮绑定点击事件，那么会增加内存损耗，影响性能

let btns = document.getElementsByTagName('button')
for(let i = 0; i < btns.length; i++){
	btn[i].onclick = function() {
		console.log(i)
	}
}

方案二：可以给button的父元素绑定点击事件

let father = document.querySelector('.father')
father.onclick = function(e) {
	console.log(e.target.innerHTML)
}

雷旭4466

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
JavaScript中的事件冒泡

javascript的事件冒泡原理
复制链接

扫一扫

专栏目录