事件冒泡、事件捕捉、事件代理(事件委托)

最新推荐文章于 2024-01-25 16:34:59 发布
最新推荐文章于 2024-01-25 16:34:59 发布
阅读量350 收藏 1
点赞数
文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/commeil/article/details/123949844
版权

事件冒泡

如下代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #div1 {
            height: 300px;
            width: 300px;
            background-color: red;
        }
        #div2 {
            height: 200px;
            width: 200px;
            background-color: black;
        }
    </style>
</head>
<body>
    <div id="div1">
        <div id="div2"></div>
    </div>
    <script>
        var div1 = document.getElementById('div1');
        var div2 = document.getElementById('div2');
        div1.addEventListener('click', function () {
            console.log('div1')
        }, false);
        div2.addEventListener('click', function () {
            console.log('div2')
        }, false);
    </script>
</body>
</html>

将上述代码在浏览器打开，当点击div2(黑色)元素，会执行其回调函数打印文字div2，同时也会触发元素div1的回调函数，打印文字div1。即在冒泡状态下子元素的点击状态会传递给父元素，一直传递到document对象，这就是事件冒泡。因此上述的点击状态传递过程为：

div2->div1->body->html->document   由内而外传播

在addEventListener中，第一个参数时事件，第二个参数时回调函数，第三个参数是决定回调函数执行的环境，默认为false(在事件冒泡时执行回调函数)。

事件捕捉

事件捕捉与事件冒泡正好相反，只需要将上述事件冒泡代码两个监听器中第三个参数改为true即可，true代表回调函数在事件捕捉时执行。

改为true之后，点击状态的传递变为如下：

div1->div2    由外而内传播

事件代理(事件委托)

事件代理其实就是利用事件冒泡的原理，进行一些复杂操作的简化。如下代码：

    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>

如果要对ul列表中所有li挂载事件，你可以手动写多个监听器去监听每一个li。当你在点击某一个li的时候，他的点击状态也会根据事件冒泡原理传递到ul中，我们可以根据这个原理，将所有li的事件都委托给ul，即将所有li的监听器只需要挂载在ul一个元素上即可，这样也能实现相同的效果。如下代码：

<body>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
    </ul>
    <script>
        var ul = document.getElementsByTagName('ul')[0];
        ul.addEventListener('click' , function(){
            console.log('点击了')
        })
    </script>
</body>

阻止事件冒泡和默认事件

先看没有阻止事件冒泡和默认事件的代码：

<body>
    <ul id="ul1">
        <li id="li1">1</li>
    </ul>
    <a href="http://www.baidu.com" id="a">百度</a>
    <script>
        var ul = document.getElementById('ul1')
        var li = document.getElementById('li1');
        var a = document.getElementById('a');
        a.addEventListener('click' , function(){
            console.log('a被点击了')
        })
        ul.addEventListener('click' , function(){
            console.log('ul被点击了')
        })
        li.addEventListener('click' ,function(){
            console.log('li被点击了');
        })
    </script>
</body>

此代码大家可以运行一下查看效果，完全点击li会触发li和ul的回调函数，点击a标签会发生跳转。
下面我们来看一下设置阻止事件冒泡和阻止默认事件的代码：

<body>
    <ul id="ul1">
        <li id="li1">1</li>
    </ul>
    <a href="http://www.baidu.com" id="a">百度</a>
    <script>
        var ul = document.getElementById('ul1')
        var li = document.getElementById('li1');
        var a = document.getElementById('a');
        a.addEventListener('click' , function(e){
            e.preventDefault()
            console.log('a被点击了')
        })
        ul.addEventListener('click' , function(){
            console.log('ul被点击了')
        })
        li.addEventListener('click' ,function(e){
            console.log('li被点击了');
            e.stopPropagation()
        })
    </script>
</body>

其中我们在a标签的回调函数中接收事件回调函数并且获取事件参数e，调用e的preventDefault方法可以将a标签的调转行为取消。
其中我们在li标签的回调函数中接收事件回调函数并且获取事件参数e，调用e的stopPropagation函数可以将li的点击冒泡状态取消。

综上，做以下总结：

