事件流

時間 2019-11-18

標籤事件简体版

原文原文鏈接

事件流：

描述的實在頁面中接受事件的順序css

事件冒泡：

有具體的元素接收，而後逐級向上傳播至最不具體的元素的節點（文檔）。html

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title></title>
        <link rel="stylesheet" type="text/css" href="../../css/0009.css" />
        <script src="../../js/jquery-2.1.0.js"></script>
    </head>
    <body>
        出現事件的冒泡，阻止事件的冒泡
        <div id="div">
            <button id="btn">點擊</button>
            <a id="aid">超連接</a>
        </div>
        <script>
            document.getElementById("btn").addEventListener("click",showType);
            document.getElementById("div").addEventListener("click",showDiv);
            document.getElementById("aid").addEventListener("click",showA);
            function showType(e){
                alert(e.type);
                alert(e.target);
                e.stopPropagation();//阻止事件的冒泡
            }
            function showDiv(){
                alert("div");
            }
            
            function showA(){
                alert("123456")
            }
        </script>
    </body>
</html>