广告

扫码关注官方微信

扫码下载APP
返回顶部
首页 > 资讯 > 前端开发 > JavaScript >JavaScript中的事件冒泡与捕获怎么实现
  • 185

0
分享到

JavaScript中的事件冒泡与捕获怎么实现

2024-04-02 19:04:59 185人浏览 独家记忆
摘要

这篇文章主要讲解了“javascript中的事件冒泡与捕获怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中的事件冒泡与捕获怎么实

这篇文章主要讲解了“javascript中的事件冒泡与捕获怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中的事件冒泡与捕获怎么实现”吧！

JavaScript中的事件冒泡与捕获怎么实现

一、EventTarget 事件目标的查找方式（冒泡与捕获）

事件目标指的是绑定事件的元素，elemet.addEventListener(‘click’,function(){}) 这里的 elemet 就是事件目标。

冒泡与捕获：

  • 冒泡事件：

    • 事件默认是由下往上的冒泡执行方式。以点击事件为例，当我们点击子元素也能触发父元素及以上元素的点击事件。事件执行顺序由下至上，这就是冒泡事件。

  • 捕获事件：

    • 当然还有一种执行方式是由上往下的捕获方式。还是以点击事件为例，当一个子元素绑定了点击事件，我们点击子元素时，父元素及以上的元素绑定的点击事件也会执行。事件的执行顺序时由上至下，这就是捕获事件。

addEventListener(type,listener,useCapture) 简单分析：

  • type：事件类型

  • listener：事件监听处理函数

  • useCapture：设置事件查找方式

    • false，冒泡事件（默认值）

    • true， 捕获事件

参数useCapture解析：

重点！！一个事件目标的触发，整个过程分为两个阶段（捕获与冒泡）。 useCapture 这个值决定事件目标的触发在哪个阶段执行。

冒泡与捕获的顺序分析：

JavaScript中的事件冒泡与捕获怎么实现

  • 从图可以看出先事件捕获再事件冒泡。事件捕获就是从上至下（外部事件先触发），事件冒泡就是从下至上（内部事件先触发）。

  • 捕获的过程是从不具体的到具体的，冒泡是从具体的到不具体的。

  • 虽然是捕获优先，但是冒泡事件是传递的默认方式。意思就是事件默认都是在冒泡阶段触发。

  • 重点！！事件目标的查找分为“冒泡”与“捕获”两个阶段，事件目标触发的顺序取决于在哪个阶段。如果嵌套的元素中既有捕获又有冒泡的那么一定是捕获优先，捕获阶段的事件执行完毕再执行冒泡阶段的事件。

代码演示：

<body>
    <div id="div1">
        这是div1
        <div id="div2">
            这是div2
            <div id="div3">这是div3</div>
        </div>
    </div>
    <script>
        let div1 = document.getElementById('div1');
        let div2 = document.getElementById('div2');
        let div3 = document.getElementById('div3');
        div1.addEventListener('click',function(){
            console.log("这是div1的点击事件");
        },false);
        div2.addEventListener('click',function(){
            console.log("这是div2的点击事件");
        },false);
        div3.addEventListener('click',function(){
            console.log("这是div3的点击事件");
        },false);
    </script>
</body>

当我们点击div3，如下从控制台结果可以看出，这里的事件都是在冒泡阶段执行。

JavaScript中的事件冒泡与捕获怎么实现

还是点击div3，我们将div1.addEventListener第三个参数改为true，如下可以看出div1最先执行，说明捕获阶段优先于冒泡阶段。

JavaScript中的事件冒泡与捕获怎么实现

这里看完一定要敲一下，我并没有列举所有的情况，其余的情况留给你们去尝试再总结（能理解上面的就够了，真正编码不会很复杂）。

如上就是我对事件目标查找的两种机制冒泡与捕获理解。

二、事件代理机制（事件委托）

利用事件冒泡完成事件代理机制：

<ul>
    <li>列表1</li>
    <li>列表2</li>
</ul>

当我们要给如上列表中的li都绑定一个点击事件点击获取li中的内容，一般是利用for遍历元素绑定点击事件。

