事件绑定与解除绑定

事件：点击、keydown、拖拽
绑定事件的意思是：绑定事件处理函数

 	<div></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        // div具有点击事件  后面的function是事件触发的方法
        div.onclick = function(){

        }
    </script>

事件处理有三种方法
1、on+‘event-type’ 句柄的写法 兼容性最好
this指向dom元素

2、addEventListener(‘event-type’,function(){},false)
w3c的标准方法，ie9以下不兼容
this指向dom元素

 <div style="width:100px;height:100px;background:rebeccapurple;"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        div.addEventListener('click',function(){
            console.log('a');
        },false);
    </script>
    ```
    同一个函数不可以同一个对象的同一事件绑定多次。

```

解决this指向问题

<div style="width:100px;height:100px;background:red;"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        div.attachEvent('onclick',function(){
            console.log(this);
        });
    </script>
    //输出 [object Window] 

<div style="width:100px;height:100px;background:red;"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        div.attachEvent('onclick',function(){
            handle.call(div);
        });
        function handle(){
            console.log(this);
        }
    </script>
    //输出 [object HTMLDivElement] 

4、写个兼容ie和chrome的

 <div style="width:100px;height:100px;background:red;"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        function addEvent(ele,type,handle){
            if(ele.addEventListener){
                ele.addEventListener(type,handle,false);
            }
            else if(ele.attachEvent){
                ele.attachEvent('on'+type,function(){
                    handle.call(ele);
                });
            }else{
                ele['on'+type] = handle;
            }
        }
        addEvent(div,'click',function(){
            console.log('c');
        });
    </script>

5、解除事件绑定的方法

    <div style="width:100px;height:100px;background:red;"></div>
    <script>
        var div = document.getElementsByTagName('div')[0];
        // 解除事件的三种方法
        // on+'type'
        // div.onclick = function(){
        //     console.log('a');
        // 方法一：
        //     this.onclick = null/''/false; 
        // }
        // div.addEventListener('click',test,false)
        // 方法二：（绑定事件时不能使用匿名函数，否则不能解除事件绑定）
        // div.removeEventListener('click',test,false);
        // function test(){
        //     console.log('c');
        // }
        //  div.attachEvent('onclick',test);
        // 方法三：
        // div.detachEvent('onclick',test);
        // function test(){
        //     console.log('d');
        // }
    </script>