欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

JavaScript注冊(cè)監(jiān)聽(tīng)事件和清除監(jiān)聽(tīng)事件方式詳解

 更新時(shí)間:2023年05月08日 10:53:07   作者:啊啊啊啊啊威  
js中事件監(jiān)聽(tīng)就是利用addEventListener來(lái)綁定一個(gè)事件,這個(gè)用法在jquery中非常常用并且簡(jiǎn)單,但在原生js中比較復(fù)雜,下面這篇文章主要給大家介紹了關(guān)于JavaScript注冊(cè)監(jiān)聽(tīng)事件和清除監(jiān)聽(tīng)事件方式的相關(guān)資料,需要的朋友可以參考下

前言

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

注冊(cè)監(jiān)聽(tīng)事件

傳統(tǒng)方式

語(yǔ)法格式:元素名.on+事件名稱 = function () {函數(shù)代碼}

這種方法只能為元素注冊(cè)一個(gè)事件,如果注冊(cè)多個(gè),那么就會(huì)覆蓋。

這種方式比較簡(jiǎn)單,看一個(gè)案例

點(diǎn)擊事件案例:判斷閏年

我們寫(xiě)一個(gè)輸入框和按鈕,給按鈕注冊(cè)點(diǎn)擊事件,在按鈕點(diǎn)擊的時(shí)候,判斷輸入框里面輸入的值是否是閏年。

 <input type="text" id="inp" />
    <button id="nian">輸入年份后點(diǎn)擊判斷</button>
var nian = document.getElementById("nian");
var inp = document.getElementById("inp");
nian.onclick = function () {
  var a = inp.value;
  if (a == null || a == 0) {
    alert("沒(méi)有輸入年份!");
  } else if (a <= 0) {
    alert("輸入年份有錯(cuò)誤!");
  } else if (a % 400 == 0 || (a % 4 == 0 && a % 100 != 0)) {
    alert("輸入年份為閏年!");
  } else {
    alert("輸入年份不是閏年!");
  }
};

方法監(jiān)聽(tīng)事件注冊(cè)方式

addEventListener()

我們使用addEventListener()來(lái)注冊(cè)監(jiān)聽(tīng)。它可以為一個(gè)事件源注冊(cè)多個(gè)事件。

語(yǔ)法:

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

  • 第一個(gè)參數(shù):事件類型,如click
  • 第二個(gè)參數(shù):回調(diào)函數(shù),事件發(fā)生后要運(yùn)行的內(nèi)容
  • 第三個(gè)參數(shù):布爾值,默認(rèn)是false,決定是否支持冒泡

注意,在在標(biāo)準(zhǔn)瀏覽器瀏覽器下,addEventListener()是可用的。但是在ie8之下addEventListener()無(wú)法使用。這時(shí)候我們使用attachEvent()來(lái)注冊(cè)監(jiān)聽(tīng)事件。

attachEvent()

語(yǔ)法:

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

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

addEventListener()與attachEvent()的兼容

在不同瀏覽器下,存在注冊(cè)監(jiān)聽(tīng)事件的兼容問(wèn)題,我們可以寫(xiě)一個(gè)函數(shù)來(lái)解決這個(gè)問(wèn)題,把函數(shù)封裝起來(lái)方便隨時(shí)調(diào)用,這樣也可以加深兩個(gè)方法的理解。

代碼如下,我們給按鈕注冊(cè)點(diǎn)擊事件。 注釋有詳解。

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

移除監(jiān)聽(tīng)事件

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

我們?cè)谑褂?元素名.on+事件名稱 = function () {函數(shù)代碼}的方式注冊(cè)監(jiān)聽(tīng)事件的時(shí)候,只需要使用

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

移除方法監(jiān)聽(tīng)事件注冊(cè)方式

removeEventListener()

語(yǔ)法:元素名.removeEventListener('事件名稱',函數(shù))

內(nèi)容分別是:移除哪個(gè)元素(事件源/元素名),通過(guò)什么方式觸發(fā)(事件類型)的什么事件(事件回調(diào))

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

btn.detachEvent()

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

 基本與removeEventListener()相同,但注意事件名稱前面加'on'

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

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

如下:

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

案例:注冊(cè)監(jiān)聽(tīng)與移除事件的結(jié)合

我們寫(xiě)一個(gè)案例,來(lái)實(shí)現(xiàn)注冊(cè)監(jiān)聽(tīng),和移除事件。

首先寫(xiě)兩個(gè)案例,第一個(gè)按鈕注冊(cè)監(jiān)聽(tīng)事件,如點(diǎn)擊事件,點(diǎn)擊一下就打印一串文字。為第二個(gè)按鈕注冊(cè)點(diǎn)擊事件,第二個(gè)按鈕點(diǎn)擊后移除事件,使得第一個(gè)按鈕點(diǎn)擊后無(wú)法打印文字。

也要注意注冊(cè)監(jiān)聽(tīng)和移除事件的兼容,一并寫(xiě)入代碼中。

代碼如下:

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

總結(jié)

到此這篇關(guān)于JavaScript注冊(cè)監(jiān)聽(tīng)事件和清除監(jiān)聽(tīng)事件的文章就介紹到這了,更多相關(guān)js注冊(cè)監(jiān)聽(tīng)事件和清除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

最新評(píng)論