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

　　用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高級程序設計第三版》