js--事件--通用的事件偵聽器函數

關於事件寫了一系列文章

1.事件流(事件捕獲和事件冒泡)
http://blog.csdn.net/github_34514750/article/details/53067077
2.事件處理程序
http://blog.csdn.net/github_34514750/article/details/53083973
3.事件對象
http://blog.csdn.net/github_34514750/article/details/53084014
4.通用的事件偵聽器函數
本文介紹通用的事件偵聽器函數
5.事件循環(event loop)
http://blog.csdn.net/github_34514750/article/details/53067106
6.事件代理((event delegation)
http://blog.csdn.net/github_34514750/article/details/53067133

1.寫一個通用的事件偵聽器函數(機試題)。

var EventUtil = {
    //根據情況分別使用dom2 || IE || dom0方式 來添加事件
    addHandler: function(element,type,handler) {
        if(element.addEventListener) {
            element.addEventListener(type,handler,false);
        } else if(element.attachEvent) {
            element.attachEvent("on" + type,handler);
        } else {
            element["on" + type] = handler;
        }
    },

    //根據情況分別獲取DOM或者IE中的事件對象,事件目標,阻止事件的默認行爲
    getEvent: function(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;
        }
    }

    //根據情況分別使用dom2 || IE || dom0方式 來刪除事件
    removeHandler: function(element,type,handler){
        if(element.removeHandler) {
            element.removeEventListener(type,handler,false);
        } else if(element.detachEvent) {
            element.detachEvent("on" + type,handler);
        } else {
            element["on" + type] = null;
        }
    }

    //根據情況分別取消DOM或者IE中事件冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
}

var btn = document.getElementById("myBtn"),
    handler = function () {
        alert("Clicked");
    };

EventUtil.addHandler(btn,"click",handler);
EventUtil.removeHandler(btn,"click",handler);
發佈了198 篇原創文章 · 獲贊 18 · 訪問量 22萬+
發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章