本文主要是介绍useCapture:true与flase的表现区别 事件的冒泡与捕获,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!
书接上文!上文讲到useCapture。
这个是官网给的解释。反正看的似懂非懂
- true - 事件句柄在捕获阶段执行
- false- false- 默认。事件句柄在冒泡阶段执行
现在是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>
写到这里 我感觉有必要写一下 事件的捕获 目标 冒泡!
还有一个委托 !
这篇关于useCapture:true与flase的表现区别 事件的冒泡与捕获的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!