JavaScript(1)---绑定事件、解除绑定事件

一、事件概述

1、事件的几个概念

· 事件

指的是文档或者浏览器窗口中发生的一些特定交互瞬间。我们可以通过侦听器（或者处理程序）来预定事件，以便触发事件的时候执行相应的代码。

事件处理程序

我们用户在页面中进行的点击动作(click)、鼠标移动动作(mousemove)等，都可以称之为事件名称。响应某个事件的函数则称为事件处理程序，或者叫做事件侦听器。

事件类型

UI事件： load、unload、error、resize、scroll、select，是用户与页面上的元素交互时触发的。

焦点事件：blur、DOMFocusIn、DOMFocusOut、focus、focusin、focusout，在元素获得或失去焦点的时候触发，这些事件当中，最为重要的是blur和focus，

有一点需要引起注意，这一类事件不会发生冒泡！

鼠标与滚轮事件：click、dblclick、mousedown、mouseenter、mouseleave、mousemove、mouseout、mouseover、mouseup，是当用户通过鼠标在页面执行

操作时所触发的。

滚轮事件：mousewheel（IE6+均支持）、DOMMouseScroll（FF支持的，与mousewheel效果一样）。是使用鼠标滚轮时触发的。

文本事件：textInput，在文档中输入文本触发。

键盘事件：keydown、keyup、keypress，当用户通过键盘在页面中执行操作时触发。

2、事件三要素

事件有三要素 : 事件源、事件、监听器 。

事件源：在哪个元素上发生的。比如: p标签、a标签、div标签、form表单等等

事件：到底发生了什么事件。click(点击事件)、mouseover(鼠标事件)、focus(焦点事件) 等

监听器：事件源触发事件后，如何回应发生的事件，通常以函数(funtion)的形式来出现。

注意 事件不是以 on 开头的那个名称，如 onclick 不是事件，click才是事件。onclick引用的是一个元素对象的属性，它指向click事件类型绑定的实际处理函数。

二、绑定事件、解绑事件

常用的事件绑定的几种方式有三种：

1、直接在html元素上进行绑定事件。

2、用 on 绑定事件。

3、用 addEventListener、attachEvent 绑定事件。

1、直接在 html 元素上进行绑定

即以属性的方式直接写在行内

<input id="btn" type="button" onclick="test();" /> <!--点击按钮 触发事件-->

这样有个很大的缺点就是：

HTML与js代码紧密耦合。如果要更换事件，就要改动两个地方:HTML代码和JS代码，这就不利于后期代码的维护。

2、用 on 绑定

兼容性：在IE，FF，Chrome，Safari，Mozilla，Opera下都适用。

<body>

  <div id="id">on绑定事件</div>

  <script>

    var div=document.getElementById('id');

    // 甲

    div.onclick=function(){

        console.log('甲需要红背景');

        div.setAttribute('style', 'background: #ff0000');

    };

    // 乙

    div.onclick=function(){

        console.log('乙需要黄背景');

        div.setAttribute('style', 'background: #ffff00');

    };

    //这里最总只会输出 '乙需要黄背景' 因为用on绑定事件 同一事件下面会覆盖上面的

    div.onclick=null;  //解绑只要事件 = null 就可以了

  </script>

</body>

优点：它最大的优点是就是兼容性很好，所有浏览器都支持。

缺点：同一个 dom 元素上，on 只能绑定一个同类型事件，后者会覆盖前者，不同类型的事件可以绑定多个。

这里就有一个问题，无法允许团队不同人员对同一元素监听同一事件但做出不用的响应。

3、 addEventListener、attachEvent 绑定事件

同一个 dom 元素上，用 addEventListener、attachEvent 可以绑定多个同类型事件。

但是，addEventListener 事件执行顺序按照事件绑定的先后顺序执行；attachEvent 事件执行顺序则是随机的。

1）addEventListener

var oBox = document.getElementById("container");

//绑定事件

oBox.addEventListener("click",fn(),false);

//解绑事件

oBox.removeEventListener("click",fn(),false);

function fn(){//执行代码}

参数说明

第一个参数：事件名称 比如onclick  onmouseover

第一个参数：作为事件处理程序的函数

第一个参数：若为false,函数在冒泡阶段执行;若为true,函数在捕获阶段执行。默认为false。(有关冒泡和捕获单独抽时间讲)

注意：removeEventListener 第二个参数要和 addEventListener 指向 同一个函数 才能解绑成功。

2）attachEvent

var oBox = document.getElementById("container");

//绑定

oBox.attach("click",fn());

//解绑

oBox.detach("click",fn());

function fn(){//执行函数}

3）区别

总结下 addEventListener、attachEvent的区别

 1)参数个数不一致

   addEventListener三个参数,attachEvent两个参数

 2)兼容问题

   addEventListener 谷歌,火狐,IE11支持,IE8不支持

   attachEvent 谷歌火狐不支持,IE11不支持,IE8支持

 3)this指向不同

   addEventListener 中的this是当前绑定事件的对象

   attachEvent中的this是window

 4)事件命名不同

   addEventListener中事件的类型(事件的名字)没有on

   attachEvent中的事件的类型(事件的名字)有on

这里再说下 addEventListener、attachEvent相对于上面两种绑定事件的优缺点

优点 它们可以支持 绑定多个同类型事件

缺点 兼容性并不好,它们只兼容相对应的浏览器才有用。

三、事件的兼容

上面说了3种绑定事件和解绑事件的方法,如果实际开发中如果只使用一种方法,那么会产生要么无法满足同一元素监听同一事件但做出不用的响应，要么系统的兼容性会有问题。

所以需要一个兼容的方法。这里举一个完整的例子，包含兼容绑定事件和兼容解绑事件，也看下解绑的含义是什么。

完整代码

<!DOCTYPE html>

<html lang="en">

<head>

  <meta charset="UTF-8">

  <title>事件绑定和解绑</title>

</head>

<body>

<input type="button" value="绑架事件" id="btn1"/>

<input type="button" value="解绑事件" id="btn2"/>

<script>

  //第一个按钮 同时绑定两个相同事件 执行不同方法

  addEventListener(my$("btn1"),"click",f1);

  addEventListener(my$("btn1"),"click",f2);

  //第二个按钮点击后 让第一个按钮第一个事件解绑

  my$("btn2").onclick=function () {

    removeEventListener(my$("btn1"),"click",f1);

  };

    function f1() {

    alert("第一个事件");

  }

   function f2() {

    alert("第二个事件");

  }

function my$(id) {

    return document.getElementById(id);

}

  //绑定事件的兼容

  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;

    }

  }

</script>

</body>

</html>

运行结果

从运行结果我们很明显可以得出的结论:

1、一开始绑定事件的按钮 绑定了两个相同的事件。并且发现并没有发生事件覆盖，都成功了。

2、当点击解绑按钮后,它解绑是绑定按钮的第一个事件。

3、此时再点击绑定事件的按钮，发现只绑定了一个事件，因为另一个事件已经被解绑了。

参考

1、JS中几种绑定事件的方式

2、JS事件绑定的常用方式实例总结

3、javascript 中的事件机制

你如果愿意有所作为，就必须有始有终。(20)