原生js实现事件的绑定和解绑以及兼容代码

原生js的事件绑定有以下几种方法：

1.通过HTML属性处理函数的绑定

用法：

    <button οnclick="a()">按钮</button>
    <script>
    function a(){
    console.log("我要变成大佬");
    };
    </script>

2.通过JavaScript对象属性来绑定

用法：

    <script>
    var btn = document.getElementById('btn');
    
    btn.onclick = function(){//匿名函数
    console.log("我要变成大佬");
    };
    </script>

但是这种方法的缺陷就是只能对一个元素的一个事件进行绑定，而且会出现覆盖的效果，只会执行最后面绑定的事件。

3.通过addEventListener(type,fn,false)方法绑定

参数：
type：事件类型，如单击事件：“click”
fn：方法或方法名
false：事件处理阶段控制。false：事件冒泡阶段，true:事件捕获阶段

用法：

        <script>
        document.getElementById('btn').addEventListener("click",function(){
                     console.log("越来越帅");
                 },false);//false表示默认事件冒泡阶段
   		</script>

解绑：通过removeEventListener(type,fnName,false)

参数：
type：事件类型
fnName:(注意)只能是方法名
false：同上

用法：

       <script>
       		function a(){
       		console.log("越来越帅");
       		};
        	document.getElementById('btn').addEventListener("click",a,false);
        	document.getElementById('btn').removeEventListener("click",a,false);
    	</script>

这种方法有兼容性问题
支持情况：火狐 谷歌 ie11支持 ie8不支持

4.通过attachEvent(“on”+type,fn)方法绑定

参数：
type：事件类型，如单击事件：“click”
fn：方法或方法名
用法：

    <script>
    document.getElementById('btn').attachEvent("on"+"click",function(){
                 console.log("越来越帅");
             });
	</script>

解绑：通过detachEvent(“on”+type,fnName)

参数：
type：on+事件类型
fnName:(注意)只能是方法名
用法：

       <script>
       		function a(){
       		console.log("越来越帅");
       		};
        	document.getElementById('btn').attachEvent(''on"+"click",a);
        	document.getElementById('btn').detachEvent("ob"+"click",a);
    	</script>

这种方法也有兼容性问题
支持情况：火狐 谷歌 ie11不支持 ie8支持

附加：第3种和第4种的对比

相同点：

1. 都能为元素绑定事件

不同点：

1. 命名： addEventListener(); attachEvent()
2. 参数：addEventListener(“方法类型”，方法名，false)。 attachEvent(“on+方法类型”，函数名)
3. 兼容性：addEventListener() 火狐 谷歌 ie11支持 ie8不支持。 attachEvent() 谷歌火狐不支持，ie8支持 ie11 不支持
4. this：addEventListener(); 当前要绑定对象。attachEvent(): 当前windows对象
5. 事件参数类型：addEventListener();中没有”on“，attachEvent();中是”on+”事件类型

事件绑定和解绑的兼容代码：

 <script>
        //绑定事件兼容代码：
        //element：要绑定元素
        //type:事件类型
        //fn:方法或者方法名
        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;
            }

        }
        //解绑事件兼容代码:
        //element：要绑定元素
        //type:事件类型
        //fn:方法名
        function removeEventListener(element, type, fnName) {
            if (element.removeEventListener) //google 火狐 ie11
            {
                element.removeEventListener(type, fnName, false);
            } else if (element.detachEvent) //ie8
            {
                element.detachEvent("on" + type, fnName);
            } else {
                element["on" + type] = null;
            }
        }
    </script>

如有不清楚的欢迎留言或者私信我。

觉得写的不错的，也可以关注我，我会一直发一些有关前端的学习笔记。