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

时间 2020-01-21

标签 javascript 绑定事件解除栏目 JavaScript 繁體版

原文原文链接

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

1、事件概述

一、事件的几个概念

· 事件javascript

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

事件处理程序java

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

事件类型dom

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

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

有一点须要引发注意，这一类事件不会发生冒泡！.net

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

操做时所触发的。orm

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

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

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

二、事件三要素

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

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

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

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

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

2、绑定事件、解绑事件

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

一、直接在html元素上进行绑定事件。
二、用 on 绑定事件。
三、用 addEventListener、attachEvent 绑定事件。

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

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

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

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

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

二、用 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 只能绑定一个同类型事件，后者会覆盖前者，不一样类型的事件能够绑定多个。

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

三、 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、事件的兼容

上面说了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>

运行结果

从运行结果咱们很明显能够得出的结论:

一、一开始绑定事件的按钮 绑定了两个相同的事件。而且发现并无发生事件覆盖，都成功了。
二、当点击解绑按钮后,它解绑是绑定按钮的第一个事件。
三、此时再点击绑定事件的按钮，发现只绑定了一个事件，由于另外一个事件已经被解绑了。

参考

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

二、JS事件绑定的经常使用方式实例总结

三、javascript 中的事件机制

你若是愿意有所做为，就必须善始善终。(20)