javaScript事件捕获和冒泡

最新推荐文章于 2024-04-04 00:42:02 发布

五月西瓜

最新推荐文章于 2024-04-04 00:42:02 发布

阅读量779

点赞数 1

分类专栏： javaScript 文章标签：冒泡捕获阻止 bubble

本文链接：https://blog.csdn.net/JQuery_QQ/article/details/51568779

版权

javaScript 专栏收录该内容

25 篇文章 0 订阅

订阅专栏

事件是先捕获，后冒泡。从最外层向内逐层捕获直到目标（target），再逐层向上冒泡直到<html>标签。所有事件处理程序都会忽略捕获阶段，而在事件冒泡阶段触发事件。使用addEventListener绑定事件并且第三个参数为true，可以让事件在捕获阶段触发，这是唯一让事件在捕获阶段触发的方法。element.addEventListener("click",function(){},true)

事件中的this和event.target:
event.target:它始终指向最基本的元素，如：如果是单击事件则event.target指向鼠标点击的的元素。
this：this指的是当前事件触发的元素，从中可获取到元素的信息

阻止事件冒泡：

element.onclick = function(event) {
    event = event || window.event; // cross-browser event
    if (event.stopPropagation) {
        // W3C standard variant
        event.stopPropagation();
    } else {
        // IE variant
        event.cancelBubble = true;
    }
	//event.stopPropagation?event.stopPropagation():(event.cancelBubble = true);
}

一个事件有多个处理程序的情况：
事件处理程序会独立执行，互不干扰。比如有两个单击事件在同一个链接上，阻止一个事件的冒泡行为不会影响另一个事件的冒泡行为。并且浏览器不会保证事件触发的顺序。

实际编码中事件捕获使用非常少。也有一些函数不会冒泡，由捕获触发的，如：onfocus/onblur.

五月西瓜

关注

1
点赞
踩
2

收藏

觉得还不错? 一键收藏
1
评论
javaScript事件捕获和冒泡

事件是先捕获，后冒泡。从最外层向内逐层捕获直到目标（target），再逐层向上冒泡直到标签。所有事件处理程序都会忽略捕获阶段，而在事件冒泡阶段触发事件。使用addEventListener绑定事件并且第三个参数为true，可以让事件在捕获阶段触发，这是唯一让事件在捕获阶段触发的方法。element.addEventListener("click",function(){},true)事件中
复制链接

扫一扫