let lis = document.querySelectorAll('li');
for (let i = 0; i < lis.length; i++) {
	lis[i].addEventListener('click', function () {
 		console.log(this.innerhtml);
	});
}

假如我们有1w个 li 节点，使用如上方式就需要绑定1w个事件，这样操非常影响代码性能。所以我们可以利用冒泡机制来解决如上的问题，就是将事件绑定到父元素身上 ul 身上。看如下代码：

<body>
    <ul>
        <li>列表1</li>
        <li>列表2</li>
    </ul>
    <script>
        let ul = document.querySelector('ul');
        //我们可以通过事件对象（e）中的target属性可以访问到事件源（也就事件的触发元素）
        ul.addEventListener('click',function(e){
            console.log(e.target.innerHTML);
        },false);
    </script>
</body>

事件对象(e)：无论是addEventListener绑定事件还是直接“.事件名”，事件监听的处理函数中的第一个参数为 事件对象 。事件对象包含了这个事件的详细信息，比如这个对象中包含了：事件源，事件id，事件类型，事件绑定的元素，事件触发时点击的位置等等。其中 e.target 就能访问到事件源，就是触发本次事件的源头。

既然能给父元素绑定事件监听，又能拿到触发的源头。所以我们通过“e.target”+“冒泡机制”就可以减少事件的绑定，能提升不少的性能。

依次点击列表1与列表2：

JavaScript中的事件冒泡与捕获怎么实现

总结：通过上面代码我们知道了“事件对象”+“冒泡机制”可以实现事件委托。事件委托就是当事件触发时，通过事件冒泡(或事件捕获)把要做的事委托给父元素来处理。

三、e.target与e.currentTarget的区别：

  • e.target 指向的是触发事件监听的对象（事件源）。

  • e.currentTarget 指向添加监听事件的对象（绑定事件的dom元素）。

四、阻止冒泡与捕获

为什么要阻止冒泡或捕获？

点击当前元素时以冒泡的方式传递事件如果上级元素绑定了同样的事件，就会因为冒泡传递导致触发。同样捕获的过程中，也会触发与当前元素绑定的相同事件的上级。只是触发顺序不同。

事件代理一般使用的冒泡，当然阻止冒泡一般不会影响事件代理，因为顺序问题只会影响捕获事件，这也是为什么都使用冒泡实现事件代理机制。

阻止冒泡或捕获的方法

这里我不考虑兼容性问题，我相信不久将来兼容性可以得到解决。

阻止冒泡w3c推介的方法是event.stopPropagation()，顾名思义停止传播，他是事件对象（event）的方法，此方法是阻止目标元素的继续冒泡（或捕获）。

event.stopPropagation()阻止冒泡：

<body>
    <div id="div1">
        这是div1
        <div id="div2">
            这是div2
            <div id="div3">这是div3</div>
        </div>
    </div>
    <script>
        let div1 = document.getElementById('div1');
        let div2 = document.getElementById('div2');
        let div3 = document.getElementById('div3');
        div1.onclick = function (e) {
           alert('div1');
        }
        div2.onclick = function (e) {
           e.stopPropagation();
            alert('div2');
        }
        div3.onclick = function (e) {
           alert('div3');
        }
    </script>
</body>

上面代码默认都是冒泡事件，我们点击div3会依次弹出’div3’与’div2’，为什么没有弹出’div1’这是因为e.stopPropagation();阻止了目标元素的事件继续冒泡到上级。如果每个点击事件都加上了e.topPropagation就不会出现多弹窗的情况。

event.stopPropagation()阻止捕获：

<body>
    <div id="div1">
        这是div1
        <div id="div2">
            这是div2
            <div id="div3">这是div3</div>
        </div>
    </div>
    <script>
        let div1 = document.getElementById('div1');
        let div2 = document.getElementById('div2');
        let div3 = document.getElementById('div3');
        div1.addEventListener('click',function(e){
           	console.log('div1');
        },true);
        div2.addEventListener('click',function(e){
            console.log('div2');
            e.stopPropagation();
        },true);
        div3.addEventListener('click',function(e){
            console.log('div3');
        },true);
    </script>
</body>

当我们点击div2会依次弹出’div1’与’div2’，这也是因为在div2事件中我们设置了e.stopPropagation()，阻塞了目标元素的事件继续向下捕获。

