Javascript——冒泡排序和阻止事件冒泡

最新推荐文章于 2024-02-11 13:29:08 发布

mintsolace

最新推荐文章于 2024-02-11 13:29:08 发布

阅读量698

点赞数

分类专栏： css javascript 学习笔记文章标签： javascript css

本文链接：https://blog.youkuaiyun.com/mintsolace/article/details/108153567

版权

学习笔记同时被 3 个专栏收录

128 篇文章

订阅专栏

javascript

56 篇文章

订阅专栏

css

32 篇文章

订阅专栏

本文介绍了DOM事件流的三个阶段，包括捕获阶段和冒泡阶段，并详细说明了JavaScript中如何通过addEventListener设置事件处理程序在不同阶段执行。同时，探讨了某些事件没有冒泡的情况以及阻止事件冒泡的两种方法。最后，讨论了事件委托的概念和原理，它通过给父节点添加监听器，利用事件冒泡实现对每个子节点的影响，以此提高程序性能。

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

事件发生时会在元素节点之间按照特定的顺序传播，这个传播过程即DOM事件流。

JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent只能得到冒泡阶段
addEventListener(type,listener[, useCapture])第三个参数如果是true，表示在事件捕获阶段调用事件处理程序；如果是false（不写默认就是false），表示在事件冒泡阶段调用事件处理程序。

DOM事件流三个阶段

JS代码中只能执行捕获或者冒泡其中的一个阶段
onclick和attachEvent(ie)只能得到冒泡阶段
捕获阶段，如果addEventListener第三个参数是true，那么处于捕获阶段：document->html->body->father->son

<script>
        var son = document.querySelector('.son');
        son.addEventListener('click',function(){
            alert('son');
        },true);
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
            alert('father');
        },true);
</script>

冒泡阶段：如果addEventListener第三个参数是false或省略，则处于冒泡阶段：son->father->body->html->document

<script>
        var son = document.querySelector('.son');
        son.addEventListener('click',function(){
            alert('son');
        },false);
        var father = document.querySelector('.father');
        father.addEventListener('click',function(){
            alert('father');
        },false);
        document.addEventListener('click',function(){
			alert('document');
		})
</script>

有些事件是没有冒泡的，比如onblur, onfocus, onmouseenter, onmouseleave

阻止事件冒泡的两种方式：
事件冒泡：开始时由最具体的元素接受，然后逐级向上传播到DOM最顶层节点
事件冒泡本身的特性会带来坏处，也会带来好处。

<script>
    if(e&&e.stopPropagation){
        e.stopPropagation();
    }else{
        window.event.cancelBubble=true;
    }
</script>

事件委托（代理/委派）：在jQuery里称为事件委派。
原理：给父节点添加侦听器，利用事件冒泡影响每一个子节点。不是每个子节点单独设置事件监听器，而是事件监听器设置在其父节点上，然后利用冒泡原理影响设置每个子节点。

例：给ul注册点击事件，然后利用事件对象的target来找到当前点击的li，因为点击li，事件会冒泡到ul，ul有注册事件，就会触发事件监听器。

作用：只需要操作一次DOM，提高了程序的性能。

<script>
    var ul = document.querySelector('ul');
    ul.addEventListener('click',function(e){
        e.target.style.backgroundColor = 'pink';
    })
</script>