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

（1）Document 對象

解釋：每一個載入瀏覽器的 HTML 文檔都會成爲 Document 對象。Document 對象使咱們能夠從腳本中對 HTML 頁面中的全部元素進行訪問。

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

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

 

（2）什麼是event？？

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

 

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

代碼以下：

 

解釋：

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

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

 

（3）事件冒泡

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

效果圖以下：

 

 

代碼以下圖：

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

 

（二）列舉第二個案例：

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

 

（三）列舉第三個案例：

 即：修改上面第二個案例

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

 

解釋：

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

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