js事件冒泡与事件捕获、阻止事件冒泡和浏览器默认行为

最新推荐文章于 2023-05-06 14:24:39 发布

正义同學

最新推荐文章于 2023-05-06 14:24:39 发布

阅读量1.8k

点赞数 3

分类专栏： JavaScript 文章标签：事件冒泡事件捕获事件流阻止事件冒泡阻止浏览器默认行为

本文链接：https://blog.csdn.net/weixin_45471827/article/details/99635430

版权

JavaScript 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

1、事件流：

事件流描述的是从页面中接收事件的顺序，“事件冒泡流”由IE提出，“事件捕获流”由 Netscape 提出；
事件流包括三个阶段：事件捕获阶段、处于目标阶段（即触发事件的元素）和事件冒泡阶段。
“DOM2 级事件”规范要求事件应该从 document 对象开始捕获阶段，但主流浏览器都是从 window 对象开始。
“DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标（因为目标阶段被视为为冒泡阶段的一部分），但主流浏览器都会涉及；

2、事件冒泡（event bubbling）：

由文档中触发事件的元素开始，逐级向上传播到window对象；

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div">事件冒泡</div>
</body>
<script>
    window.addEventListener("click",function(){
        console.log("window")
    },false);
    document.addEventListener("click",function(){
        console.log("document")
    },false);
    document.documentElement.addEventListener("click",function(){
        console.log("html")
    },false);
    document.body.addEventListener("click",function(){
        console.log("body")
    },false);
    document.getElementById("div").addEventListener("click",function(){
        console.log("div")
    },false);
</script>
</html>

事件触发循序为：div==>body==>html==>document==>window

3、事件捕获（event capturing）：

则与事件冒泡相反，从window对象逐级向下传播到触发事件的元素；（IE9以下老版本浏览器不支持事件捕获）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div id="div">事件捕获</div>
</body>
<script>
    window.addEventListener("click",function(){
        console.log("window")
    },true);
    document.addEventListener("click",function(){
        console.log("document")
    },true);
    document.documentElement.addEventListener("click",function(){
        console.log("html")
    },true);
    document.body.addEventListener("click",function(e){
        console.log("body")
    },true);
    document.getElementById("div").addEventListener("click",function(e){
        console.log("div")
    },true);
</script>
</html>

事件触发循序为：window==>document==>html==>body==>div

4、阻止事件冒泡或事件捕获：

event.stopPropagation();

5、阻止浏览器默认行为：

/*方法一*/
return false；
/*方法二*/
event.preventDefault()

阻止a标签默认跳转行为

<a href="javascript:"></a>
<a href="javascript:void(0)"></a>
<!--void操作符会忽略操作数“0”的值，返回undefined，目的让程序更具语义；-->

阻止选中文字

document.onselectstart=new Function(“return false”)

阻止拖动图片

document.ondragstart=new Function(“return false”);

正义同學

关注

3
点赞
踩
6

收藏

觉得还不错? 一键收藏
0
评论
js事件冒泡与事件捕获、阻止事件冒泡和浏览器默认行为

1、事件流：事件流描述的是从页面中接收事件的顺序，“事件冒泡流”由IE提出，“事件捕获流”由 Netscape 提出；事件流包括三个阶段：事件捕获阶段、处于目标阶段（即触发事件的元素）和事件冒泡阶段。“DOM2 级事件”规范要求事件应该从 document 对象开始捕获阶段，但主流浏览器都是从 window 对象开始。“DOM2 级事件”规范明确要求捕获阶段不会涉及事件目标（因为目标阶...
复制链接

扫一扫

专栏目录