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

来源：互联网发布：php 怎么去掉html标签编辑：程序博客网时间：2024/06/09 18:50

书接上文！上文讲到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 writingfunction 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>

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

还有一个委托!

0 0

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

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