對於JavaScript自定義事件，印象最深刻的是用jQuery在做圖片懶加載的時候。給需要懶加載的圖片定義一個appear事件。當頁面圖片開始出現時候，觸發這個自定義的appear事件（注意，這裡只觸發一次）。
由此，現在我們通過JavaScript談一談自定義事件。
所謂事件，說的明白點，就是在一個合適的時候觸發調用某個函數。平常說的事件是那些比較常用的，綁定在元素身上的某個方法，當用戶觸發某個行為時，（click, focus, mouseover, mouseout, load ......）這個函數觸發。自定義事件也是如此，只是觸發的方式可以由你自己決定,比如我們上面提到的appear事件，當這個元素可見時，觸發某個自定義的方法。
我們用JavaScript模擬一下。
//定義兩個方法，為元素添加事件，觸發事件
1 function add(el, type, fn){
2 el.listeners = el.listeners || {}
3 el.listeners[type] = el.listeners[type] || []
4 el.listeners[type].push(fn)
5
6 el.addEventListener(type, fn, false);
7 }
8
9 function trigger(el, type){
10 if(el.listeners){
11 var triggerArr = el.listeners[type] || [];
12 if(triggerArr.length){
13 for(var i = 0; i<triggerArr.length; i++){
14 triggerArr[i]();
15 }
16 }
17 }
18 }
綁定事件，並觸發
1 function doFn(){
2 alert("appear觸發彈出！")
3 }
4 function doFn2(){
5 alert("appear觸發彈出2！")
6 }
7
8 add($doTrigger, "doTrigger", doFn)
9 add($doTrigger, "doTrigger", doFn2)
10 trigger($doTrigger, "doTrigger")
頁面加載，彈出，"appear觸發彈出！"，"appear觸發彈出2！"。
實現原理非常簡單。為元素添加一個屬性listeners，默認為{}, 添加時候，往對象裡加一個默認值為[]的type屬性。觸發的時候直接得到el.listeners[type]。觸發裡面每一個方法即可。
刪除更簡單
1 function remove(el, type, fn){
2 if(el.listeners && el.listeners[type]){
3 delete el.listeners[type]
4 }
5 el.removeEventListener(type, fn, false)
6 }
對於默認事件呢，我們也測試一下
add($clickTrigger, "click", clickFn)
add($clickTrigger, "click", clickFn1)
trigger($clickTrigger, "click")
function clickFn(){
alert("click觸發彈出！")
}
function clickFn1(){
alert("click觸發彈出！")
}
頁面一加載彈出。點擊“click事件”也彈出。
remove($clickTrigger, "click", clickFn)
remove($clickTrigger, "click", clickFn1)
remove之後，頁面加載不彈出，點擊也不彈出。
注意，以上的代碼都是基於w3c標注。以後有時間我們談談事件的兼容性。