事件的三个阶段:捕获阶段 目标阶段 冒泡阶段
js有好多的知识需要不断积累,但是不能浅尝,应该深究其内因,并运用在日常开发过程中。
捕获阶段:
事件从根节点流向目标节点,途中流经各个DOM节点,在各个节点上触发捕获事件,直到达到目标节点。
那么捕获阶段有什么用吗?完全可以没有捕获阶段也可以啊?
捕获阶段的主要任务是建立传播路经,在冒泡阶段根据这个路经回溯到文档根节点
目标阶段
事件到达目标节点时,就到了目标阶段,事件在目标节点上被触发冒泡阶段
事件在目标节点上触发后,不会终止,一层层向上冒,回溯到根节点。运用举例:
html代码
<div class="a"> <li class="b"> <a href="#" class="c">buhuo</a> </li> </div>
js代码
var div = document.getElementsByClassName('a')[0]; //注意[0] var li = document.getElementsByClassName('b')[0]; var a = document.getElementsByClassName('c')[0]; //第三个参数默认是false, //是对事件冒泡过程添加函数进行处理 div.addEventListener('click',function(event){ console.log('div'); }); li.addEventListener('click',function(event){ console.log('li'); }); a.addEventListener('click',function(event){ console.log('a'); }); //事件捕获过程处理 //第三个参数设为true div.addEventListener('click',function(event){ console.log('div'); },true); li.addEventListener('click',function(event){ console.log('li'); },true); a.addEventListener('click',function(event){ console.log('a'); },true);
运行结果
div
li
a
a
li
div可知:首先是捕获阶段执行,再是冒泡阶段
运用在事件委托上
JavaScript事件代理可以把事件处理器添加到一个父元素上,这样就避免了把事件处理器添加到多个子元素上。阻止事件冒泡
某个DOM节点绑定了某事件监听器,本来是想当该DOM节点触发事件,才会执行回调函数。结果是该节点的某后代节点触发某事件,由于事件冒泡,该DOM节点事件也会触发,执行了回调函数,这样就违背了最初的本意了。
html
<!-- 阻止事件冒泡 --> <li class="aa"> <a href="#" class="bb">阻止事件冒泡</a> <a href="#" class="cc">cc</a> </li>
js
var li1 = document.getElementsByClassName('aa')[0]; li1.addEventListener('click',function(event){ if(event.target.tagName.toLowerCase() === 'li'){ console.log(event.target); } console.log(event.currentTarget); //监听节点 }) for(var i=0;i<li1.children.length;i++){ li1.children[i].addEventListener('click',function(event){ event.stopPropagation(); //在子元素上阻止冒泡 }) }
结果
点击a标签时,没有任何反应,当点击li标签时,会输出对象注意:
无法在捕获阶段阻止事件冒泡
所以当上述代码加上true后,达不到效果