event.target == event.currentTarget：

div.addEventListener('click',function(e){
	if(event.target == event.currentTarget){
        //需要执行的代码
    }
});

此方法不过多解释用的不多，如果你理解了上面的内容，这个方法也能理解。

五、补充:为什么要使用addEventListener()

从上面代码不难看出addEventListener()有如下的优点（以下是MDN的原话）：

addEventListener() 是 W3C DOM 规范中提供的注册事件监听器的方法。它的优点包括：

  • 它允许给一个事件注册多个监听器。 特别是在使用ajax库，JavaScript模块，或其他需要第三方库/插件的代码。

  • 它提供了一种更精细的手段控制 listener 的触发阶段。（即可以选择捕获或者冒泡）。

  • 它对任何 DOM 元素都是有效的，而不仅仅只对 HTML 元素有效。

六、取消默认事件

event.preventDefault()

默认事件指的是<a href="">，<input type="submit"> 标签这类有默认行为的标签，通过点击可以跳转或提交。我们给这类标签绑定一个点击事件，设置事件对象的preventDefault()方法就可以阻止默认事件的发生。

<body>
   <a href="https://www.baidu.com">点击跳转</a>
    <script>
        let a = document.querySelector('a');
        addEventListener('click',function(e){
            e.preventDefault();
        })
    </script>
</body>

那么我们如何才能知道一个标签是否有默认事件，打印事件对象的cancelable属性，通过事件执行就可以知道e.cancelable的结果，如果为false表示有默认事件，true则没有。

return false;

事件执行函数中设置return false取消默认事件，但此方法不常用。

感谢各位的阅读，以上就是“JavaScript中的事件冒泡与捕获怎么实现”的内容了，经过本文的学习后，相信大家对JavaScript中的事件冒泡与捕获怎么实现这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！

点击免费下载>>软考高级考试备考技巧/历年真题/备考精华资料

--结束END--

本文标题: JavaScript中的事件冒泡与捕获怎么实现

本文链接: https://www.lsjlt.com/news/98474.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑，方便收藏和打印～

