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