事件监听

Jansen 学习ing...

DOM0级事件处理

//添加点击事件
btn.onclick(){
    //do something
}
//干掉事件

btn.onclick = null;@H_403_11@
但是DOM0级事件的缺点就是只能添加一个事件
DOM2级事件处理
btn.addEventListener('click',function(){
    alert('hello')
})
btn.addEventListener('click',function(){
    alert('world')
})
@H_403_11@
这样会先执行hello 然后执行world,DOM2级事件是可以添加多个事件的
但是移除事件的时候，直接使用removeEventListener是不行的，因为通常情况下写的匿名函数，虽然是写的一样，但是实际上不是同一个，所以想移除事件的话@H_502_29@要使用下面代码
btn.addEventListener("click",handler,false);
//这里省略了其他代码
btn.removeEventListener("click",false); @H_403_11@
就是把函数提取出来

兼容性
eventListener在IE9之前中是不支持的，要使用attachEvent来替换
兼容方法
var EventUtil = {
    addHandler: function(element,type,handler){
        if (element.addEventListener){
            element.addEventListener(type,false);
        } else if (element.attachEvent){
            element.attachEvent("on" + type,handler);
        } else {
            element["on" + type] = handler;
        }
    },removeHandler: function(element,handler){
        if (element.removeEventListener){
            element.removeEventListener(type,false);
        } else if (element.detachEvent){
            element.detachEvent("on" + type,handler);
        } else {
            element["on" + type] = null;
        }
    }
};@H_403_11@
这样的话调用的时候只需要使用EventUtil.addHandler和EventUtil.removeHandler就可以了
    var btn = document.getElementById("myBtn");
    var handler = function(){
        alert("Clicked");
    };
    EventUtil.addHandler(btn,"click",handler);
    //这里省略了其他代码
    EventUtil.removeHandler(btn,handler);@H_403_11@

补充
刚刚看到阻止冒泡和默认事件的时候，发现之前都是直接写的e.preventDefault和e.stopPropagation，现在想想为什么测试和产品在IE里没测出来问题啊，真是奇怪
var EventUtil = {
    getEvent: function(event){
        return event ? event : window.event;
    },getTarget: function(event){
        return event.target || event.srcElement;
    },preventDefault: function(event){
        if (event.preventDefault){
            event.preventDefault();
        } else {
            event.returnValue = false;
        }
    },stopPropagation: function(event){
        if (event.stopPropagation){
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};@H_403_11@
这样在使用阻止默认事件时
    var link = document.getElementById("myLink");
    link.onclick = function(event){
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);
    };@H_403_11@
阻止冒泡的话亦然