javascript事件之：谈谈自定义事件

　　对于JavaScript自定义事件，印象最深刻的是用jQuery在做图片懒加载的时候。给需要懒加载的图片定义一个appear事件。当页面图片开始出现时候，触发这个自定义的appear事件（注意，这里只触发一次）。

　　由此，现在我们通过JavaScript谈一谈自定义事件。

　　所谓事件，说的明白点，就是在一个合适的时候触发调用某个函数。平常说的事件是那些比较常用的，绑定在元素身上的某个方法，当用户触发某个行为时，（click, focus, mouseover, mouseout, load ......）这个函数触发。自定义事件也是如此，只是触发的方式可以由你自己决定,比如我们上面提到的appear事件，当这个元素可见时，触发某个自定义的方法。

　　我们用JavaScript模拟一下。

//定义两个方法，为元素添加事件，触发事件
 1 function add(el, type, fn){
    el.listeners = el.listeners || {}
    el.listeners[type] = el.listeners[type] || []
    el.listeners[type].push(fn)
    
    el.addEventListener(type, fn, false);
}

function trigger(el, type){
    if(el.listeners){
        var triggerArr = el.listeners[type] || [];
        if(triggerArr.length){
            for(var i = 0; i<triggerArr.length; i++){
                triggerArr[i]();
            }
        }
    }
}

绑定事件，并触发

function doFn(){
    alert("appear触发弹出！")
}
function doFn2(){
    alert("appear触发弹出2！")
}

add($doTrigger, "doTrigger", doFn)
add($doTrigger, "doTrigger", doFn2)
trigger($doTrigger, "doTrigger")

页面加载，弹出，"appear触发弹出！"，"appear触发弹出2！"。

实现原理非常简单。为元素添加一个属性listeners，默认为{}, 添加时候，往对象里加一个默认值为[]的type属性。触发的时候直接得到el.listeners[type]。触发里面每一个方法即可。

删除更简单

function remove(el, type, fn){
    if(el.listeners && el.listeners[type]){
        delete el.listeners[type]
    }
    el.removeEventListener(type, fn, false)
}

对于默认事件呢，我们也测试一下

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标注。以后有时间我们谈谈事件的兼容性。