js實現一些跨瀏覽器的事件方法

標籤：bubble   event對象   else   進階程式設計   綁定   handler   alert   元素   style   

　　用JavaScript實現事件的綁定，移除，以及一些常用的事件屬性的擷取，時常要考慮到在不同瀏覽器下的相容性，下面給出了一個跨瀏覽器的事件對象：

var EventUtil = {    on: function(element, type, handler) {/* 添加事件 */        if (element.addEventListener) {            element.addEventListener(type, handler, false);        } else if (element.attachEvent) {//IE  注意：此時事件處理常式會在全域範圍中運行，因此用attachEvent綁定的事件，此時在事件處理函數裡的this 等於window，使用時要注意            element.attachEvent("on" + type, handler);        } else {            element["on" + type] = handler;        }    },    off: function(element, type, handler) {/* 移除事件 */        if (element.removeEventListener) {            element.removeEventListener(type, handler, false);        } else if (element.detachEvent) {            element.detachEvent("on" + type, handler);        } else {            element["on" + type] = null;        }    },    getEvent: function(event) {/* 返回對event對象的引用 */        return event ? event : window.event;    },    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;        }    },    /* mouseover 和mouserout 這兩個事件都會涉及把滑鼠指標從一個元素的邊界之內移動到另一個元素的邊界之內。*/    getRelatedTarget: function(event) {        if (event.relatedTarget) {            return event.relatedTarget;        } else if (event.toElement) {//IE8 mouserout事件            return event.toElement;        } else if (event.fromElement) {//IE8 mouseover事件            return event.fromElement;        } else {            return null;//其他事件        }    }};

調用如下：

EventUtil.on(document, "click", function(event){//為document元素繫結click事件    event = EventUtil.getEvent(event);//擷取event事件對象    alert("Screen coordinates: " + event.screenX + "," + event.screenY);});

 

文章參考自《JavaScript進階程式設計第三版》

 

js實現一些跨瀏覽器的事件方法