JavaScript事件處理兼容性總結

事件監聽綁定函數

// eventType為不含"on"的事件類型
var bind = function(ele, eventType, callback) {
    if(ele.addEventListener) {
        // W3C標準寫法
        return ele.addEventListener(eventType, callback, false);
    }else if(ele.attachEvent) {
        // 兼容IE6~8
        return ele.attachEvent(eventType, callback);
    }else {
        // 兼容IE5-
        return ele["on" + eventType] = callback;
    }
}

事件監聽解綁函數

// eventType為不含"on"的事件類型
var unbind = function(ele, eventType, callback) {
    if(ele.removeEventListener) {
        // W3C標準寫法
        return ele.removeEventListener(eventType, callback, false);
    }else if(ele.detachEvent) {
        // 兼容IE6~8
        return ele.detachEvent(eventType, callback);
    }else {
        // 兼容IE5-
        return ele["on" + eventType] = null;
    }
}

重寫window.onload為可多次追加的函數

var addLoadEvent = function(callback) {
    var oldOnLoad = window.onload;
    if(type window.onload != "function") {
        window.onload = callback;
    }else {
        window.onload = function() {
            if(oldOnLoad) {
                oldOnLoad();
            }
            callback();
        }
    }
}

獲取鼠標點擊事件的坐標位置

screenX: 鼠標位置相對于用戶屏幕水平偏移量，參照點也就是原點是屏幕的左上角；

PageX:鼠標在頁面上的位置,從頁面左上角開始,即是以頁面為參考點,不隨滑動條移動而變化；

clientX:鼠標在頁面上可視區域的位置,從瀏覽器可視區域左上角開始,即是以瀏覽器滑動條此刻的滑動到的位置為參考點,隨滑動條移動 而變化.

常見的JavaScript獲取元素位置的API：

function getPosition(e) {
    // 訪問事件對象
    var e = e || window.event;


// 聲明x、y分別為鼠標相對于文檔的位置
var x = 0, y = 0;

// 針對W3C標準瀏覽器具有pageX/Y屬性
if(e.pageX) {
    x = e.pageX;
    y = e.pageY;
}else if(e.clientX) {
    // 在IE6~8中不支持pageX，而是用clientX；但clientX只是相對屏幕視口的橫坐標，不包含滾動寬度；
    var scrollLeft = document.documentElement.scrollLeft || document.body.scrollLeft;
    var scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    // pageX = clientX + scrollX
    x = e.clientX + scrollLeft;
    y = e.clientY + scrollTop;
}
return [x, y];

}
</code></pre> 
  
取消默認事件發生
 
  
function cancelEvent(event) {
    if(event.preventDefault) {
        e.preventDefault();
    }else {
        // 兼容IE6~8
        event.returnValue = false;
    }
}
 
  
防止事件在嵌套元素中傳播
 
  
有一個元素嵌套在另一個元素中，他們都捕獲點擊事件。如果想阻止事件傳播，可以使用stopPropagation()函數，在IE6~8中則可以使用cancelBubble = boolean來實現。
 
  
function stopPropagation(event) {
    if(event.stopPropagation) {
        event.stopPropagation();
    }else {
        event.cancelBubble = true;
    }
}
 
  
獲取鍵盤事件
 
  
function keyCode(e) {
    // 訪問事件對象
    var e = e || window.event;
    var key = e.keyCode || e.charCode;
    return key;
}
 
  
來自：http://www.dengzhr.com/js/366