最容易理解的 js事件冒泡原理

前些时间有位大佬问到“js冒泡原理”，平时也只是用冒泡处理各种特效和功能，这里给大家详细介绍下js冒泡原理

事件冒泡 字如其名就是会逐层向上的触发，与之相对的是 事件捕获

首先我们要知道什么是 DOM

DOM可以理解为是一个树形结构，在DOM模型中，HTML元素是有层次的。当一个HTML元素上产生一个事件时，该事件会在DOM树中元素节点与根节点之间按特定的顺序传播，路径所经过的节点都会收到该事件，这整个传播过程就是DOM事件流。

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

1，事件捕获：当鼠标点击或者触发DOM元素时，浏览器会从根节点由外而内的进行事件传播

2，事件冒泡：与事件捕获相反，事件冒泡是由内到外进行事件传播，直到根节点。

DOM标准事件流的触发的先后顺序为：先捕获再冒泡，即当触发dom事件时，会先进行事件捕获，捕获到事件源之后通过事件传播进行事件冒泡。

常用的冒泡事件的API :

1，addEventListener(event, function, useCapture) 设定一个事件监听器，当某一事件发生通过设定的参数执行操作

参数 event 是必须的，表示监听的事件，例如 click, touchstart 等，就是之前不加前缀 on 的事件。
参数 function 是必须的，表示事件触发后调用的函数，可以是外部定义函数，也可以是匿名函数。
参数 useCapture 是选填的，填true或者false，用于描述事件是冒泡还是捕获，true表示捕获，默认的false表示冒泡。

2，removeEventListener(event, function, useCapture) 移除 addEventListener() 添加的事件监听

具体参数和 addEventListener(event, function, useCapture) 相同

3.stopPropagation() 阻止事件的冒泡

该函数只阻止事件向祖辈元素的传播，不会阻止该元素自身绑定的其他事件处理函数的函数。

4.preventDefault() 取消事件的默认动作

事件委托：

e.target表示在事件冒泡中触发事件的源元素
event.target.nodeName 　　-- 获取事件触发元素标签name（li,p…）
event.target.id　　　　　　-- 获取事件触发元素id
event.target.className　　-- 获取事件触发元素classname
event.target.innerHTML　　-- 获取事件触发元素的内容（li）

最容易理解的 js事件冒泡原理相关推荐

JS 事件冒泡和事件捕获
原文:https://www.cnblogs.com/qq9694526/p/5653728.html JS 事件冒泡和事件捕获本文中关于事件冒泡和事件捕获的描述和例子都是OK的,错就错在后面用jq ...
js事件冒泡和事件委托
原文:js事件冒泡和事件委托 js事件冒泡 js所谓的事件冒泡就是子级元素的某个事件被触发,它的上级元素的该事件也被递归执行 html: <ul class="clearfix&quo ...
JavaScript(js)事件冒泡、事件捕获、事件委托详解
JavaScript(js)事件冒泡.事件捕获.事件委托详解 1.什么是事件 JavaScript和HTML之间的交互是通过事件实现的.事件,就是文档或浏览器窗口发生的一些特定的交互瞬间.可以使用监听 ...
js事件冒泡、阻止事件冒泡以及阻止默认行为
大家好,我是IT修真院武汉分院web第17期的学员吴三水,一枚正直纯洁善良的web程序员. 今天给大家分享一下,修真院官网js(职业)任务四,深度思考中的知识点--js事件冒泡.阻止事件冒泡以及阻止默 ...
什么是js事件冒泡？
什么是js事件冒泡? 在一个对象上触发某类事件(比如单击onclick事件),如果此对象定义了此事件的处理程序,那么此事件就会调用这个处理程序,如果没有定义此事件处理程序或事件返回true,那么这个事 ...
JS——事件冒泡机制
1. 事件在浏览器客户端应用平台,基本生都是以事件驱动的,即某个事件发生,然后做出相应的动作. 浏览器的事件表示的是某些事情发生的信号.事件的阐述不是本文的重点,尚未了解的朋友,可 ...
JS事件冒泡与事件捕获
简单理解: 事件冒泡:页面上有这么一个节点树,div>ul>li>a;比如给最里面的a加一个click点击事件,那么这个事件就会一层一层的往外执行,执行顺序a>li>ul ...
js事件冒泡与捕捉解析
js的事件的冒泡与捕捉,简单来说就像个V型,从最高层body开始捕捉事件,然后一层一层往下开始捕捉,底层捕捉到事件后进行处理,然后再一层层冒泡传给父级,父级再传到它的父级,如果没有阻止冒泡,事件会一直 ...
JS 事件冒泡、捕获。学习记录
作为一个转行刚到公司的新人,任务不多,这一周任务全部消灭,闲暇的一天也别闲着,悄悄的看起了书.今天写一下JS的事件冒泡.捕获. 也是今天看的内容有点多了,有些消化不了,就随手记录一下.纯属自我理解,如 ...

最容易理解的 js事件冒泡原理

最容易理解的 js事件冒泡原理相关推荐

最新文章

热门文章