javascript 事件冒泡和事件捕获

最新推荐文章于 2025-09-26 23:30:00 发布

原创最新推荐文章于 2025-09-26 23:30:00 发布 · 414 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#event javascript #事件捕获事件冒泡

javascript 专栏收录该内容

2 篇文章

订阅专栏

本文详细解析了JavaScript和HTML之间的交互通过事件实现的过程，包括事件冒泡、事件捕获及DOM事件流的概念，并通过代码示例演示了事件执行原理。

事件定义：javascript和html之间的交互是通过事件实现的，事件就是浏览器窗口和文档发生的一些特定的交互的瞬间

一事件流

事件冒泡 : IE 的事件流。事件开始是由具体的元素接受，然后逐级向上传播

事件捕获：Netscape 提出的为事件捕获。事件开始由不太具体的节点接收，而最具体的节点应该最后接收到事件。用意在于事件到达预定目标之前捕获它

DOM事件流：包含三个阶段事件捕获、处于目标阶段、事件冒泡。注：目标对象事件会在冒泡阶段触发。但是 ie9，Safari，chrome 会在捕获阶段触发目标对象事件。所以他们有两个机会在目标对象上面操作事件

如下面demo可以演示事件的执行原理

<!doctype html>
<html>
<head>
    <meta charset="utf-8"/>
    <style>
        body{
            height: 500px;
            width: 500px;
        }
        #div1{
            height: 200px;
            width: 300px;
            background-color: red;
        }
        #div2{
            background-color: #008000;
            height: 50px;
            width: 50px;
        }
    </style>
</head>
<body>
    <div id="div1">
        click div1
        <div id="div2">click div2</div>
    </div>
<script>
    var div1=document.getElementById("div1"),div2=document.getElementById("div2");
    div1.addEventListener("click",some1,false);
    div2.addEventListener("click",some2,false);
    document.body.addEventListener("click",some,true);
    function some1(){
        alert("div1");
    }
    function some2(e){
        alert("div2");
        //e.stopPropagation();  //阻止冒泡
    }
    function some(e){
        //return false;   //阻止捕获
        alert("body");
        
    }
</script>
</body>
</html>

addEventListener 最后一个参数为true时，表示事件触发在捕获阶段，如果为false目标事件触发在冒泡阶段
点击div2看到结果为 body->div2->div1。这是目标元素在冒泡之前检查其父级元素是否有捕获触发事件，检查到body有捕获阶段的触发事件，就先执行body.然后冒泡执行目标元素和div1
打开some2中的注释，点击div2看到结果为 body->div2. 因为阻止了向上冒泡，所以div1的click事件未触发
打开some中注释，看到执行结果为 div2。阻止了目标元素的冒泡和其父级元素的捕获执行。
有兴趣的同学可以变换addEventListener最后一个参数，执行来看event的冒泡和捕获的执行原理