跨浏览器事件

上次面试被问到关于与事件委托的问题，当时没打出来，晚上有空整理了一下，做一个总结。

事件，在标准DOM和IE间标准不同，所以一般要跨浏览器就要手写跨浏览器事件。

DOM 0 级 指的就是 btn.click(function(){}) 这种的

DOM 2 级 指的就是 btn.addEventListener(event,f,true/false); 注意一点就是最后一个参数 trur指的是捕获，false在冒泡是发生

DOM 1级 我也不知道这是什么鬼

---

奇葩的IE 首先IE只支持捕获，不支持冒泡，哦 btw 事件的三个阶段分别是 捕获--》触发--》冒泡

由于IE只支持冒泡，所以通用是写通用事件时，ＤＯＭ的第三个参数要设为false才会统一；

还有值得一提的是，这下彻底理解 evt=event||window.event; 所代表的含义了，就是兼容事件

比如点击时就会触发事件，这是浏览器就会产生一个事件对象，这个事件对象中有一些属性和方法，比较重要的有以下这几个

DOM中 target:表示目标锚点，这个很精确 preventDefault() 这个就是阻止默认事件发生 stopPropagation() 阻止冒泡

IE中 srcElement就是DOM中的target returnValue设置为false就可以取消默认事件 cancelBubble 设置为true就是stopPropagation

然后事件委托就变得很简单，比如一列li 标签，逐个绑定太麻烦，消耗性能，就可以考虑事件委托，让事件绑定在父元素上，用target.id来分流

事件通用代码如下

可以处理事件绑定，注意最后的 event=getEvent(event) 木有加var 说明他是全局的

var commonEvent = {

    addEvent: function (element, event, f) {
        if (element.addEventListener) {
            element.addEventListener(event, f, false)
        }
        if (element.attachEvent) {
            element.attachEvent("on" + event, f)
        }
        else {
            event["on" + event] = f;
        }
    },

    removeEvent: function (element, event, f) {
        if (element.removeEventListener) {
            element.removeEventListener(event, f, false)
        }
        if (element.removeEvent) {
            element.detachEvent("on" + event, f)
        }

        else {
            event["on" + event] = null;
        }
    },

    getEvent: function (event) {
        return event = event ? event : window.event;
    },

    getTarget: function (event) {
        return  target = event.target || event.srcElewment;
    },

    stopPropagation: function (event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        }
        else {
            event.cancelBubble = true;
        }
    },
    preventDefault: function (event) {
        if (event.preventDefault) {
            event.preventDefault();
        }
        else {
            eventReturnValue = false;
        }
    }
};

bt.onclick = function (event) {
    event = commonEvent.getEvent(event);
    var target = commonEvent.getTarget(event);
};