紅寶書閱讀筆記

事件

事件實現(xiàn)了JS與HTML之間的交互。

事件代表文檔或瀏覽器窗口中某個有意義的時刻。可以使用僅在事件發(fā)生時執(zhí)行的監(jiān)聽器（也叫處理程序）訂閱事件。在傳統(tǒng)軟件工程領(lǐng)域，這個模型叫“觀察者模式”，其能夠做到頁面行為（在 JavaScript 中定義）與頁面展示（在 HTML 和 CSS 中定義）的分離。

事件流

事件流描述了頁面接收事件的順序。

事件冒泡（IE事件）

從最具體的元素開始出發(fā)，向上傳播至沒有那么具體的元素，即從內(nèi)向外，一直到document對象。

事件捕獲（網(wǎng)景事件）

從最不具體的元素傳播到最具體的元素，即從外向內(nèi)，從document開始。

DOM事件流

DOM2 Events 規(guī)范規(guī)定事件流分為 3 個階段：事件捕獲、到達目標和事件冒泡。

事件捕獲最先發(fā)生，
為提前攔截事件提供了可能。然后，實際的目標元素接收到事件。最后一個階段是冒泡，最遲要在這個
階段響應事件。

DOM事件流認為事件處理是冒泡階段的一部分，而現(xiàn)代瀏覽器也都會在捕獲階段觸發(fā)目標事件，所以可以認為在事件目標上有兩個機會來處理事件。

event對象

在外部定義的事件監(jiān)聽器會創(chuàng)建一個函數(shù)來封裝屬性的值，這個函數(shù)的this指向當前事件的目標元素，這個函數(shù)有一個特殊的局部變量event，其中保存的是一個event對象。event對象包含了DOM觸發(fā)事件時的所有相關(guān)信息，包括指定元素、事件類型等。

event對象只在事件處理程序執(zhí)行期間存在，一旦執(zhí)行完畢，就會被銷毀。

事件監(jiān)聽器

addEventListener()和removeEventListener()接收三個參數(shù)：事件名、事件處理函數(shù)和一個表明調(diào)用階段的布爾值，true表示在捕獲階段調(diào)用事件處理程序，false表示在冒泡階段調(diào)用事件處理程序。

比起傳統(tǒng)的將事件監(jiān)聽器直接添加在指定元素上的方法，DOM2 Events規(guī)定的這兩個方法可以為同一個事件添加多個事件處理程序。

addEventListener()添加的事件處理程序只能用removeEventListener()在傳入相同的參數(shù)的條件下進行移除，所以其添加的匿名函數(shù)無法被移除。

大多數(shù)情況下，因為冒泡事件流比捕獲事件流具有更強的瀏覽器兼容性，通常會將事件處理程序注冊在事件的冒泡階段。除非需要在事件到達指定目標前攔截事件，其他情況下不會將事件處理程序注冊在事件的捕獲階段。

性能優(yōu)化

事件委托

在JS中，頁面的事件處理程序越多，頁面性能就越差。事件委托利用事件冒泡，可以只使用一個事件處理程序來處理頁面中所有的某一類型的事件。

比如，在document元素上添加click事件監(jiān)聽器，然后通過switch方法為不同的event執(zhí)行不同的操作，這樣做會比給每一個event的都注冊click事件監(jiān)聽器的性能更好。

清理事件處理程序

無用的事件處理程序會占用Web應用的內(nèi)存，在刪除指定元素/頁面卸載前應該先清理該元素/該頁面的事件處理程序，這樣可以確保內(nèi)存得到回收，指定元素/頁面也可以被安全清除。
btn.onclick = null; // 刪除事件處理程序