浅谈js事件流
发布于 4 年前 作者 myfirebug 5816 次浏览 来自 分享

什么是事件流? 事件流分为三个阶段即:事件捕获阶段、处于目标阶段、事件冒泡阶段 什么是事件捕获? 当某个事件发生时,父元素应该更早接收到事件,具体元素则最后接收到事件 如下面例子:

<ul id="js_ul">
    <li id="js_li">
        <button id="js_click_me">点我吖</button>
    </li>
</ul>
// addEventListener的第三参数为true时,即是事件捕获,为false即是事件冒泡
let button = document.getElementById('js_click_me'),
        ul = document.getElementById('js_ul'),
        li = document.getElementById('js_li'),
        body = document.body,
        html = document.documentElement;
    button.addEventListener('click', function(e) {
        console.log('button');
    }, true);
    ul.addEventListener('click', function(e) {
        console.log('ul');
    }, true);
    li.addEventListener('click', function(e) {
        console.log('li');
    }, true);
    body.addEventListener('click', function(e) {
        console.log('body');
    }, true);
    html.addEventListener('click', function(e) {
        console.log('html');
    }, true);
    document.addEventListener('click', function(e) {
        console.log('document');
    }, true);
    window.addEventListener('click', function(e) {
        console.log('window');
    }, true);

如果点击button,那么这个事件发生的顺序是这样的: 1.window 2.document 3.html 4.body 5.ul 6.li 7.button 什么是事件冒泡? 由最具体的元素接收,然后逐级向上传播到不具体的节点 这里只需要将上面的addEventListener的第三个参数修改为false即可 如果点击button,那么这个事件发生的顺序是这样的: 1.button 2.li 3.ul 4.body 5.html 6.document 7.window

1 回复

题目叫 dom事件流 比较合适。

回到顶部