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

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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/0ba691debc0bd7718d95a75e7fa35fdd.html