事件
事件是文檔或者瀏覽器窗口中發生的，特定的交互瞬間。
事件是用戶或瀏覽器自身執行的某種動作，如click,load和mouseover都是事件的名字。
事件是javaScript和DOM之間交互的橋樑。
你若觸發，我便執行——事件發生，調用它的處理函數執行相應的JavaScript代碼給出響應。
典型的例子有：頁面加載完畢觸發load事件；用戶單擊元素，觸發click事件。
事件流
事件流描述的是從頁面中接收事件的順序。
事件傳播的三階段
捕獲階段: 事件對象從window到目標父節點傳播的階段。
目標階段: 事件對象到達目標。如果事件類型指定不冒泡，則事件對象將在此階段完成後停止。
冒泡階段: 事件流對象從目標父節點到達window傳播的階段。
粗略瞭解到事件流的部分概念，用個小栗子測試一下喲
<head>
<meta charset="UTF-8">
<title></title>
<style type="text/css">
#test {
width: 200px;
height: 200px;
background: pink;
}
#inner {
width: 100px;
height: 100px;
background: deeppink;
}
</style>
</head>
<body>
<div id="test">
<div id="inner">
</div>
</div>
</body>
<script type="text/javascript">
var test = document.querySelector("#test");
var inner = document.querySelector("#inner");
//dom0 默認在冒泡階段調用回調函數
//dom2綁定事件的函數的第三個參數可以指定事件回調在哪一個階段被執行
//false：冒泡
//true：捕獲
test.addEventListener("click", function () {
alert(1)
}, false)
test.addEventListener("click", function () {
alert(2)
}, true)
test.addEventListener("click", function () {
alert(3)
}, false)
test.addEventListener("click", function () {
alert(4)
}, true)
inner.addEventListener("click", function () {
alert("a")
}, false)
inner.addEventListener("click", function () {
alert("b")
}, true)
inner.addEventListener("click", function () {
alert("c")
}, false)
inner.addEventListener("click", function () {
alert("d")
}, true)
// 2 4 a b c d 1 3
</script>
