事件绑定、事件解绑及事件捕获讲解

最新推荐文章于 2023-09-11 08:19:56 发布

Mr.ZKH

最新推荐文章于 2023-09-11 08:19:56 发布

阅读量134

点赞数

本文链接：https://blog.csdn.net/weixin_44415461/article/details/100138693

版权

事件绑定 addEventListener(事件名称,函数, 捕获) 第三个参数为
可选，默认为false，false即事件流为事件冒泡

事件解绑 removeEventListener(事件名称, 函数, 捕获) ，默认为
false，false即事件流为事件冒泡

事件捕获和事件冒泡相反，如果开启了事件捕获就先执⾏捕获的事
件再执⾏当前被点击事件

注意，事件绑定中传⼊匿名函数会导致⽆法进⾏事件解绑

<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>事件绑定、事件解绑及事件捕获讲解</title>
	<style type="text/css">
		#div1{
			width:300px;
			height:300px;
			background: purple;
		}
		#div2{
			width:100px;
			height:100px;
			background:black;
		}
	</style>
</head>
<body>
	<div id="div1">
		<div id="div2"></div>
	</div>

	<script type="text/javascript">
		var oDiv1 = document.getElementById('div1')
		var oDiv2 = document.getElementById('div2')

		/*事件绑定 addEventListener(事件名称,函数, 捕获) 第三个参数为
		可选，默认为false，false即事件流为事件冒泡,从外往里找*/
		// oDiv1.addEventListener('click',function(){
		// 	console.log('你点击了div1')
		// },false)

		//true即事件流为事件捕获,从里往外找
		oDiv1.addEventListener('click',fun,true)

		oDiv2.addEventListener('click',function(){
			console.log('你点击了div2')
			/*事件解绑 removeEventListener(事件名称, 函数, 捕获) ，默认为
			false，false即事件流为事件冒泡*/
			oDiv1.removeEventListener('click',fun,true)
		},false)

		function fun(){
			console.log('你点击了div1')
		}
	</script>
</body>
</html>

效果图：
在这里插入图片描述

Mr.ZKH

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
事件绑定、事件解绑及事件捕获讲解

事件绑定 addEventListener(事件名称,函数, 捕获) 第三个参数为可选，默认为false，false即事件流为事件冒泡事件解绑 removeEventListener(事件名称, 函数, 捕获) ，默认为false，false即事件流为事件冒泡事件捕获和事件冒泡相反，如果开启了事件捕获就先执⾏捕获的事件再执⾏当前被点击事件注意，事件绑定中传⼊匿名函数会导致⽆法进⾏事件...
复制链接

扫一扫