事件绑定/取消冒泡/取消默认行为

188 阅读1分钟

addEventListener()

接收三个参数,要处理的函数名,作为事件处理程序的函数,一个布尔值;

布尔值若是true则表示在捕获阶段调用;false则为冒泡

attachEvent()

IE,只在冒泡阶段使用

跨浏览器的事件处理:

var EventUtil = {
    //事件绑定
    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;
        }
    },
    //取消事件绑定
    removeHandler: 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;
        }
    },
    //获取事件对象,window.evnet兼容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;
        }
    },    
    //取消冒泡
    stopPropagation: function(event) {
        if (event.stopPropagation) {
            event.stopPropagation();
        } else {
            event.cancelBubble = true;
        }
    }
};

//先用EventUtil.getEvent()获取事件对象
var event = EventUtil.getEvent(event);
//调用,依次传入对象,事件,函数名
EventUtil.addHandler(btn,'click',handler);