useCapture：true与flase的表现区别事件的冒泡与捕获

最新推荐文章于 2022-04-30 22:57:46 发布

沈志勇说

最新推荐文章于 2022-04-30 22:57:46 发布

阅读量1.1w

点赞数 8

分类专栏： javascript笔记文章标签： javascript addEventListener attachEvent useCapture

本文链接：https://blog.csdn.net/u011456552/article/details/52610754

版权

javascript笔记专栏收录该内容

16 篇文章 0 订阅

订阅专栏

书接上文！上文讲到useCapture。

这个是官网给的解释。反正看的似懂非懂

true - 事件句柄在捕获阶段执行
false- false- 默认。事件句柄在冒泡阶段执行

我个input加了一个父节点，同时给他也加一个弹出事件。弹出 hello 子元素弹出你好

现在是false 点击按钮出现你好再出现 hello

改成true 点击按钮先出现 hello 再出现你好！

个人总结：false的话就是事件冒泡了从子元素到父元素

true的话就是事件捕获从父到子！

以下是个人写的一个demo 供大家参考！代码如下：

	<meta charset="UTF-8">
	<title>Document</title>
	<style type="text/css">
		div{
			width: 200px;
			height: 200px;
			border: 1px solid red;
		}
	</style>
	<script type="text/javascript">
		window.onload =function () {
			var oBtn =document.getElementById('btn');
			var oDiv =document.getElementById('div1');

			//compatible writing
			function addEvent(ele,eve,fn){
				if(ele.attachEvent){
					ele.attachEvent('on'+eve,fn);
				}else{
					//请修改这个boolean值。点击 “按钮”观察效果
					ele.addEventListener(eve,fn,true);
				}
			}

			addEvent(oBtn,'click',function(){
				alert('你好！');
			});

			addEvent(oDiv,'click',function(){
				alert('hello！');
			});
		}
	</script>
</head>
<body>
	<div id="div1">
		<input type="button" value="按钮" id="btn">
	</div>
</body>
</html>

写到这里我感觉有必要写一下事件的捕获目标冒泡!

还有一个委托 !