原生js--事件绑定、事件监听器及事件解绑

一、事件绑定

事件绑定方式有三种

 1、内联模式

　　这种方式是最简单直接的事件处理方式，在内联模型中事件处理函数是HTML标签的属性，用于处理指定事件，但不符合结构、样式、行为相分离的原则。

//以onclick为例
<button onclick="clickMe()">点我</button>
<script>
　　function clickMe(){
　　　　alert("你点我了！！")
　　}
</script>

2、外联模式

　　由于内联模式违反了代码层次分离原则，为了让代码看起来更简洁直观，我们可以直接在js代码中处理事件

<button id="btn">点我</button>
<script>
    btn.onclick = function(){
        alert("你还点我！！");
　　}
</script>

　　这两种方式都使用的是“on+事件类型”绑定事件的方法，而使用这种方法绑定有弊端：同一事件只能给同一元素绑定一次

　　也就是说，在内联模式中，一个元素绑定多个事件时，只会执行第一个事件，而在外联模式中，一个元素绑定多个事件时，后面的事件会覆盖前面的事件

如下代码（外联模式）：

<button id="btn">点我</button>
<script>
　　btn.onclick=function(){
　　    alert("第一次点我！");
　　}
　　btn.onclick=function(){
　　    alert("第二次点我！");　　//两个相同的点击事件
　　}
</script>

3、事件监听器

为了解决前面两种方式所带来的问题，我们就有了第三种绑定事件的方式，也就是事件监听器

二、事件监听器

addEventListener()语法：

obj.addEventListener(type,handle,false);
// 参数1：给元素绑定的事件类型，如：click，mouseover。。。
// 参数2：处理事件的函数
// 参数3：是否在冒泡阶段执行，true在捕获阶段执行，false在冒泡阶段执行，可选项

注意点：1、这一绑定方式可以给同一元素绑定多个事件，不会发生覆盖的情况。如果给同一个元素绑定多个事件，那么采用先绑定先执行的规则 顺序执行
　　　　2、在绑定事件的时候，事件类型前不需带 on 
　　　　3、第三个参数表示是否在捕获阶段执行
　　　　4、可以使用 removeEventListener() 来移除之前绑定过的事件
例：

<button id="btn">点我</button>
<script>
btn.addEventListener("click",handle,false);        //第一次绑定
function handle(){
    alert("第一次点击");
}
btn.addEventListener("click",handle1,false);        //第二次绑定
function handle1(){
    alert("第二次点击");
}
</script>

可以看到，使用事件监听器的方式对同一元素多次绑定的事件都可以执行！

当然啦，这么好用的东西怎么可能没有兼容问题呢，低版本IE中没有事件监听，那么针对于IE低版本浏览器的事件监听器绑定方式也是有的：

attachEvent()语法：

obj.attachEvent('on' + type,handle);
// type表示事件类型
// handle表示处理事件的函数

　注意点：1、与addEventListener()不同的是，在绑定事件时事件类型前一定要加 on 

　　　　　2、而与addEventListener()第二个不同点在于，如果给同一元素绑定多个事件时，采用先绑定后执行的规则  倒序执行

　　　　　3、attachEvent()是针对低版本IE的写法，低版本IE中不存在捕获阶段，所以没有第三个参数

　　　　　4、使用detachEvent()移除绑定过的事件

　既然针对于不同浏览器的事件监听器都有了，我们就可以有兼容写法了

　看好了，要出大招了！！

事件监听器绑定兼容写法

function bind(ele,type,handle){　　// 要绑定的事件对象 ，事件类型 ， 事件处理函数
    if(ele.addEventListener){
        ele.addEventListener(type,handle,false);
    }else if(ele.detachEvent){
        ele.attachEvent("on"+type,handle);
    }else{
        ele["on" + type] = callback;
    }
}    

三、事件解绑

　一般情况下，执行过的代码内存会自动回收，但是事件在执行完后，内存没有自动回收，这样会导致内存一直占用，代码执行效率降低，所以我们就要手动回收这个事件 -- 事件解绑

　1、使用“on+事件类型”方式绑定的事件，只要给他赋值为 null ，就能解绑

un.onclick=function(){
    btn.onclick=null; // 给事件赋值一个空，就解绑了
}

　2、使用事件监听器的方式绑定的事件解绑方式

　　针对于addEventListener()的解绑方式

removeEventListener(ele,type, handle)
// 第一个参数：要解绑的事件对象
// 第二个参数：事件类型
// 第三个参数：事件处理函数

　　

　针对于attachEvent()的解绑方式

detachEvent(ele,type, handle)
// 第一个参数：要解绑的事件对象
// 第二个参数：事件类型
// 第三个参数：事件处理函数

　事件绑定有兼容写法，事件解绑同样有兼容写法：

function unbind(ele,type,handle){
　　if(ele.addEventListener){
　　　　ele.removeEventListener(type,handle,false);
　　}else if(ele.detachEvent){
　　　　ele.detachEvent("on"+type,handle);
　　}else{
　　　　ele["on" + type] = null;
　　}
}    

事件解绑通常适用于在事件执行一次后，就不再执行了，就可以在下一次动作中进行解绑

事件解绑有利于性能优化