歡迎來到Linux教程網
Linux教程網
Linux教程網
Linux教程網
您现在的位置: Linux教程網 >> UnixLinux >  >> Linux編程 >> Linux編程

關於事件處理的浏覽器兼容筆記

先吐幾句浏覽器兼容的槽,畢竟對這方面也剛學習,就不單獨說了。多數前端應該是以火狐為主開發浏覽器,除了有好用的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;
}

Copyright © Linux教程網 All Rights Reserved