事件流:
描述的实在页面中接受事件的顺序
事件冒泡:
有具体的元素接收,然后逐级向上传播至最不具体的元素的节点(文档)。

<!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>
事件捕获:
最不具体的节点先接收事件,而最具体的节点应该是最后接收事件。