一、事件流 事件是js與HTML交互的基礎，事件流描述的是頁面接受事件的順序，而事件流又分為三個階段：捕獲階段、目標階段和冒泡階段。 如果單純的事件處理，事件捕獲和事件冒泡二選一即可，導致兩者並存的原因是當年微軟和網景的瀏覽器大戰，微軟提出了事件冒泡，而網景提出了事件捕獲。 1、事件冒泡 事件開始由 ...
一、事件流
事件是js與HTML交互的基礎，事件流描述的是頁面接受事件的順序，而事件流又分為三個階段：捕獲階段、目標階段和冒泡階段。
如果單純的事件處理，事件捕獲和事件冒泡二選一即可，導致兩者並存的原因是當年微軟和網景的瀏覽器大戰，微軟提出了事件冒泡，而網景提出了事件捕獲。
1、事件冒泡
事件開始由最深層的元素接收，然後逐級向上傳播
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="div"></div> <script> let div = document.getElementById('div'); div.onclick = function () { console.log('div'); }; document.body.onclick = function () { console.log('body') }; </script> </body> </html>
當點擊div標簽的時候，先列印出div，然後再列印出body。因為div先接收到點擊事件，然後再向它的父元素body傳播，再到html，最後到document。
IE，chrome，Firefox，Opera，Safari五大瀏覽器都支持事件冒泡。
2、事件捕獲
事件開始由最外層的document捕獲，然後依次向內傳播，直至最深層的元素
<!DOCTYPE html> <html lang="zh"> <head> <meta charset="UTF-8"> <title>Title</title> <style> #div { width: 100px; height: 100px; background-color: red; } </style> </head> <body> <div id="div"></div> <script> let div = document.getElementById('div'); div.addEventListener('click', function () { console.log('div'); }, true); document.body.addEventListener('click', function () { console.log('body') }, true); </script> </body> </html>
當點擊div標簽的時候，最先列印body，然後再列印出div。因為addEventListener函數的第三個參數為true時，函數處理捕獲事件，document先捕獲點擊事件，依次傳播到html—body—div。
IE9，chrome，Firefox，Opera，Safari五大瀏覽器都支持事件捕獲，IE8及以下版本不支持事件捕獲。
