JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式詳解

更新時間：2023年05月08日 10:53:07 作者：啊啊啊啊啊威

js中事件監(jiān)聽就是利用addEventListener來綁定一個事件,這個用法在jquery中非常常用并且簡單,但在原生js中比較復雜,下面這篇文章主要給大家介紹了關于JavaScript注冊監(jiān)聽事件和清除監(jiān)聽事件方式的相關資料,需要的朋友可以參考下

前言

JavaScript中有兩種方法可以注冊監(jiān)聽事件，一種是傳統(tǒng)的注冊方式，on+事件名稱的注冊方法，如btn.onclick,還有方法監(jiān)聽事件注冊方式， addEventListener()和ie8以下的attachEvent()。

注冊監(jiān)聽事件

傳統(tǒng)方式

語法格式：元素名.on+事件名稱 = function () {函數代碼}

這種方法只能為元素注冊一個事件，如果注冊多個，那么就會覆蓋。

這種方式比較簡單，看一個案例

點擊事件案例：判斷閏年

我們寫一個輸入框和按鈕，給按鈕注冊點擊事件，在按鈕點擊的時候，判斷輸入框里面輸入的值是否是閏年。

 <input type="text" id="inp" />
    <button id="nian">輸入年份后點擊判斷</button>

var nian = document.getElementById("nian");
var inp = document.getElementById("inp");
nian.onclick = function () {
  var a = inp.value;
  if (a == null || a == 0) {
    alert("沒有輸入年份！");
  } else if (a <= 0) {
    alert("輸入年份有錯誤！");
  } else if (a % 400 == 0 || (a % 4 == 0 && a % 100 != 0)) {
    alert("輸入年份為閏年！");
  } else {
    alert("輸入年份不是閏年！");
  }
};

方法監(jiān)聽事件注冊方式

addEventListener()

我們使用addEventListener()來注冊監(jiān)聽。它可以為一個事件源注冊多個事件。

語法：

btn.addEventListener('click', function () {函數代碼塊}, false)

第一個參數：事件類型，如click
第二個參數：回調函數，事件發(fā)生后要運行的內容
第三個參數：布爾值，默認是false，決定是否支持冒泡

注意，在在標準瀏覽器瀏覽器下，addEventListener()是可用的。但是在ie8之下addEventListener()無法使用。這時候我們使用attachEvent()來注冊監(jiān)聽事件。

attachEvent()

語法：

btn.attachEvent('onclick',function(){函數代碼塊},false)

參數是基本相同，注意attachEvent()的第一個參數，需要在事件前面加'on'。

addEventListener()與attachEvent()的兼容

在不同瀏覽器下，存在注冊監(jiān)聽事件的兼容問題，我們可以寫一個函數來解決這個問題,把函數封裝起來方便隨時調用，這樣也可以加深兩個方法的理解。

代碼如下，我們給按鈕注冊點擊事件。注釋有詳解。

var btn = document.getElementById('btn')//獲取按鈕
function clicks(controls, events, buer) {//三個形參
            if (controls.addEventListener) {//判斷addEventListener是否可以使用
                controls.addEventListener(events, function () {//添加監(jiān)聽事件
                    console.log('標準瀏覽器');//打印輸出
                }, buer)
            } else {//判斷不兼容addEventListener，所以使用attachEvent
                controls.attachEvent('on' + events, function () {//注意不要忘了這個on
                    console.log('非標準瀏覽器');
                }, buer)
            }
        }
        clicks(btn, 'click', false)//調用與傳參

移除監(jiān)聽事件

傳統(tǒng)方法的移除

我們在使用元素名.on+事件名稱 = function () {函數代碼}的方式注冊監(jiān)聽事件的時候，只需要使用

元素名.on+事件名稱 =null，就可以移除監(jiān)聽事件。

移除方法監(jiān)聽事件注冊方式

removeEventListener（）

語法：元素名.removeEventListener('事件名稱',函數)

內容分別是：移除哪個元素（事件源/元素名），通過什么方式觸發(fā)（事件類型）的什么事件（事件回調）

removeEventListener()是常用的移除監(jiān)聽事件的方法。但在ie8以下，它是不可以使用的。所以我們使用detachEvent()來為ie8之下的瀏覽器清除監(jiān)聽事件。

btn.detachEvent（）

元素名.detachEvent('on+事件名稱, 函數)

基本與removeEventListener（）相同，但注意事件名稱前面加'on'

removeEventListener()與btn.detachEvent()的兼容

我們可以效仿addEventListener()與attachEvent()的兼容解決辦法寫一個函數。

如下：

function getEvent(element, eventName, callback) {
if (element.removeEventListener) {
    //標準瀏覽器的注冊監(jiān)聽
    element.removeEventListener(eventName, callback)
} else {
    //非標準瀏覽器的注冊監(jiān)聽
    element.detachEvent('on' + eventName, callback)
}
}
 
getEvent(btn,'click',fun)

案例：注冊監(jiān)聽與移除事件的結合

我們寫一個案例，來實現注冊監(jiān)聽，和移除事件。

首先寫兩個案例，第一個按鈕注冊監(jiān)聽事件，如點擊事件，點擊一下就打印一串文字。為第二個按鈕注冊點擊事件，第二個按鈕點擊后移除事件，使得第一個按鈕點擊后無法打印文字。

也要注意注冊監(jiān)聽和移除事件的兼容，一并寫入代碼中。

代碼如下：

        var btn = document.getElementById('btn')
        var btn1 = document.getElementById('btn1')
        function fun() {//函數：打印一串文字
            console.log('標準瀏覽器');
        }
        function fn() {//函數：打印一串文字
            console.log('非標準瀏覽器');
        }
        function clicks(controls, events, buer) {//為按鈕1注冊點擊事件的兼容
            if (controls.addEventListener) {
                controls.addEventListener(events, fun, buer)//調用之前的打印函數
                console.log('添加了點擊事件');
            } else {
                controls.attachEvent('on' + events, fn, buer)
                console.log('添加了點擊事件');
            }
        }
        clicks(btn, 'click', false)//函數調用
        btn1.onclick = function () {//為按鈕2注冊監(jiān)聽事件
            function rem(controls,events, functionname) {//為按鈕2注冊移除事件的兼容
                if (controls.removeEventListener) {
                    controls.removeEventListener(events, functionname)
                } else {
                    controls.detachEvent('on' + events, functionname)
                }
            } 
            rem(btn, 'click', fun)//函數調用
            console.log('現在清除了按鈕1的點擊事件');
 
        }