19 事件注册

js中事件监听方法总共有三种，分别如下所示：

element.addEventListener(type, listener[, useCapture]); // IE6~8不支持，支持事件冒泡和捕获
element.attachEvent(’on’ + type, listener); // IE6~10，IE11不支持，只支持事件冒泡
element[’on’ + type] = function(){} // 所有浏览器，只支持事件冒泡，不支持对同一个元素的同一个事件注册多个事件监听器

不是所有的事件都能冒泡，例如：blur、focus、load、unload。

跨浏览器绑定事件

function addHandler(element, type, handler) { //绑定事件
    if (element.addEventListener) { // IE9以下不兼容
        element.addEventListener(type, handler, false)
    } else if (element.attachEvent) { //IE独有
        element.attachEvent('on' + type, handler)
    } else {
        element['on' + type] = handler; //一个元素只能绑定一个处理程序
    }
}

跨浏览器取消绑定事件

和绑定事件的处理基本一致，有一个注意点：
传入的handler必须与绑定事件时传入的相同（指向同一个函数）

function removeHandler(element, type, handler) { //移除事件
    if (element.removeEventListener) { //addEventListener
        element.removeEventListener(type, handler, false)
    } else if (element.detachEvent) { //attachEvent
        element.detachEvent('on' + type, handler)
    } else {
        element['on' + type] = null;

    }
}

跨浏览器阻止默认行为

function preventDefault(event) {
    if (event.preventDefault) {
        event.preventDefault()
    } else {
        event.returnValue = false;
    }
}

跨浏览器停止冒泡

function stoppropagation(event) {
    if (event.stopPropagation) {
        event.stopPropagation()
    } else {
        evenvt.cancelBubble = true;
    }
}

获取事件和目标

function getEvent(event) {
    return event ? event: window.event;
}
function getTarget(event) {
    return event.target || event.srcElement
}

026_结果

跨浏览器绑定事件

跨浏览器取消绑定事件

跨浏览器阻止默认行为

跨浏览器停止冒泡

获取事件和目标

猜你喜欢