JavaScript中事件冒泡机制示例详析

2024-07-28 18:06:07

什么是冒泡？

DOM事件流（event flow ）存在三个阶段：事件捕获阶段、处于目标阶段、事件冒泡阶段。

事件捕获（event capturing）：通俗的理解就是，当鼠标点击或者触发dom事件时，浏览器会从根节点开始由外到内进行事件传播，即点击了子元素，如果父元素通过事件捕获方式注册了对应的事件的话，会先触发父元素绑定的事件。

事件冒泡（dubbed bubbling）：与事件捕获恰恰相反，事件冒泡顺序是由内到外进行事件传播，直到根节点。

dom标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。不同的浏览器对此有着不同的实现，IE10及以下不支持捕获型事件，所以就少了一个事件捕获阶段，IE11、Chrome 、Firefox、Safari等浏览器则同时存在。

addEventListener()方法

这个方法设定一个事件监听器，当某一事件发生通过设定的参数执行操作。语法是：

addEventListener(event, function, useCapture)

参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。

参数 function 也是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。

参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。

移除事件监听

如果要移除 addEventListener() 添加的事件监听，就要使用removeEventListener()，语法是：

removeEventListener(event, function)

参数与addEventListener()一致。

兼容性

IE 8及更早的版本，和Opera 7.0及更早的版本，不支持 addEventListener() 和 removeEventListener() 方法，他们使用的是一下方法代替：

添加事件：

attachEvent(event, function)

移除事件：

**detachEvent(event, function) **

可以用以下方法解决兼容性问题：

if (div1.addEventListener) {
         div1.addEventListener('click', function () {
             console.log("支持")
         });
} else if (div1.attachEvent) {
         div1.attachEvent('onclick', function () {
             console.log("不支持")
         });
}

冒泡和捕获的具体区别

HTML

    <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--捕获阶段")
        },true);
        div2.addEventListener('click',function(){
            console.log("div2--捕获阶段")
        },true);
        div1.addEventListener('click',function(){
            console.log("div1--冒泡阶段")
        });
        div2.addEventListener('click',function(){
            console.log("div2--冒泡阶段")
        });
</script>

输出结果（点击div2的时候执行的结果）

解决办法

function stopBubble(e) {
         if (e && e.stopPropagation) {
                e.stopPropagation(); //因此它支持W3C的stopPropagation()方法
         } else {
             window.event.cancelBubble = true; //否则，我们需要使用IE的方式来取消事件冒泡
         }
}

总结

到此这篇关于JavaScript中事件冒泡机制的文章就介绍到这了,更多相关JavaScript事件冒泡内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！

JavaScript WebAPI、DOM、事件和操作元素实例详解

目录 WebAPI DOM DOM树 DOM获取元素方式 document对象属性事件事件的使用步骤事件的类型操作元素操作元素内容操作元素属性操作元素样式排他思想 H5自定义属性总结 WebAPI API:应用程序编程接口,是一些预先定义的函数,由某个软件开放给开发人员使用的,帮助开发者实现某种功能,开发人员无须访问源码.无须理解其内部工作机制细节,只需知道如何使用即可简单理解: API 是给程序员提供的一种工具,以便能更轻松的实现想要完成的功能 WebAPI:主要针对浏览器
Vue.js前端框架之事件处理小结

1. v-on 事件监听监听DOM事件使用 v-on 指令.该指令通常在模板中直接使用,在触发事件时会执行一些 JavaScript 代码. v-on 指令的基本用法 (1)在 HTML 中使用 v-on 指令,后面可以是所有的原生事件名称.基本用法如下: <button v-on:click="show">显示</button> 将 click 单击事件绑定到 show 方法中,单击"显示"按钮时,执行 show() 方法,show()
浅谈JS和Nodejs中的事件驱动

事件驱动和发布-订阅事件驱动架构是建立在软件开发中一种通用模式上的,这种模式被称为发布-订阅或观察者模式. 在事件驱动架构中,至少有两个参与者:主题(subject)和观察者(observer). 主题就像调频收音机一样,向有兴趣收听该主题所说内容的观察者进行广播. 观察者可能只有一个,也可能有一百个,这都没有关系,只要主题有一些要广播的消息就够了. 请记住,事件驱动.发布-订阅和观察者模式在实践中不是一回事,但在理想情况下,它们使用相同的方法:一个实体广播一条消息,其他实体侦听该消息. 发布
JavaScript之事件循环案例讲解

