事件冒泡

添加三个套在一起的div元素，在最里面放一个button，感受事件触发时从里到外“冒泡”的过程。
给每个div都加一个事件：点击时就alert
test.html

<!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><link rel="stylesheet" href="./test1.css" /></head><body><div class="div1"><div class="div2"><div class="div3"><button>click me</button></div></div></div></body><script>let div1 = document.querySelector('.div1')let div2 = document.querySelector('.div2')let div3 = document.querySelector('.div3')div1.addEventListener('click', () => {alert('div1 now!')})div2.addEventListener('click', () => {alert('div2 now!')})div3.addEventListener('click', () => {alert('div3 now!')})</script>
</html>

test1.css

.div1 {width: 500px;height: 500px;background-color: aquamarine;
}.div2 {width: 400px;height: 400px;background-color: bisque;
}.div3 {width: 300px;height: 300px;background-color: rgb(234, 178, 248);
}

运行结果：

点击后：

以上三个alert依次出现，可见这是一个从内到外的“冒泡”的过程。

阻止事件冒泡

阻止事件冒泡有两种方式

在要要触发的点击事件函数中写window.event.cancelBubble = true
这种方法 IE和谷歌支持，而火狐不支持

    let div1 = document.querySelector('.div1')let div2 = document.querySelector('.div2')let div3 = document.querySelector('.div3')div1.addEventListener('click', () => {alert('div1 now!')})div2.addEventListener('click', () => {alert('div2 now!')window.event.cancelBubble = true})div3.addEventListener('click', () => {alert('div3 now!')})

运行结果：

然后就没了，冒泡终止了。

在事件处理函数中传入一个对象参数，在函数中添加对象参数.stopPropagation;

div2.addEventListener('click', (e) => {alert('div2 now!')e.stopPropagation()})

运行结果和上面一样就不展示了。

事件的三个阶段

事件捕获阶段–处于目标阶段–事件冒泡阶段
在addEventListener()方法中，第三个参数可以设置在事件的哪个阶段运行这段代码，false设置对象为冒泡阶段，true设置对象为为捕获阶段
对于参数e，.eventPhase 属性可以判断事件处于哪个阶段（这是一个number类型的值）
值为 1 则是事件捕获阶段
值为 2 则是目标阶段
值为 3 则是事件冒泡阶段
示例代码

let div1 = document.querySelector('.div1')let div2 = document.querySelector('.div2')let div3 = document.querySelector('.div3')div1.addEventListener('click',(e) => {console.log('div1 now!')console.log('1', e.eventPhase)},false,)div2.addEventListener('click',(e) => {console.log('div2 now!')// window.event.cancelBubble = true// e.stopPropagation()console.log('2', e.eventPhase)},true,)div3.addEventListener('click', (e) => {console.log('div3 now!')console.log('3', e.eventPhase)})

运行结果：

在div2的addEventListener传入的参数里，函数后面加了一个true，表示这段代码在事件捕获期间运行，所以展示出2先被运行的结果。
同时，e.eventPhase在此时的值也是1

事件处于目标阶段

在刚刚的代码里，最内层div3里还有一个button，这是说明当一个元素内部被指定为目标时，这个元素也要经历捕获和冒泡的阶段（在DOM树上是它的父节点么！）
现在我们删掉这个button看一看。

<!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><link rel="stylesheet" href="./test1.css" /></head><body><div class="div1"><div class="div2"><div class="div3">click me</div></div></div></body><script>let div1 = document.querySelector('.div1')let div2 = document.querySelector('.div2')let div3 = document.querySelector('.div3')div1.addEventListener('click',(e) => {console.log('div1 now!')console.log('1', e.eventPhase)},false,)div2.addEventListener('click',(e) => {console.log('div2 now!')// window.event.cancelBubble = true// e.stopPropagation()console.log('2', e.eventPhase)},true,)div3.addEventListener('click', (e) => {console.log('div3 now!')console.log('3', e.eventPhase)})</script>
</html>

运行结果：

执行顺序是：
捕获—div2的事件触发
目标—div3的事件触发
冒泡—div1的事件触发
这就说明：当这个事件处于目标时，它是不参与捕获和冒泡的！（只有它的祖宗们参与捕获和冒泡）

[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）相关推荐

JavaScript事件——event对象事件冒泡阻止默认行为事件捕获
event对象用来获取事物的详细信息:鼠标位置.键盘按键 e.clientX 鼠标距离元素所在的X轴(左边)位置 e.clientY 鼠标距离元素所在的Y轴(顶部)位置 (左上角为0,0点) 获取e ...
Jquery 阻止冒泡事件（阻止父元素事件触发）
如下:有一个div,div中有一个span: <div class="c2"><span class="c1">Hello world& ...
JS阻止冒泡和取消默认事件(默认行为)
阻止事件冒泡 function stopPropagat(e) {if (e && e.stopPropagation) {e.stopPropagation();//标准浏览器} e ...
js添加事件、移除事件、阻止冒泡、阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 转载...
js添加事件.移除事件.阻止冒泡.阻止浏览器默认行为等写法(兼容IE/FF/CHROME) 网上有关这方面的代码比较多而乱,这里整理一下并加以改进. 添加事件 01 var addEvent = ...
js阻止子元素事件_阻止 JS 的冒泡事件
用了一段时间google inbox,赶脚mail task的样式很酷炫,于是也模仿着做了一个task管理系统. Google task有个behavior是点击页面别处,当前展开的mail就会收起. ...
JS阻止冒泡和元素默认事件
JS阻止冒泡和元素默认事件文章目录 JS阻止冒泡和元素默认事件 1.JS阻止冒泡 :stopPropagation() 2.阻止元素默认事件行为 preventDefault() onclick + ...
js阻止子元素事件_JS阻止冒泡和取消默认事件(默认行为)-前端开发博客
js冒泡和捕获是事件的两种行为,使用event.stopPropagation()起到阻止捕获和冒泡阶段中当前事件的进一步传播.使用event.preventDefault()可以取消默认事件.对于冒 ...
js 停止事件冒泡阻止浏览器的默认行为
在前端开发工作中,由于浏览器兼容性等问题,我们会经常用到"停止事件冒泡"和"阻止浏览器默认行为". 浏览器默认行为: 在form中按回车键就会提交表单:单击鼠标 ...
js第8章事件案例：获取触发事件的元素，阻止事件冒泡和默认行为的实现、缓动的小球、图片放大特效、按Enter键切换
目录 1.获取触发事件的元素,阻止事件冒泡和默认行为的实现. (1)获取触发事件的元素 (2)阻止事件冒泡 (3)阻止事件默认行为 2.缓动的小球,实现的原理是通过定时器连续地修改当前DOM元素的某个 ...
JS 事件高级（包括DOM事件流，阻止事件冒泡，阻止事件默认行为，，，以及对我来说，很好用的事件代理）
事件对象概念事件处理函数:事件发生时调用的函数事件对象:window.event,内置的对象,事件发生的时候会将所有和事件相关的信息都存储在事件对象中,鼠标位置,事件类型,事件目标... //事件 ...

[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）

事件冒泡

阻止事件冒泡

事件的三个阶段

事件处于目标阶段

[JS] 事件冒泡，阻止事件冒泡，事件的三个阶段（捕获，目标，冒泡）相关推荐

最新文章

热门文章