js的事件冒泡和事件捕获
Posted 世界之魂
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了js的事件冒泡和事件捕获相关的知识,希望对你有一定的参考价值。
一、定义
事件捕获:从document到触发事件的那个节点,自上而下触发事件;
事件冒泡:从触发事件节点依次向上触发事件,直到document。
原声js中,绑定事件方法addEventListener(eventName,function,bool)的第三个参数控制事件触发顺序。true为捕获,false为冒泡,默认冒泡。
event.stopPropagation()会阻止事件流的传播。
二、实例
html结构:
<div id=\'parent\'> <div id=\'child\'> </div> </div>
给div绑定事件:
1.冒泡过程
parent.addEventListener(\'click\', function(){ console.log(\'parent\'); },false); child.addEventListener(\'click\', function(){ console.log(\'child\'); },false); body.addEventListener(\'click\', function(){ console.log(\'body\'); },false);
结果如下:
2.捕获过程
parent.addEventListener(\'click\', function(){ console.log(\'parent\'); },true); child.addEventListener(\'click\', function(){ console.log(\'child\'); },true); body.addEventListener(\'click\', function(){ console.log(\'body\'); },true);
结果如下:
三、应用
1.事件委托:利用事件冒泡处理动态元素事件绑定的方法。
给父级div绑定事件,子级元素的事件冒泡到父级div进行响应;
<div id=\'parent\'> <div class=\'child\'></div> <div class=\'child\'></div> <div class=\'child\'></div> </div>
如果要给class为child的div绑定动态事件,使用冒泡则效率最高:
parent.addEventListener(\'mousemove\', function(event){ var tDiv =event.target; if ($(tDiv).hasClass(\'child\')) { $(tDiv).css(\'background\', \'red\').siblings().css(\'background\', \'green\'); } return false; },false);
2.结合stopPropagation和冒泡、捕获可以阻止某个元素上的特定事件
以上是关于js的事件冒泡和事件捕获的主要内容,如果未能解决你的问题,请参考以下文章