事件监听

Jansen 学习ing...

DOM0级事件处理

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

btn.onclick = null;

但是DOM0级事件的缺点就是只能添加一个事件

DOM2级事件处理

btn.addEventListener('click',function(){
    alert('hello')
})
btn.addEventListener('click',function(){
    alert('world')
})

这样会先执行hello 然后执行world,DOM2级事件是可以添加多个事件的

但是移除事件的时候，直接使用removeEventListener是不行的，因为通常情况下写的匿名函数，虽然是写的一样，但是实际上不是同一个，所以想移除事件的话
要使用下面代码

btn.addEventListener("click",handler,false);
//这里省略了其他代码
btn.removeEventListener("click",false); 

就是把函数提取出来

兼容性

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;
        }
    }
};

这样的话调用的时候只需要使用EventUtil.addHandler和EventUtil.removeHandler就可以了

    var btn = document.getElementById("myBtn");
    var handler = function(){
        alert("Clicked");
    };
    EventUtil.addHandler(btn,"click",handler);
    //这里省略了其他代码
    EventUtil.removeHandler(btn,handler);

补充

刚刚看到阻止冒泡和默认事件的时候，发现之前都是直接写的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;
        }
    }
};

这样在使用阻止默认事件时

    var link = document.getElementById("myLink");
    link.onclick = function(event){
        event = EventUtil.getEvent(event);
        EventUtil.preventDefault(event);
    };

阻止冒泡的话亦然