js编写通用的事件监听函数

var EventUtil = {
    addEvent: function(element, type, handler) {
        if(element.addEventListener) {
            element.addEventListener(type, handler);
        } else if(element.attachEvent) {
            element.attachEvent("on" + type, handler);
        } else {
            element["on" + type] = handler;
        }
    },
    removeEvent: function(element, type, handler) {
        if(element.removeEventListener) {
            element.removeEventListener(type, handler);
        } else if(element.detachEvent) {
            element.detachEvent("on" + type, handler);
        } else {
            element["on" + type] = null;
        }
    },
    //在使用DOM0级方法添加事件处理函数,IE event是window对象的一个属性
    getEvent: function(event) {
        return event || window.event;
    },
    getTarget: function(event) {
        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;
        }
    }
}

//getEvent使用
btn.onclick = function(event) {
    event = EventUtil.getEvent(event);
}

//getTarget使用
btn.onclick = function(event) {
    event = EventUtil.getEvent(event);
    var target = EventUtil.getTarget(event);
}

//preventDefault使用
var link = document.getElementById("mylink");
link.onclick = function(event) {
    event = EventUtil.getEvent(event);
    EventUtil.preventDefault(event);
}

//stopPropagation使用
btn.onclick = function(event) {
    event = EventUtil.getEvent(event);
    EventUtil.stopPropagation(event);
}

猜你喜欢

转载自blog.csdn.net/u011877410/article/details/81457796