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)

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。