JavaScript冒泡和捕捉的知识介绍(附代码)
本篇文章给大家带来的内容是关于JavaScript冒泡和捕捉的知识介绍(附代码),有必然的参照 价值,有需要的伴侣可以参照 一下,但愿对你有所帮忙。
JS 冒泡和捕捉是如何回事
冒泡和捕捉是指在元素上的事件被触发的时候,js 传递事件的两种标的目的,或者说历程。
前言:
如,有这么一个页面 和 js 办法
Less: 我用 less写的,假如没有 less 环境,可以疏忽这段。
.level { padding: 50px 80px; } .level-template(@level: 1, @color: #fff){ background-color: darken( @color , 5% * @level); } #lv1{ .level-template(1)} #lv2{ .level-template(2)} #lv3{ .level-template(3)} #lv4{ .level-template(4)}
HTML
<div id="lv1" class="level"> <div id="lv2" class="level"> <div id="lv3" class="level"> <div id="lv4" class="level"> </div> </div> </div> </div>
JS
function $(id) { return document.getElementById(id); } window.onload = () => { $('lv1').addEventListener("click",()=>{console.log('lv1')},true); $('lv2').addEventListener("click",()=>{console.log('lv2')},true); $('lv3').addEventListener("click",()=>{console.log('lv3')},true); }; // 上面的 () => {} 为 ES6 的匿名办法的定义方式 // 等同于 function () { console.log('lv1') }
上面的 js 做的事:
在页面载入的时候,给三个 div增加 click 监听办法,本人被点击的时候会在 console 中输出本人的 id 值。
页面的构造是这样的 lv1 包括 lv2,lv2 又包括 lv3,当点击 lv3 的时候,其实也点击了 lv2 和 lv1,由于 lv3 在 lv2 内部,点击 lv3 的时候,天然也点击了 lv2 和 lv1,也就是说,点击 lv3 的时候,会触发三个 click 事件。
至于这三个事件触发的次序,就是所谓的 冒泡 和 捕捉。
事件触发经过的三个阶段:
- 捕捉阶段:先由文档的根节点
document
旧事件触发对象,从外向内捕捉事件对象; - 定位目标:寻觅到目标事件位置(事发地),触发事件;
- 冒泡阶段:再从目标事件位置往文档的根节点标的目的回溯,从内向外冒泡事件对象。
1. 捕捉阶段
如上面的例子,在 lv3 被点击的时候,js 会从文档的最上层开端,由外向内寻觅点击事件的起源,也就是 lv3。那么这个由外向内的历程就是 lv1 --> lv2 --> lv3,这三个 p 的 click 事件依照这个历程顺次被触发。
这个触发的标的目的就是捕捉的标的目的。
2. 冒泡阶段
在寻到被点击的 lv3 之后,事件向上传递,历程是 lv3 --> lv2 --> lv1,此时顺次触发 lv3、lv2、lv1 的 click 事件,这个由内向外的触发历程就称为冒泡
再回看一下最常用的事件绑定办法的格局:
element.addEventListener(event, function, useCapture)
这里面,useCapture 是个布尔值,用于定义事件是在冒泡阶段触发,还是在捕捉阶段触发,默许值是 false,代表在冒泡时触发。
此时你就会知道上面阿谁例子里定义的 click 办法是在 捕捉阶段 施行,那么返回的结果就是
lv1 lv2 lv3
假如最上面的例子,onload 内容是这样的
window.onload = () => { $('lv1').addEventListener("click",()=>{console.log('lv1')},false); $('lv2').addEventListener("click",()=>{console.log('lv2')},false); $('lv3').addEventListener("click",()=>{console.log('lv3')},false); };
那么也就是说, click
事件在 冒泡阶段
触发,返回的结果就是
lv3 lv2 lv1
总结
冒泡和捕捉的关系,只会显现在包括和被包括的构造中,兄弟关系是不会有这种关系的。
冒泡和捕捉只是标的目的的不一样罢了。
以上就是JavaScript冒泡和捕捉的知识介绍(附代码)的具体内容,更多请关注百分百源码网其它相关文章!