下载Word文档
去做题
猜你喜欢
  • JavaScript中的事件冒泡与捕获怎么实现
    这篇文章主要讲解了“JavaScript中的事件冒泡与捕获怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“JavaScript中的事件冒泡与捕获怎么实...
    99+
    2022-10-19
  • JavaScript 事件捕获冒泡与捕获详情
    目录一、事件流1、概念2、DOM事件流二、事件委托1、事件委托的优点2、事件委托的使用三、禁止事件冒泡与捕获四、参考文献一、事件流 JavaScript中，事件流指的是DOM事件流。...
    99+
    2022-11-12
  • JavaScript中如何实现事件冒泡与时间捕获
    小编给大家分享一下JavaScript中如何实现事件冒泡与时间捕获，希望大家阅读完这篇文章之后都有所收获，下面让我们一起去探讨吧！一、事件冒泡与事件捕获当我们在Web页面单击某一个元素的时候，比如某个p元素...
    99+
    2022-10-19
  • 浅析js中事件冒泡与事件捕获
    目录01-事件冒泡1.1-事件冒泡介绍1.2-事件冒泡利用（事件委托）1.3-事件冒泡影响 与 阻止事件冒泡02-事件捕获1.1-事件捕获介绍1.2-事件三个阶段01-事件冒泡 1...
    99+
    2022-11-12
  • js事件冒泡与事件捕获的示例分析
    这篇文章给大家分享的是有关js事件冒泡与事件捕获的示例分析的内容。小编觉得挺实用的，因此分享给大家做个参考，一起跟随小编过来看看吧。（一）事件绑定1.普通事件绑定给html添加一个以on开头的特定的属性（如...
    99+
    2022-10-19
  • 如何进行JS中的事件冒泡与捕获
    这期内容当中小编将会给大家带来有关如何进行JS中的事件冒泡与捕获，文章内容丰富且以专业的角度为大家分析和叙述，阅读完这篇文章希望大家可以有所收获。刚接触 JS 的那个时候，啥也不懂，只想着如何利用 Goog...
    99+
    2022-10-19
  • 如何实现Javascript事件的捕获方式和冒泡方式
    这篇文章将为大家详细讲解有关如何实现Javascript事件的捕获方式和冒泡方式，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。一、事件处理模型事件冒泡、捕获：事件冒泡和事件捕获分别由微软和网景公司提出，这...
    99+
    2023-06-22
  • JavaScript中捕获与冒泡的示例分析
    小编给大家分享一下JavaScript中捕获与冒泡的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！JavaScript中...
    99+
    2022-10-19
  • JavaScript中怎么捕捉事件和阻止冒泡事件
    JavaScript中怎么捕捉事件和阻止冒泡事件，很多新手对此不是很清楚，为了帮助大家解决这个难题，下面小编将为大家详细讲解，有这方面需求的人可以来学习下，希望你能有所收获。一、要探究捕获和冒泡事件，首先要...
    99+
    2022-10-19
  • Javascript事件的捕获方式和冒泡方式详解
    目录一、事件处理模型1、事件冒泡（1）给三个div元素绑定事件（2）运行结果：2、事件捕获（1）给三个div元素绑定事件（2）运行结果：二、阻止事件冒泡（1）w3c标准 event....
    99+
    2022-11-12
  • JavaScript中怎么阻止事件冒泡
    JavaScript中怎么阻止事件冒泡，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。代码实例如下:] <!DOCTYPE ...
    99+
    2022-10-19
  • JavaScript事件的冒泡、委派、绑定和传播怎么实现
    本篇内容主要讲解“JavaScript事件的冒泡、委派、绑定和传播怎么实现”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“JavaScript事件的冒泡、委派、绑...
    99+
    2022-10-19
  • jquery事件冒泡是什么及怎么实现
    今天小编给大家分享一下jquery事件冒泡是什么及怎么实现的相关知识点，内容详细，逻辑清晰，相信大部分人都还太了解这方面的知识，所以分享这篇文章给大家参考一下，希望大家阅读完这篇文章后有所收获，下面我们一起来了解一下吧。冒泡事件就是，事件发...
    99+
    2023-07-04
  • JavaScript中事件与异常捕获的示例分析
    小编给大家分享一下JavaScript中事件与异常捕获的示例分析，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！事件处理【onCl...
    99+
    2022-10-19
  • 怎么在javascript中捕获窗口关闭事件
    本篇文章给大家分享的是有关怎么在javascript中捕获窗口关闭事件，小编觉得挺实用的，因此分享给大家学习，希望大家阅读完这篇文章后可以有所收获，话不多说，跟着小编一起来看看吧。JavaScript的作用是什么1、能够嵌入动态文本于HTM...
    99+
    2023-06-14
  • JavaScript中怎么实现冒泡排序和选择排序
    本篇文章为大家展示了JavaScript中怎么实现冒泡排序和选择排序，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。算法说明算法（Algorithm）是解决问题的一种...
    99+
    2022-10-19
  • javascript的事件流怎么实现
    这篇文章主要讲解了“javascript的事件流怎么实现”，文中的讲解内容简单清晰，易于学习与理解，下面请大家跟着小编的思路慢慢深入，一起来研究和学习“javascript的事件流怎么实现”吧！ ...
    99+
    2022-10-19
  • Javascript 中怎么实现事件流和事件委托
    今天就跟大家聊聊有关Javascript 中怎么实现事件流和事件委托，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。javascript 事件流和事件...
    99+
    2022-10-19
  • JavaScript中怎么实现事件委托
    JavaScript中怎么实现事件委托，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。事件是对象发送的消息，以发信号通知操作的发生。委托是可...
    99+
    2022-10-19
  • JavaScript中怎么实现事件循环
    今天就跟大家聊聊有关JavaScript中怎么实现事件循环，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。1.Main.js 执行2.调用second...
    99+
    2022-10-19
软考高级职称资格查询
软考职称历年真题下载
软考职称资料下载
热门wiki
近期文章
推荐阅读
热门问答
热门标签
编程网，编程工程师的家园，是目前国内优秀的开源技术社区之一，形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容，为IT开发者提供了一个发现、使用、并交流开源技术的平台。

  • 官方手机版

  • 微信公众号

  • 商务合作