JavaScript事件流

朱雀 2021-05-03 05:48 474阅读 0赞

## 1、事件的传播分两种情况： ##

**一种是事件的冒泡，一种是事件的捕获。**

## 2、W3C规定的dom标准事件流将事件的传播分三个阶段： ##

第一个阶段是捕获阶段，第二个阶段是目标阶段，第三个阶段是冒泡阶段。

## 3、实例： ##

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <title>事件流</title>
        <style type="text/css">
            h1{ 
                size: 10px;
            }
            .div-s{ 
                width: 400px;
                height: 400px;
                background-color: black;
            }
            .div-f{ 
                width: 600px;
                height: 600px;
                background-color: blue;
                display: block;
            }
           
        </style>
        <script type="text/javascript">
            window.onload=function(){ 
                //冒泡事件
                /*document.getElementById("btn").οnclick=function(){ alert("按钮"); }; document.getElementById("div-f").οnclick=function(){ alert("divf"); }; document.getElementById("div-s").οnclick=function(){ alert("divs"); };*/
                //捕获事件
                /*document.getElementById("btn").addEventListener("click",function(){ alert("按钮"); },true); document.getElementById("div-f").addEventListener("click",function(){ alert("div-f"); },true); document.getElementById("div-s").addEventListener("click",function(){ alert("div-s"); },true);*/
                //当第三个参数为false时，就变成冒泡事件了
                document.getElementById("btn").addEventListener("click",function(e){ 
                         alert("按钮");
                         //如何阻止冒泡呢？
                         let event=window.event || e;//e是事件源
                         event.stopPropagation();
                },false);
                document.getElementById("div-f").addEventListener("click",function(){ 
                         alert("div-f");
                },false);
                document.getElementById("div-s").addEventListener("click",function(){ 
                         alert("div-s");
                },false);
            };
        </script>
    </head>
    <body>
        <h1>事件流（事件传播）</h1>
        <div class="div-f" id="div-f">
            <div  class="div-s" id="div-s">
                <button type="button" id="btn">按钮</button>
            </div>
        </div>
    </body>
    </html>