JS——事件詳解（Document對象、event對象、事件冒泡...）

（1）Document 對象

解釋：每個載入瀏覽器的 HTML 文檔都會成為 Document 對象。Document 對象使我們可以從腳本中對 HTML 頁面中的所有元素進行訪問。

（Document是網頁中最頂層的父節點 比html還大）

提示：Document 對象是 Window 對象的一部分，可通過 window.document 屬性對其進行訪問。

 

（2）什么是event？？

答：event是事件對象。即：用來獲取事件的詳細信息：鼠標位置（clientX、clientY）、鍵盤按鍵等

 

列舉案例：（點擊頁面彈出鼠標位置信息案例）

代碼如下：

 

解釋：

這個事件兼容性問題，在之前的ie和ff瀏覽器中難以兼容，所以才會寫出兩個解決兼容性問題的答案（3、4的寫法）。

而現在大多數瀏覽器都得以兼容。所以推薦使用第二種寫法（第26-27行代碼）即可，若還出現瀏覽器兼容性問題，則推薦使用第四種寫法（第38-43行代碼）即可。

 

（3）事件冒泡

（一）列舉一個簡單案例：

效果圖如下：

 

 

代碼如下圖：

如上圖，顯示的就是冒泡事件所執行的效果。如代碼圖，當底層div被點擊，首先會觸發本身，接着它的父級也會被觸發，然后逐層向上觸發其他div點擊事件。

 

（二）列舉第二個案例：

本案例為了實現：當點擊按鈕，使得div出現，當點擊頁面其他地方，使得div消失。（失敗的例子↓↓↓）

 

（三）列舉第三個案例：

 即：修改上面第二個案例

本案例為了實現：當點擊按鈕，使得div出現，當點擊頁面其他地方，使得div消失。（成功的例子↓↓↓）

 

解釋：

為了阻止按鈕的向上冒泡，實現案例效果，所以需要在按鈕點擊事件中添加阻止冒泡方法，即：event.cancelBubble=true即可。

【關於阻止冒泡，這篇文章可以好好閱讀：http://caibaojian.com/javascript-stoppropagation-preventdefault.html#comments （經測試，文章中的方法也可以實現阻止冒泡）】