事件执行的三个阶段

js中注册的事件执行的时候有3个阶段
1.捕获阶段
2.执行阶段
3.冒泡阶段
注意点:只有两个阶段能同时执行(捕获 + 执行、或者 执行 + 冒泡 )
事件执行的三个阶段
可以通过addEventListener来注册事件
参数说明
例子:

<div class="father">
    <div class="son"></div>
</div>

第三个参数传false或者不传的情况(执行 + 冒泡)

let oFather = document.querySelector('.father');
    let oSon = document.querySelector('.son');
    oFather.addEventListener('click',function () {
        console.log('father');
    },false);
    oSon.addEventListener('click',function () {
        console.log('son');
    },false);

打印结果为:先打印son,再打印father

son
father
 let oFather = document.querySelector('.father');
    let oSon = document.querySelector('.son');
    oFather.addEventListener('click',function () {
        console.log('father');
    },true);//true表示捕获 + 执行
    oSon.addEventListener('click',function () {
        console.log('son');
    },true);//true表示捕获 + 执行

打印结果为:先打印father,再打印son(捕获 + 执行)

father
son

若想指定是否需要冒泡,只能通过addEventListener来注册事件,通过onXXX属性绑定事件不接收参数,无法指定,通过attachEvent接收两个参数(事件名称,回调函数)也无法指定是否冒泡

发布了70 篇原创文章 · 获赞 7 · 访问量 9232

猜你喜欢

转载自blog.csdn.net/qq_41893334/article/details/100044210