Document

事件流：

描述的实在页面中接受事件的顺序

事件冒泡：

有具体的元素接收，然后逐级向上传播至最不具体的元素的节点（文档）。

<!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

事件捕获：

最不具体的节点先接收事件，而最具体的节点应该是最后接收事件。