前言

在JS的学习过程中，我们会了解到DOM，了解到元素，那么如何对一个元素进行绑定事件呢？事件绑定完之后可不可以解绑呢？都有什么方法呢？这都是今天我们要学习的内容。

方法

方法一

功能	函数
绑定事件	对象.on事件名字 = 事件处理函数
解绑事件	对象.on事件名字 = null

具体事例：

<input type="button" value="绑定事件" id="btn1" />
        <input type="button" value="解绑事件" id="btn2" />
        <script src="common.js"></script>
        <!--解绑方式1-->
        <script>
            //绑定事件
            my$("btn1").onclick = function(){
                console.log("亲亲");
            };
            //解绑事件
            my$("btn2").onclick = function(){
                my$("btn1").onclick = null;
            };
        </script>

补充：common.js是我自己封装的一个函数，里面具体代码如下：

function my$(id) {
    return document.getElementById(id);
};

方法二

功能	函数
绑定事件	对象.addEventListener(“没有on的事件类型”，命名函数，false)；
解绑事件	对象.removeEventListener(“没有on的事件类型”，函数名字，false)；

具体事例：

<!--解绑方式2-->
        <script>        
            function f1(){
                console.log("第一个");
            }
            function f2(){
                console.log("第二个");
            }
            my$("btn1").addEventListener("click",f1,false);
            my$("btn1").addEventListener("click",f2,false);
            //点击第二个按钮把第一个按钮绑定的事件解绑
            my$("btn2").onclick = function(){
                //解绑事件的时候，需要在绑定事件的时候，使用命名函数
                my$("btn1").removeEventListener("click",f1,false);
            };
        </script>

方法三

功能	函数
绑定事件	对象.attachEvent(“on事件类型”，命名函数)；
解绑事件	对象.detachEvent(“on事件类型”，函数名字)；

具体事例：

<!--解绑方式3-->
        <script>
        function f1(){
            console.log("第一个");
        }
        function f2(){
            console.log("第二个");
        }
        my$("btn1").attachEvent("onclick",f1);
        my$("btn2").attachEvent("onclick",f2);
        my$("btn2").onclick = function(){
            my$("btn1").detachEvent("onclick",f1);
        }
        </script>

方法的不同

首先先说方法一吧，如果用这个方法进行绑定事件，绑定多次，后面的会把前面绑定的事件干掉，就是前面的事件就不起作用了，所以这种方法一般不怎么常用。我们重点来区分一下方法二和方法三：

1.方法名不一样

2.参数个数不一样 addEventListener三个参数，attachEvent两个参数

3.addEventListener 谷歌火狐IE11支持，IE8不支持； attachEvent 谷歌火狐IE11不支持，IE8支持

4.this不同，addEventListener中的this是当前绑定事件的对象，attachEvent中的this是window

5.addEventListener中的事件类型（事件的名字）没有on；attachEvent中的事件类型（事件的名字）有on

兼容代码

<script>
            //绑定事件的兼容
            function addEventListener(element,type,fn){
                if(element.addEventListener){
                    element.addEventListener(type,fn,false);
                }else if(element.attachEvent){
                    element.attachEvent("on"+type,fn);
                }else{
                    element["on"+type] = fn;
                }
            }
            //解绑事件的兼容代码
            //为任意的一个元素，解绑对应的事件
            function removeEventListener(element,type,fnName){
                if(element.removeEventListener){
                    element.removeEventListener(type,fnName,false);
                }else if(element.detachEvent){
                    element.detachEvent("on"+type,fnName);
                }else{
                    element["on"+type]=null;
                }
            }
            function f1(){
                console.log("第一个");
            }
            function f2(){
                console.log("第二个");
            }
            addEventListener(my$("btn1"),"click",f1);
            addEventListener(my$("btn1"),"click",f2);
            my$("btn2").onclick = function(){
                removeEventListener(my$("btn1"),"click",f1);
            };
        </script>