事件的概念：
HTML中與javascript交互是通過事件驅動來實現的，例如鼠標點擊事件、頁面的滾動事件onscroll等等，可以向文檔或者文檔中的元素添加事件偵聽器來預訂事件。想要知道這些事件是在什么時候進行調用的，就需要了解一下“事件流”的概念。
什么是事件流：
1，DOM事件流，
"DOM2事件流"規定的事件流包括三個階段：
1，事件捕獲階段。
2，處於目標階段。
3，事件冒泡階段。
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>
效果：
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標簽)接收，然后逐級向上傳播到較為不具體的節點。
jQuery的常用事件：
