冒泡事件详解

最新推荐文章于 2024-05-17 13:52:13 发布

满集

最新推荐文章于 2024-05-17 13:52:13 发布

阅读量194

点赞数

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_73303494/article/details/131843826

版权

事件冒泡

答:IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。事件沿 DOM 树向上传播，在每一级节点上都会发生，直至传播到 document 对象。

所有现代浏览器都支持事件冒泡，但在具体实现上还是有一些差别。IE5.5 及更早版本中的事件冒泡会跳过<html>元素（从<body>直接跳到 document）。IE9、Firefox、Chrome 和 Safari 则将事件一直冒泡到 window 对象。

例如：

html代码：

<div id="box">
    <button id="btn">按钮</button>
</div>

js代码：

var btn = document.getElementById('btn');
var box = document.getElementById('box');
var body = document.body;

box.addEventListener('click', function(event) {
    console.log('div click');
});
body.addEventListener('click', function() {
    console.log('body click');
});
btn.addEventListener('click', function(event) {
     //冒泡机制,点击时，依次触发btn，box，body，html，document
    console.log('btn click');        
    //如果阻止冒泡，那么就不会触发box，body，html，document      
    // event.stopPropagation();       
        
});

终止事件冒泡

方法一：在相应的函数中加上event.stopPropagation()

这是阻止事件的冒泡方法，不让事件向documen上蔓延。

方法二：判断event.target 和 event.currentTarget是否相等

event.target：指真正触发事件的元素

event.currentTarget：指绑定了事件监听的元素（触发事件元素的父级元素）

这时判断两者相等，则执行相应的处理函数；当事件冒泡到上一级时，event.currentTarget变成了上一级元素，这时候判断二者不相等，则就不作响应处理逻辑。

event.target可以准确地获取事件源(指的是真正触发事件的那个元素)，并且在使用的过程中可以比较判断

event.target属性：

event.target.nodeName 　　 //获取事件触发元素标签name

event.target.id　　　　　　　//获取事件触发元素id

event.target.className　　 //获取事件触发元素classname

event.target.innerHTML　　 //获取事件触发元素的内容

满集

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
1
评论
冒泡事件详解

答:IE 的事件流叫做事件冒泡（event bubbling），即事件开始时由最具体的元素（文档中嵌套层次最深的那个节点）接收，然后逐级向上传播到较为不具体的节点（文档）。当事件冒泡到上一级时，event.currentTarget变成了上一级元素，这时候判断二者不相等，则就不作响应处理逻辑。event.target可以准确地获取事件源(指的是真正触发事件的那个元素)，并且在使用的过程中可以比较判断。event.currentTarget：指绑定了事件监听的元素（触发事件元素的父级元素）
复制链接

扫一扫