js中的事件循环因为JavaScript是单线程的,同一事件只能执行一种方法,所以会将程序中的方法加入到执行栈中按照后进先出的顺序依次执行,当遇见异步任务时不会被阻塞,而是将任务放入事件队列中,继续执行执行栈中的同步代码,等当前执行栈中的所有任务都执行完毕则查找事件队列中的任务,并把任务的回调函数放入执行栈中,执行其中的同步代码,如此反复形成的循环被称为事件循环. node.js node.js特点事件驱动从上向下执行代码,当遇到需要回调的地方就加入到事件队列中,主线程运行完就去执行事件队
关于js的事件循环机制剖析

前言众所周知, JavaScript是单线程这一核心,可是浏览器又能很好的处理异步请求,那么到底是为什么呢?其中的原理与事件循环机制大有关系. 在探索事件循环之前,我们得先了解浏览器执行线程~~ 浏览器的渲染进程是多线程的,浏览器每一个tab标签都代表一个独立的进程,其中浏览器内核属于浏览器多进程中的一种,主要负责页面渲染,脚本执行,事件处理等.其包含的线程有以下几种 GUI 渲染线程:负责渲染页面,解析 HTML,CSS 构成 DOM 树: JS 引擎线程:解释执行代码.用户输入和网络请求:
利用javaScript处理常用事件详解

JS事件指再浏览器窗体或者HTML元素上发生的,乐意触发JS代码块运行的行为,下面,我们一起来看看相关事件. 1.窗体事件例如 onload事件:当页面完全加载完成之后(包括图像,js文件,css文件等)该事件就会被触发. <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>花狗在线</title> <script> window.o
如何利用原生JS实现触摸滑动监听事件

前言今天写一个小Demo,有个地方涉及到了左滑右滑的逻辑,本来想着用插件来着,但是想到自己好久没用原生JS写滑动的监听了,所以试着用原生JS来实现了一下,毕竟温故而知新嘛,同时做个记录.先把实现的效果贴出来: 构思想要写出丝滑的触摸滑动事件的监听,要考虑以下3个方面的逻辑: 距离: 滑动距离要大于40 时间: 滑动时间小于在0.5秒,即500毫秒内完成手指按下,拖动,离开(避免只是手指在屏幕就触发) 滑动方向: 左右滑动的条件是:X轴移动的距离大于Y轴移动的距离,为正则向左,为负则向右上下
详解JS浏览器事件模型

什么是事件我想你很可能听说过事件驱动, 但是事件驱动到底是什么?为什么说浏览器是事件驱动的呢? 事件驱动通俗地来说就是什么都抽象为事件. 一次点击是一个事件键盘按下是一个事件一个网络请求成功是一个事件页面加载是一个事件页面报错是一个事件浏览器依靠事件来驱动APP运行下去,如果没有了事件驱动,那么APP会直接从头到尾运行完,然后结束,事件驱动是浏览器的基石. 一个简单的例子其实现实中的红绿灯就是一种事件,它告诉我们现在是红灯状态,绿灯状态,还是黄灯状态. 我们需要根据这个事件自己去完
JavaScript中事件冒泡机制示例详析

什么是冒泡? DOM事件流(event flow )存在三个阶段:事件捕获阶段. 处于目标阶段. 事件冒泡阶段. 事件捕获(event capturing):通俗的理解就是,当鼠标点击或者触发dom事件时,浏览器会从根节点开始由外到内进行事件传播,即点击了子元素,如果父元素通过事件捕获方式注册了对应的事件的话,会先触发父元素绑定的事件. 事件冒泡(dubbed bubbling):与事件捕获恰恰相反,事件冒泡顺序是由内到外进行事件传播,直到根节点. dom标准事件流的触发的先后顺序为:先捕
JavaScript中事件委托的示例详解

