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

ゞ浴缸里的玫瑰 2022-09-26 11:50 4阅读 0赞

书接上文！上文讲到useCapture。

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

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

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

![SouthEast][]

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

![SouthEast 1][]

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

![SouthEast 2][]

个人总结：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>

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

还有一个[委托 ][Link 1]!

[SouthEast]: /images/20220717/a2b2bcc67d844b6f8ca75429585d8cab.png
[SouthEast 1]: /images/20220717/4be3f8ffad9f44a6977f051431cea1c3.png
[SouthEast 2]: /images/20220717/5a00c68a68bc4432b824c4b6e4e4b110.png
[Link 1]: http://blog.csdn.net/u011456552/article/details/52623125

发表评论取消回复

表情：

评论列表（有 0 条评论，4人围观）

还没有评论，来说两句吧...

相关阅读

相关冒泡与捕获事件

一.冒泡与捕获 1.概念。冒泡事件：微软公司提出的，事件由子元素传递到父元素的过程叫做冒泡（false）。捕获事件：网景公司提出的，事件由父元素传递到子

雨点打透心脏的1/2处/ 2024年02月20日 11:28/ 0 赞/ 109 阅读

相关 js中的事件冒泡与事件捕获

js中的事件冒泡与事件捕获 1. 问题场景 2. js事件流 2.1 捕获和冒泡 2.1 事件流阻止 2.1.1

迈不过友情╰/ 2023年10月11日 21:21/ 0 赞/ 93 阅读

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

书接上文！上文讲到useCapture。这个是官网给的解释。反正看的似懂非懂 true - 事件句柄在捕获阶段执行 false- false- 默认。事件句柄

ゞ浴缸里的玫瑰/ 2022年09月26日 11:50/ 0 赞/ 5 阅读

相关 js中的事件捕获与事件冒泡

[链接1][1] [链接2][2] [1]: http://www.jb51.net/article/42492.htm [2]: http://www.jb5

我会带着你远行/ 2022年07月15日 07:24/ 0 赞/ 268 阅读

相关事件模型--冒泡与捕获

Traditional Module（传统方式的事件模型）直接在DOM元素上绑定事件处理器 window.onload=function(){ …} o

秒速五厘米/ 2022年06月10日 00:18/ 0 赞/ 330 阅读

相关浅析JavaScript事件捕获与事件冒泡

一、什么是事件流？事件，是文档或浏览器窗口中发生的一些特定的交互瞬间。事件流，描述的是页面中接收事件的顺序。一个事件被触发后，一般会有三个不同的阶段：捕获阶段、目标

亦凉/ 2022年05月26日 12:30/ 0 赞/ 330 阅读

相关事件冒泡与事件捕获

事件冒泡事件冒泡是自下而上的去触发事件例如： <!DOCTYPE html> <html lang="en"> <head

青旅半醒/ 2022年05月19日 13:08/ 0 赞/ 392 阅读

相关事件捕获与事件冒泡

事件：JavaScript和HTML之间的交互是通过事件实现的事件流：描述的是页面接受事件的顺序事件捕获：不太具体的节点先接受到事件，最具体的节点最后接收到事件（顺

喜欢ヅ旅行/ 2022年01月22日 05:19/ 0 赞/ 418 阅读

相关捕获事件与冒泡事件

如何区分捕获事件与冒泡事件捕获事件从外向里触发事件冒泡事件从里向外触发事件捕获事件与冒泡事件先手顺序先捕获在冒泡如果有注册事件按照注

Love The Way You Lie/ 2022年01月20日 13:05/ 0 赞/ 439 阅读

相关事件冒泡和事件捕获的区别

事件冒泡和事件捕获的区别： 1、从事件流向的角度说：事件冒泡：当触发了某个元素的某类型(如：onclick)的事件后，该元素的父元素的同类型（如：onclick）的事件

红太狼/ 2021年09月29日 04:06/ 0 赞/ 518 阅读