EVENT（下）今天來聊一聊事件的執行機制什麼是事件的執行機制呢？思考一個問題？當一個大盒子巢狀一個小盒子的時候，並且兩個盒子都有點選事件你點選裡面的小盒子，外面的大盒子上的點選事件要不要執行事件的傳播就像上面那個圖片一樣，我們點選在紅色盒子身上的同時，也是點選在了粉色盒子上這個是既定事實，那麼兩個盒子的點選事件都會觸發這個就叫做 事件的傳播當元素觸發一個事件的時候，其父元素也會觸發相同的事件，父元素的父元素也會觸發相同的事件就像上面的圖片一樣點選在紅色盒子上的時候，會觸發紅色盒子的點選事件也是點選在了粉色的盒子上，也會觸發粉色盒子的點選事件也是點選在了 body 上，也會觸發 body 的點選事件也是點選在了 html 上，也會觸發 html 的點選事件也是點選在了 document 上，也會觸發 document 的點選事件也是點選在了 window 上，也會觸發 window 的點選事件也就是說，頁面上任何一個元素觸發事件，都會一層一層最終導致 window 的相同事件觸發，前提是各層級元素得有註冊相同的事件，不然不會觸發在事件傳播的過程中，有一些注意的點：只會傳播同類事件只會從點選元素開始按照 html 的結構逐層向上元素的事件會被觸發內部元素不管有沒有該事件，只要上層元素有該事件，那麼上層元素的事件就會被觸發到現在，我們已經瞭解了事件的傳播，我們再來思考一個問題事件確實會從自己開始，到 window 的所有相同事件都會觸發是因為我們點在自己身上，也確實逐層的點在了直至 window 的每一個元素身上但是到底是先點在自己身上，還是先點在了 window 身上呢先點在自己身上，就是先執行自己的事件處理函式，逐層向上最後執行 window 的事件處理函式反之，則是先執行 window 的事件處理函式，逐層向下最後執行自己身上的事件處理函式冒泡、捕獲、目標我們剛才聊過了，每一個事件，都是有可能從自己到 window ，有可能要執行多個同類型事件那麼這個執行的順序就有一些說法了目標你是點選在哪個元素身上了，那麼這個事件的 目標 就是什麼冒泡就是從事件 目標 的事件處理函式開始，依次向外，直到 window 的事件處理函式觸發也就是從下向上的執行事件處理函式捕獲就是從 window 的事件處理函式開始，依次向內，只要事件 目標 的事件處理函式執行也就是從上向下的執行事件處理函式冒泡和捕獲的區別就是在事件的傳播中，多個同類型事件處理函式的執行順序不同事件委託就是把我要做的事情委託給別人來做因為我們的冒泡機制，點選子元素的時候，也會同步觸發父元素的相同事件所以我們就可以把子元素的事件委託給父元素來做事件觸發點選子元素的時候，不管子元素有沒有點選事件，只要父元素有點選事件，那麼就可以觸發父元素的點選事件
<body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var oUl = docuemnt.querySelector('ul') oUl.addEventListener('click', function (e) { console.log('我是 ul 的點選事件，我被觸發了') }) </script></body><body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var oUl = docuemnt.querySelector('ul') oUl.addEventListener('click', function (e) { e = e || window.event var target = e.target || e.srcElement console.log(target) }) </script></body><body> <ul> <li>1</li> <li>2</li> <li>3</li> </ul> <script> var oUl = docuemnt.querySelector('ul') oUl.addEventListener('click', function (e) { e = e || window.event var target = e.target || e.srcElement // 判斷你點選的是 li if (target.nodeName.toUpperCase === 'LI') { // 確定點選的是 li // 因為當你點選在 ul 上面的時候，nodeName 應該是 'UL' // 去做點選 li 的時候該做的事情了 console.log('我是 li，我被點選了') } }) </script></body>