在JS中,消息的通知是通過事件表達的,當代碼庫增長到一定的規模就需要考慮將行為和自定義事件進行解耦,通過事件機制可以將類設計為獨立的模塊,通過事件對外通信提高了程序的開發效率。
了解自定義事件的概念:
- 類似 DOM 的行為:你在 DOM 節點(包括 document 對象)監聽并觸發自定義事件。這些事件既可以冒泡,也可以被攔截。這正是 Prototype、jQuery 和 MooTools 所做的。如果事件不能擴散,就必須在觸發事件的對象上進行監聽。
- 命名空間:一些框架需要你為事件指定命名空間,通常使用一個點號前綴來把你的事件和原生事件區分開。
- 自定義額外數據:JavaScript 框架允許你在觸發自定義事件時,向事件處理器傳送額外的數據。jQuery 可以向事件處理器傳遞任意數量的額外參數。
- 通用事件 API:只用 Dojo 保留了操作原生 DOM 事件的正常API。而操作自定義事件需要特殊的發布/訂閱 API。這也意味著 Dojo 中的自定義事件不具有DOM事件的一些行為(比如冒泡)。
- 聲明:我們往往需要在預定義的事件中加入一些特殊的變化(例如,需要Alt鍵按下才能觸發的單擊事件),MooTools 運行你定義此類自定義事件。此類事件需要預先聲明,即便你只是聲明他們的名字。任何未聲明的自定義事件不會被觸發。
理論太抽象,看看 jQuery 框架中如何使用事件。
jQuery 的事件自定義事件還是通過 on 綁定的,然后再通過 trigger 來觸發這個事件。
//給element綁定hello事件
element.bind("hello",function(){
alert("hello world!");
});
//觸發hello事件
element.trigger("hello");
這段代碼這樣寫似乎感覺不出它的好處,看了下面的例子也許你會明白使用自定義事件的好處了,參考右邊的代碼。
trigger需要處理的問題
- 模擬事件對象,用戶模擬處理停止事件冒泡(因為不是通過瀏覽器系統觸發的,而是自動觸發的,所以這個事件對象要如何處理?)
- 區分事件類型,觸發標準的瀏覽器事件 和 自定義事件名綁定的處理程序。
擬冒泡機制
- 當事件是 click 類型,自然是本身支持冒泡這樣的行為,通過 stopPropagation 阻止即可
- 當然一些事件,如 focusin 和 blur 本身不冒泡,但 jQuery 為了跨瀏覽器一致性, jQuery 需要在這些事件上模擬了冒泡行為,jQuery 要如何處理?
- 那么如果是自定義的aaa的事件名,又如何處理冒泡?