事件流

事件流:

    描述的實在頁面中接受事件的順序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>
View Code

 

事件捕獲:

最不具體的節點先接收事件,而最具體的節點應該是最後接收事件。jquery

相關文章
相關標籤/搜索