事件绑定与解除

1，绑定事件处理函数的三种方法

1. ele.onXXX = function(event) {}

1. 兼容性很好，但是一个元素的同一个事件只能绑定一个处理程序
2. 基本等同于写在HTML行间上

<div style = "width: 200px;height: 100px;background-color: rgb(90, 80, 80); position:absolute;left: 0;top:0;" onclick = "console.log('a');"></div>
-----------------------------------------------------------------------
var div = document.getElementsByTagName('div')[0];
//1，句柄的方式就是用onXXX的绑定方式
// div.onclick = fucntion () {
//     console.log('a');
// }
//但一个元素的同一个事件上只能绑定一个处理程序

2. obj.addEventListener (type, fn, false);

1. IE9以下不兼容性，可以为一个事件绑定多个处理程序(W3C标准绑定形式)

div.addEventListener('事件类型',处理函数（也可以放的是函数引用test），false)
一个元素的同一个事件上可以绑定多个处理函数

div.addEventListener('click',function(){
    console.log('a');
},false);
div.addEventListener('click',function(){
    console.log('b');
},false);
//a
//a        打印两个是因为虽然它们是两个一模一样的函数，但是它们还是不同的函数

div.addEventListener('click',test,false);
div.addEventListener('click',test,false);
function test(){
    console.log('a');
}
//a         因为test是指向同一个地址函数的引用

3. obj.attachEvent (‘on’ + type, fn);

1. IE独有，一个事件同样可以绑定多个处理程序

2，事件处理程序的内部this指向

1. ele.onXXX = function(event) {}–>程序this指向dom元素本身

2. obj.addEventListener (type, fn, false);–>程序this指向dom元素本身

3. obj.attachEvent (‘on’ + type, fn);–>程序this指向window

让attachEvent的this指向dom元素:

div.attachEvent('onclick',function() {
    handler.call(div);
});
function handler() {
//事件处理程序
}

4 . 给一个dom对象添加该事件类型的处理函数,封装兼容性的addEvent(elem, type, handler)

function addEvent(elem, type, handler) {
    if(elem.addEventListener) {
        elem.addEventListener(type, handler, false);
    }else if(elem.attachEvent){
        elem.attachEvent('on' + type, function () {
            handler.call(elem);
        })
    }else{
        elem['on' + type] = handler;
    }
}

3，解除事件绑定

1. ele.onclick = false/null

div.onclick = fucntion () {
    console.log('a');
}
div.onclick = null;
// 只能执行一次的事件
div.onclick = fucntion () {
    console.log('a');
    this.onclick = null;
}

2. ele.removeEventListener(type, fn, false);

div.addEventListener('click',function(){
    console.log('a');
},false);
div.removeEventListener('click', , false);//不好使，绑定了匿名函数，就无法解除

div.addEventListener('click',test,false);
function tset() {};
div.removeEventListener('click', test, false);

3. ele.detachEvent(‘on’ + type, fn);

若绑定匿名函数，则无法解除