自己封装跨浏览器事件添加和删除函数

   为了以跨浏览器的方式处理事件，很多人会使用能够兼容多种浏览器的JavaScript库，例如家喻户晓的JQuery，但其实我们自己编写代码也不难，而且能帮助我们理解不同浏览器的差异，下面就是我自己写的一个比较简单的跨浏览器添加事件和删除事件的对象。原理很简单，其实就是浏览器能力检测而已。

var myEvent = {    addHandler: function (element, type, func) {        if(element.addEventListener) {                   //dom2级，如果是非ie            element.addEventListener(type, func, false);        } else if (element.attachEvent) {                //dom2级，如果是ie            element.attachEvent("on" + type, func);        } else {                                         //dom0级            element["on" + type] = func;        }    },    removeHandler: function (element, type, func) {        if(element.removeEventListener) {                   //dom2级，如果是非ie            element.removeEventListener(type, func, false);        } else if (element.detachEvent) {                   //dom2级，如果是ie            element.detachEvent("on" + type, func);        } else {                                            //dom0级            element["on" + type] = null;        }    },    getEvent: function (event) {                            //获得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;        }    }};

 

   可以像下面这样使用myEvent对象：

  var btn = document.querySelector("button");  var handler = function (event) {      var newEvent = myEvent.getEvent(event);     //获取event对象      var target = myEvent.getTarget(event);      //获得事件目标      alert('我被点击了');      myEvent.stopPropagation(newEvent);          //取消冒泡      myEvent.preventDefault(newEvent);           //取消默认事件  };  myEvent.addHandler(btn, "click", handler);    //给btn添加点击事件handler  myEvent.removeHandler(btn, "click", handler); //给btn移除点击事件handler