写一个通用的添加事件, 移除事件函数?

2020-05-13  本文已影响0人  风雅欢乐
const eventUtil = {
    addEvent: function(element, type, handler) {
        if (element.addEventListener) {
            element.addEventListener(type, handler, false); // 第三个参数默认false,指在冒泡阶段执行。为true的话在捕获阶段执行
        } else if (element.attachEvent) {
            element.attachEvent('on' + type, function() {
                handler.call(element);
            });
        } else {
            element['on' + type] = handler;
        }
    },
    removeEvent: 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;
        }
    },
    // 主要是阻止事件冒泡,因为IE不支持事件捕获
    stopPropagation: function(ev) {
        const event = ev || window.event;
        if (event.stopPropagation) {
            // 其他标准浏览器
            event.stopPropagation();
        } else {
            // IE下,取消冒泡将cancelBubble设置为true
            event.cancelBubble = true;
        }
    },
    // 取消默认行为
    preventDefault: function(ev) {
        const event = ev || window.event;
        if (event.preventDefault) {
            // 其他标准浏览器
            event.preventDefault();
        } else {
            // IE下
            event.returnValue = false;
        }
    },
    // 获取事件目标
    getTarget: function(ev) {
        const event = ev || window.event;
        // IE中,事件目标在srcElement中
        return event.target || event.srcElement;
    }
}
上一篇 下一篇

猜你喜欢

热点阅读