preventDefault()  取消默认事件  比如a标签、submit按钮
stopPropagation()  取消事件冒泡
commeil
关注
JS中事件处理机制（秒懂事件委托、事件捕获和事件冒泡）
百赢出品，必属精品
04-05 1344
综上所述，事件委托利用了事件冒泡的特性来简化事件处理程序的管理和提高性能，而事件捕获相对不常用。在事件捕获阶段，会从根节点开始，逐级向下直到目标元素，所以我们在事件捕获阶段输出了点击的目标元素的文本内容。在事件冒泡阶段，事件会从目标元素开始，逐级向上直到根节点，所以我们在事件冒泡阶段输出了点击的目标元素的文本内容。：在特定情况下，事件委托可以用作事件代理，即将一个对象上的事件委托到另一个对象上，使得第一个对象可以监听和响应第二个对象上的事件。这可以通过事件委托在模态框的父元素上捕获点击事件来实现。
JavaScript之事件流、事件冒泡、事件捕获、事件委托：
weixin_70443954的博客
11-24 830
事件、事件流、事件冒泡、事件捕获、阻止事件冒泡、事件委托
事件委托的封装.html
08-31
通过e.target获取触发事件的事件源 利用事件冒泡原理，将绑定在多个子元素身上的相同事件，绑定在页面上现存的父元素身上。
关于事件冒泡和事件代理，看这一篇就够了！（上篇）
CreatorRay的博客
05-25 581
Hello，最近又准备面试了，通过前几次面试经历，有很深刻的感受，一定要注重基础，注重基础，注重基础！ 不要觉得自己用了一些轮子写了一些看起来很不错的项目和功能，就一定能找到好工作。那些轮子不是你写的，你只是一个搬运工… 我们要养成一个好的习惯，不要觉得我用这个轮子写了这个功能，这个功能就是我实现的，我就很厉害，厉害的是轮子，和你没关系，你做的事情，几乎所有人都能做。 最近复习到了原生JS的部分，这期给大家带来事件冒泡和事件代理。这部分的内容面试也经常遇到，在大厂面试中出现的频率也很频繁。 事件冒泡的来龙
事件冒泡，事件捕获与事件代理到底是什么？
m0_51066449的博客
11-17 349
事件冒泡，事件捕获，事件代理的描述。
事件代理（事件委托）、事件冒泡
v_jinfuwu的博客
01-18 785
事件代理（事件委托），事件冒泡事件代理（事件委托）事件冒泡 事件代理（事件委托） 事件代理又称为事件委托，一般作用于当多个相同元素需要使用同一个事件时，可以委托给他们的同一父元素上进行处理，这样会优化性能，不用给每个子元素都注册一遍事件，节省代码空间，减少代码冗余，减少事件注册； 事件委托的原理是DOM元素的事件冒泡 事件冒泡 事件冒泡是指父元素和子元素有相同的事件，当触发子元素事件时，会向上冒泡，同时也会触发父元素事件 事件冒泡又分为三个阶段： 1、捕获阶段：从window对象传导到目标节点
JS事件冒泡和事件代理
不二喵老师
03-15 264
1. 事件冒泡 当触发（点击或者触摸之类的做法）有父元素的子元素的时候，子元素会把接受到的触发事件传给父级，一直会传到window。传递的只是触发事件，而不传递绑定的事件函数，如果父级没有绑定事件函数，就算传递了触发事件也不会看得出来，但是传递的行为确实是做了。 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" c
事件冒泡、事件捕获及事件委托（事件代理）
weixin_37480339的博客
05-15 419
https://juejin.cn/post/6844904190280466440 <div> <div id="a"> a <div id="b"> b <div id="c">c</div> </div> </div> </div> 事件捕获 <script> var a = document.getElementById(
理解javascript中DOM事件
10-23
冒泡机制意味着，当一个元素上的事件被触发时，该事件会沿着DOM树结构向上冒泡，直到被捕捉或到达根节点。这一机制允许开发者在父元素上添加事件监听器，以响应子元素的事件。举个例子，如果在一个按钮上绑定了点击...
事件捕获、事件冒泡、事件委托（代理）
二熊不是熊二的博客
03-01 249
事件捕获：事件从最不精确的对象(document对象)开始触发，然后到最精确 事件冒泡：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发 不是所有事件都能冒泡。以下事件不冒泡：blur、focus、load、unload（关闭页面） 事件委托（代理）：不在事件的发生地（直接dom）上设置监听函数，而是在其父元素上设置监听函数，通过事件冒泡，父元素可以监听到子元素上事...
关于事件冒泡和事件代理，看这一篇就够了！（下篇）
CreatorRay的博客
05-26 297
接着上篇的节奏走，上篇文章我们介绍了事件冒泡的过程及解决方法。 这期带来事件代理~~ 事件代理这个名词其实经常出现，在面试的时候，有一个高频问题，假如现在有需求，需要操作10000个DOM节点，你会怎么做？ 就比如我们上篇用的案例，一个ul，内部有n个li。我现在要求你操作DOM，生成10000个li，并且分别给他们的点击事件绑定处理函数，输出自己的内容。 这种问题，显然不能用常规的办法，常规的办法，早就累死了。 其实面试官想考察的就是关于事件代理的相关内容。 <!DOCTYPE html> &
JavaScript事件冒泡和事件代理（委托）
丁哒哒的博客
10-31 429
一、什么是事件冒泡？ 冒泡型事件：事件按照从最特定的事件目标到最不特定的事件目标(document对象)的顺序触发。、 看了之后可能你还不理解，那么请看下面代码： <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8" /> <meta name="...
JavaScript基础之事件冒泡、事件捕获、事件委托(事件代理)、事件绑定
lee前端技术站
07-04 4653
JavaScript基础之事件冒泡、事件捕获、事件委托、事件绑定可以说是JavaScript基础中最为重要的知识点。下面就来介绍一下相关知识。 我们知道，在dom模型中，html是多层次的，当一个html元素上产生事件时，该事件会在dom树元素节点之间按照特定的顺序去传播。传播路径的每一个节点，都会收到这个事件，这就是dom事件流。当事件发生后，就会从内向外逐级传播，因为事件流本身没有处理事件的能力，所以，处理事件的函数并不会绑定在该事件源上。例如我们点击了一个按钮，产生了一个click事件，click事
事件代理(冒泡机制)
qq_64385019的博客
03-16 334
事件委托，会把一个或者一组元素的事件委托到它的父层或者更外层元素上,真正绑定事件的是外层元素，而不是目标元素当事件响应到目标元素上时,会通过事件冒泡机制从而触发它的外层元素的绑定事件上，然后在外层元素上去执行函数``` 下面举个例子：比如一个宿舍的同学同时快递到了，一种笨方法就是他们一个个去领取,较优方法就是把这件事情委托给宿舍长，让一个人出去拿好所有快递，然后再根据收件人一一分发给每个同学,在这里，取快递就是一个事件，每个同学指的是需要响应事件的 DOM元素，而出去统一领取快递的宿舍长就是代理的元素,所
事件捕获，事件冒泡及事件委托（代理）
m0_51658494的博客
04-12 283
事件捕获和事件冒泡 事件捕获和事件冒泡是一个相反的过程 在某个标签触发某个事件时，首先会从根节点开始遍历找到这个节点的父元素们，先发生捕获事件，找到并指执行然后开始冒泡 顺序可以参考下下面的： 捕获：document -> html -> body -> div -> p 冒泡：p -> div -> body -> html -> document 可以这么形容，当你你点击p之后，就好像向水里面扔了一个苹果，由于物理的一些原因，苹果首先会沉下一段距离（捕获）
jquery 笔记 事件
10-28
第2级模型中的事件流程包括事件的捕捉阶段（从DOM树向下传播到目标元素）和冒泡阶段（从目标元素向上冒泡）。`addEventListener`的第三个参数为`false`时，建立的是冒泡型处理程序，为`true`时建立的是捕捉型处理...
事件代理（事件委托） 事件捕获 事件冒泡
Tarafireworks的博客
08-31 137
参考
事件捕获、事件冒泡以及事件代理
weixin_48181168的博客
09-05 332
通常，我们将这种事件流向分为三个阶段：捕获阶段，目标阶段，冒泡阶段。 捕获阶段是指事件响应从最外层的Window开始，逐级向内层前进，直到具体事件目标元素。在捕获阶段，不会处理响应元素注册的冒泡事件。 目标阶段指触发事件的最底层的元素，如上图中的。 冒泡阶段与捕获阶段相反，事件的响应是从最底层开始一层一层往外传递到最外层的Window。 DOM事件流的三个阶段是先捕获阶段，然后是目标阶段，最后才是冒泡阶段。我们时常面试所说的先捕获后冒泡也由此而来。事件代理就是利用事件冒泡或事件捕获...
DOM--事件链、事件冒泡和捕获、事件代理
qq_56668869的博客
07-22 577
事件链、事件冒泡、事件捕获、事件代理（委托）
浅谈js的事件机制，事件冒泡、事件捕获、事件代理(事件委托)
最新发布
ajaxsync
01-25 1236
当你点击粉色的时候，首先会触发蓝色，然后再触发粉色（虽然绑定了两个事件，但是由于使用了event.stopImmediatePropagation()方法，所以就不会触发粉色盒子的其他事件了）。至于绿色不触发，是由于为粉色添加了阻止事件传播，所以不会向外层继续传播事件，也就是说绿色的是不会触发的。当你点击粉色的时候，首先会触发蓝色，然后再触发粉色（绑定了两个事件，就会打印两条数据）。至于绿色不触发，是由于为粉色添加了阻止事件传播，所以不会向外层继续传播事件，也就是说绿色的是不会触发的。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值