关于事件处理的浏览器兼容笔记

关于事件处理的浏览器兼容笔记

先吐几句浏览器兼容的槽，毕竟对这方面也刚学习，就不单独说了。多数前端应该是以火狐为主开发浏览器，除了有好用的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.事件冒泡

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

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

3.添加监听函数

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

本文永久更新链接地址：