目录事件流事件委托结尾大家好,我是前端西瓜哥.今天我们来认识一下事件委托. 所谓事件委托,就是将原本应该在当前元素绑定的事件,放到它的祖先元素上,让祖先元素来委托处理. 事件流事件流指从页面中接收事件的顺序,也可理解为事件在页面中传播的顺序. 事件流由两阶段组成: 捕获事件冒泡事件我们通常用 addEventListener 给元素添加事件: document.querySelector('#card')addEventListener( 'click', function (ev
JavaScript中引用vs复制示例详析

前言好像一般很少人讲到js中的引用和复制,不过弄清楚这个概念可以帮助理解很多东西先讲一下很基础的东西,看看js中几种数据类型分别传的什么引用:对象.数组.函数复制:数字.布尔字符串单独说明,因为它的特殊性,无法确定是传递引用还是复制数值(因为字符串的值是没法改变的,所以纠结这个问题也是没意义的)但是用于比较的时候显然是属于传值比较下面来一起看看详细的介绍吧首先我们看下面这个例子: let age = 18; let age2 = age; console.log(age, age2
JavaScript中变量提升机制示例详解

变量提升 JavaScript的变量提升有两种,用var声明的变量以及用function声明的变量. 用var声明的变量我们先来看下面这段代码,a的值是多少代码1 console.log(a); var a; 按照以往编程语言的思路来看,代码自上而下运行,按这种思路,会报错,因为执行到第2行时,变量a还没有定义,所以会报错a is not defined 然而事实上答案是undefined 好,抱着疑惑,我们看下面的代码 var a; console.log(a); 我们发现,这两段代码是一
javascript 中事件冒泡和事件捕获机制的详解

javascript 中事件冒泡和事件捕获机制的详解二者作用:描述事件触发时序问题事件捕获:从document到触发事件的那个节点,即自上而下的去触发事件---由外到内事件冒泡:自下而上的去触发事件---由内到外绑定事件方法的第三个参数,就是控制事件触发顺序是否为事件捕获 true,事件捕获:false,事件冒泡一般默认false,即事件冒泡 Jquery的e.stopPropagation会阻止冒泡,意思就是到DOM为止,祖先级的事件就不要触发了下面是我尝试的例子: <!DOCTY
JavaScript 关于事件循环机制的刨析

目录前言: 一.事件循环和任务队列产生的原因: 二.事件循环机制: 三.任务队列: 3.1 任务队列的类型: 3.2 两者区别: 3.3 更细致的事件循环过程四.强大的异步专家 process.nextTick() 4.1 process.nextTick()在何时调用? 前言: 这次主要整理一下自己对 Js事件循环机制,同步,异步任务,宏任务,微任务的理解,大概率暂时还有些偏差或者错误.如果有,十分欢迎各位纠正我的错误! 一.事件循环和任务队列产生的原因: 首先,JS是单线程,这样设计也是
Java中的反射机制示例详解

目录反射什么是Class类获取Class实例的三种方式通过反射创建类对象通过反射获取类属性.方法.构造器更改访问权限和实例赋值运用场景反射反射就是把Java类中的各个成分映射成一个个的Java对象.即在运行状态中,对于任意一个类,都能够知道这个类的所以属性和方法:对于任意一个对象,都能调用它的任意一个方法和属性.这种动态获取信息及动态调用对象方法的功能叫Java的反射机制每一个Java程序执行必须通过编译.加载.链接和初始化四个阶段 1.编译:将.java.文件编译成字节码.
React中阻止事件冒泡的问题详析

前言最近在研究react.redux等,网上找了很久都没有完整的答案,索性自己整理下,这篇文章就来给大家介绍了关于React阻止事件冒泡的相关内容,下面话不多说了,来一起看看详细的介绍吧在正式开始前,先来看看 JS 中事件的触发与事件处理器的执行. JS 中事件的监听与处理事件捕获与冒泡 DOM 事件会先后经历捕获与冒泡两个阶段.捕获即事件沿着 DOM 树由上往下传递,到达触发事件的元素后,开始由下往上冒泡. IE9 及之前的版本只支持冒泡 | A --------------
JavaScript事件冒泡机制原理实例解析

这篇文章主要介绍了JavaScript事件冒泡机制原理实例解析,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友可以参考下 DOM事件流(event flow )存在三个阶段:事件捕获阶段.处于目标阶段.事件冒泡阶段,事件冒泡顺序是由内到外进行事件传播,事件冒泡是由IE开发团队提出来的,即事件开始时由最具体的元素(文档中嵌套层次最深的那个节点)接收,然后逐级向上传播. 听了简介介绍之后,您可能不理解,所以举个例子: <html> <head>
深入理解JavaScript的事件执行机制

目录前言浏览器 JS 异步执行的原理浏览器中的事件循环执行栈与任务队列宏任务和微任务 Async/await的运行顺序特点示例个人分析前言熟悉事件循环,了解浏览器运行机制将对我们理解 JavaScript 的执行过程和排查运行问题有很大帮助.以下是总结的一些浏览器事件循环的一些原理和示例. 浏览器 JS 异步执行的原理 JS 是单线程的,也就是同一个时刻只能做一件事情,那么,为什么浏览器可以同时执行异步任务呢? 因为浏览器是多线程的,当 JS 需要执行异步任务时,浏览器会另外

JavaScript中事件冒泡机制示例详析

什么是冒泡？

addEventListener()方法

总结

相关推荐

随机推荐