09-JS的事件流的概念(重點)
在學習jQuery的事件之前，大家必須要對JS的事件有所了解。看下文
事件的概念
HTML中與javascript交互是通過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什麽時候進行調用的，就需要了解一下“事件流”的概念。
什麽是事件流
事件流描述的是從頁面中接收事件的順序
1、DOM事件流
“DOM2級事件”規定的事件流包括三個階段：
① 事件捕獲階段；
② 處於目標階段；
③ 事件冒泡階段
那麽其實呢，js中還有另外一種綁定事件的方式：看下面代碼：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件流</title>
<script>
window.onload = function(){
var oBtn = document.getElementById(‘btn‘);
oBtn.addEventListener(‘click‘,function(){
console.log(‘btn處於事件捕獲階段‘);
}, true);
oBtn.addEventListener(‘click‘,function(){
console.log(‘btn處於事件冒泡階段‘);
}, false);
document.addEventListener(‘click‘,function(){
console.log(‘document處於事件捕獲階段‘);
}, true);
document.addEventListener(‘click‘,function(){
console.log(‘document處於事件冒泡階段‘);
}, false);
document.documentElement.addEventListener(‘click‘,function(){
console.log(‘html處於事件捕獲階段‘);
}, true);
document.documentElement.addEventListener(‘click‘,function(){
console.log(‘html處於事件冒泡階段‘);
}, false);
document.body.addEventListener(‘click‘,function(){
console.log(‘body處於事件捕獲階段‘);
}, true);
document.body.addEventListener(‘click‘,function(){
console.log(‘body處於事件冒泡階段‘);
}, false);
};
</script>
</head>
<body>
<a href="javascript:;" id="btn">按鈕</a>
</body>
</html>當我們點擊這個btn的時候，看看頁面都輸出了什麽：
在解釋輸出結果為什麽是這樣之前，還有幾個知識點需要了解一下即可：
1、addEventListener
addEventListener 是DOM2 級事件新增的指定事件處理程序的操作，這個方法接收3個參數：要處理的事件名、作為事件處理程序的函數和一個布爾值。最後這個布爾值參數如果是true，表示在捕獲階段調用事件處理程序；如果是false，表示在冒泡階段調用事件處理程序。
2、document、documentElement和document.body三者之間的關系：
document代表的是整個html頁面；
document.documentElement代表的是<html>標簽；
document.body代表的是<body>標簽；
接著我們就來聊聊上面的例子中輸出的結果為什麽是這樣：
在標準的“DOM2級事件”中規定，事件流首先是經過事件捕獲階段，接著是處於目標階段，最後是事件冒泡階段。這裏可以畫個圖示意一下:
首先在事件捕獲過程中，document對象首先接收到click事件，然後事件沿著DOM樹依次向下，一直傳播到事件的實際目標，就是id為btn的a標簽。
接著在事件冒泡過程中，事件開始時由最具體的元素（a標簽）接收，然後逐級向上傳播到較為不具體的節點（document）。
需要註意的點：由於老版本的瀏覽器不支持事件捕獲，因此在實際開發中需要使用事件冒泡，在由特殊需要時再使用事件捕獲
補充知識了解即可：
1、IE中的事件流只支持“事件冒泡”，但是版本到了IE9+以後，實現了“DOM2級事件”，也就是說IE9+以後也可以在捕獲階段對元素進行相應的操作。
2、在DOM事件流中，實際的目標在“捕獲階段”不會接收到事件。而是在“處於目標階段”被觸發，並在事件處理中被看成“冒泡階段”的一部分。然後，“冒泡階段”發生，事件又傳播回文檔。
jquery的常用事件
jquery常用的事件，大家一定要熟記在心
09-JS的事件流的概念(重點)