4.4、元素的事件绑定与取消事件的方式

一、给元素绑定事件，并且设置是否捕获 及IE的兼容

        var odiv = document.getElementsByTagName('div')[0]

        function fn1() {
            console.log('1')
        }

        function fn2() {
            console.log('2')
        }

//绑定点击事件 也可以绑定多个事件
// 元素.addEventListener('事件', 函数, 是否捕获默认false)//1
// odiv.addEventListener('click', fn1, false) //1
// odiv.addEventListener('click', fn2, false) //2
// 先打印的1后打印的2
// IE8及以下不支持addEventListener 而支持attachEvent('事件'，函数)
// odiv.attachEvent('事件', 函数);
// odiv.attachEvent('onclick', fn1); //1
// odiv.attachEvent('onclick', fn2); //2
// 先打印的2后打印的1
// addEventListener和 attachEvent区别
// 1) attachEvent 没有捕获 事件前面要加on 执行顺序是 从下往上执行
// 2)addEventListener 有捕获 默认false

二、封装兼容绑定事件的函数

addEvent(odiv, 'click', fn1)
addEvent(odiv, 'click', fn2)
    // 封装函数
function addEvent(obj, event, fn) {
    if (obj.addEventListener) {
        obj.addEventListener(event, fn, false)
    } else {
        obj.attachEvent('on' + event, fn)
    }
}

    // 上述封装的方法还有问题：this的指向不确定

三、取消事件的方式
普通的绑定事件的取消
odiv.onclick = function() {
console.log(‘普通的绑定形式1’)
}
odiv.onclick = function() {
console.log(‘普通的绑定形式2’)
}
odiv.onclick = null;
取消 // odiv.onclick = null;

    addEventListenner事件的取消

odiv.addEventListener(‘click’, fn1, false)
odiv.removeEventListener(‘click’, fn1, false)

取消事件的兼容处理
// 取消事件的兼容
function removeEvent(obj, event, fn) {
if (obj.removeEventListener) {
obj.removeEventListener(event, fn, false)
} else {
obj.detachEvent(‘on’ + event, fn)
}
}