Web前端基礎知識整理

請多多指教；

IE與標準瀏覽器對事件處理的區別

  a.事件監聽的區別：

       //eventName:事件名，點選事件click,不用加on;handle函式名

       標準瀏覽器：新增事件監聽：element.addEventListener(eventName,handle);

                           刪除事件監聽：element.removeEventListener(eventName,handle);

                           刪除事件監聽和新增事件監聽的事件必須是同一個，所以我不建議在新增裡面寫函式。

     //eventName事件名，點選事件onclick,需要加on，handle函式名

      IE瀏覽器：新增事件監聽：element.attachEvent(eventName,handle);

                      刪除事件監聽：element.detachEvent(eventName,handle);

     我之間測試這裡時：若是在標準瀏覽器中是不能使用IE的事件，IE中同樣不能使用標準裡面的事件，不讓會報錯不能執行。

     為了事件監聽相容性合併了兩種情況：

var EventUtil = {
//element:元素；type：事件型別（不加on，click）；handler：函式名或函式
    addHandler:function(element,type,handler){
        //繫結事件
        //Chrome Firefox IE9等     addEventListener
        //IE8及IE8以下的瀏覽器     attachEvent
        if(element.addEventListener){
            element.addEventListener(type,handler,false);
        }else if (element.attachEvent) {
            element.attachEvent("on"+ type,handler);
        } else{
            element["on"+type] = handler
        }
    },
    removeHandler: function(element,type,handler){
        //移除事件
        //Chrome Firefox IE9等
        //IE8及IE8以下的瀏覽器
        if(element.removeEventListener){
            element.removeEventListener(type,handler,false);
        }else if (element.detachEvent) {
            element.detachEvent("on"+type,handler);
        } else{
            element["on"+type] = handler
        }
    }
}
//呼叫方法：
EventUtil.addHandler(element,"click",function () {
    alert("one")
})

b.阻止事件冒泡

        標準：event.stopPropagation();

        IE:event.cancelBubble=true;

       相容：

function stopBubble(e) { 
//如果提供了事件物件，則這是一個非IE瀏覽器 
if ( e && e.stopPropagation ) 
    //因此它支援W3C的stopPropagation()方法 
    e.stopPropagation(); 
else 
    //否則，我們需要使用IE的方式來取消事件冒泡 
    window.event.cancelBubble = true; 
}

c.阻止預設事件

         標準：event.preventDefault();

         IE:event.returnValue=false;

        相容：

//阻止瀏覽器的預設行為 
function stopDefault( e ) { 
    //阻止預設瀏覽器動作(W3C) 
    if ( e && e.preventDefault ) 
        e.preventDefault(); 
    //IE中阻止函式器預設動作的方式 
    else 
        window.event.returnValue = false; 
    return false; 
}

d.物件

        標準：event；

         IE：window.event

        相容：event=event || window.event;

e.事件源物件

         標準：event.target;

         IE:event.srcElement;

         相容：function getTarget（event）{

                     return event.target || event.srcElement;

                    }

最後的整合：

var EventUtil = {
				addHandler: function(element, type, handler) {
					//繫結事件
					//Chrome Firefox IE9等     addEventListener 
					//IE8及IE8以下的瀏覽器     attachEvent 
					if(element.addEventListener) {
						element.addEventListener(type, handler, false);
					} else if(element.attachEvent) {
						element.attachEvent("on" + type, handler);
					} else {
						element["on" + type] = handler					}
				},
				removeHandler: function(element, type, handler) {
					//移除事件
					//Chrome Firefox IE9等      
					//IE8及IE8以下的瀏覽器     
					if(element.removeEventListener) {
						element.removeEventListener(type, handler, false);
					} else if(element.detachEvent) {
						element.detachEvent("on" + type, handler);
					} else {
						element["on" + type] = handler					}
				},
				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;
					}
				}
          }