事件处理模型

最新推荐文章于 2021-02-16 18:21:21 发布

QHQLemon

最新推荐文章于 2021-02-16 18:21:21 发布

阅读量820

点赞数 1

分类专栏：笔记整理文章标签：事件处理模型

本文链接：https://blog.youkuaiyun.com/weixin_38022998/article/details/92831578

版权

笔记整理专栏收录该内容

12 篇文章

订阅专栏

本文深入探讨了事件处理模型，包括事件冒泡和事件捕获的概念。事件冒泡是指事件从子元素向父元素传递，而事件捕获则是自window开始向目标元素捕获。DOM事件流分为捕获阶段、目标阶段和冒泡阶段。可以使用event.stopPropagation()阻止事件冒泡（不支持IE9以下），IE则使用event.cancelBubble = true。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

1.事件处理模型

（1）事件冒泡

结构上嵌套的元素，会存在事件冒泡功能，也就是说，同一事件，子元素会向父元素冒泡
无论哪种绑定方法都存在事件冒泡

    var wrapper = document.getElementsByClassName('wrapper')[0];
    var content = document.getElementsByClassName('content')[0];
    var box = document.getElementsByClassName('box')[0];
    wrapper.addEventListener('click', function(){
        console.log('wrapper');
    },false);
    content.addEventListener('click', function(){
        console.log('content');
    },false);
    box.addEventListener('click', function(){
        console.log('box');
    },false)

（2）事件捕获

结构上存在嵌套的元素，会存在事件捕获，即同一事件，自window捕获至子元素（事件源元素）
触发条件：ele.addEventListener(type, fn, true)
如示例点击box依次输出：window document html body wrapper content box

    window.addEventListener('click', function(){
        console.log('window');
    },true);
    document.addEventListener('click', function(){
        console.log('document');
    },true);
    document.documentElement.addEventListener('click', function(){
        console.log('html');
    },true)
    document.body.addEventListener('click', function(){
        console.log('body');
    },true);

     wrapper.addEventListener('click', function(){
        console.log('wrapper');
    },true);
    content.addEventListener('click', function(){
        console.log('content');
    },true);
    box.addEventListener('click', function(){
        console.log('box');
    },true)

2.dom事件流

（1）dom事件捕获及冒泡的具体流程

window => document => html => body ...父元素目标元素
目标元素 => 父元素 ... => body => html => document => window

（2）dom事件流：捕获过程，目标阶段，冒泡过程，值得注意的是，当目标既绑定捕获事件处理函数，又绑定冒泡时间处理函数，目标阶段时，先绑定谁就先执行谁，如：

    wrapper.addEventListener('click', function(){
        console.log('冒泡-wrapper');
    },false);
    content.addEventListener('click', function(){
        console.log('冒泡-content');
    },false);
    box.addEventListener('click', function(){   //先绑定冒泡
        console.log('冒泡-box');
    },false)
    wrapper.addEventListener('click', function(){
        console.log('捕获-wrapper');
    },true);
    content.addEventListener('click', function(){
        console.log('捕获-content');
    },true);
    box.addEventListener('click', function(){  //再绑定捕获
        console.log('捕获-box');
    },true)

3.取消事件冒泡

（1）W3C标准，event.stopPropagation(); 不支持ie9以下版本

    wrapper.attachEvent("onclick", function(){
        console.log("wrapper")
    })
    content.attachEvent("onclick", function(){
        console.log("content")
    })
    box.attachEvent("onclick", function(){
        var event = window.event;
        event.cancelBubble = true;
        console.log("box")
    })

（2）IE独有，event.cancleBubble = true;

    wrapper.attachEvent("onclick", function(){
        console.log("wrapper")
    })
    content.attachEvent("onclick", function(){
        console.log("content")
    })
    box.attachEvent("onclick", function(){
        var event = window.event;
        event.cancelBubble = true;
        console.log("box")
    })