关于浏览器兼容的事件处理（JavaScript和jQuery)

先吐几句浏览器兼容的槽，毕竟对这方面也刚学习，就不单独说了。多数前端应该是以火狐为主开发浏览器，除了有好用的firebug，火狐的严格解析也是主要原因。此外Safari、Opera、Chrome，当然还有IE都是不可忽略的主流浏览器，它们对W3C标准的支持并不完全相同。说到主要区别，可以把IE视为一类，其他归为一类。因为IE常常很另类的一个，且不说Quirks模式。

1.Event对象

Event对象属于HTML DOM，代表事件的状态。但IE将Event对象视为Window对象的属性，所以使用Event对象的跨浏览器兼容方式是:

function eventHandleFunction(evnt){
      var theEvent = evnt ? evnt : window.event;
      //...
}

 

2.添加监听函数

 JavaScript为对象提供三个方法来实现事件监听器：addEventListener,removeEventListener,dispatchEvent。

addEventListener的用法：

obj.addEventListener('event', eventFunction, boolean);

第三个参数是false时，事件以冒泡形式传播，即先本元素后父辈元素。值是true时按事件捕获形式传播，即先父后子的反冒泡顺序。

但IE似乎又不一样了，IE不支持上面的方法（不知未来会不会支持），相似方法是attachEvent,detachEvent。兼容的进行事件监听做法是:

if(obj.addEventListener) {
     obj.addEventListener("click",clickFunc,false);
} else if(obj.attachEvent) {
     obj.attachEvent("onclick",clickFunc);
} else {
     obj.onclick = clickFunc;
} 

23.阻止事件传播

 事件冒泡简单说就是子元素的某事件被触发，默认情况下父元素们的该事件会相继被触发。想要阻止事件冒泡，对于Mozilla浏览器使用stopPropagation方法，而IE浏览器使用cancleBubble属性。阻止冒泡的兼容写法是：

function stopEvent(evnt) { if(evnt.stopPropagation) { evnt.stopPropagation(); } else { evnt.cancleBubble = true; } } 

 

使用jQuery处理事件兼容

jQuery的最大好处之一就是帮我们处理了各种兼容问题，我们只管用就好了。下面的代码兼容了上面提到的几种情况，实现了注册一个事件并阻止事件继续传播。

    $(obj).bind('click',function(event){   //绑定事件
        //todo
        event.stopPropagation();   //阻止事件传播
    }); 

 

另外，jQuery注册事件的好处是可以绑定多个处理函数，调用顺序是注册的顺序。而JavaScript则只能保存一个函数引用，如下面的代码只会执行doSth2。

       window.onload = doSth1;
       window.onload = doSth2;