JavaScript注冊(cè)監(jiān)聽(tīng)事件和清除監(jiān)聽(tīng)事件方式詳解
前言
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)文章
Js數(shù)組扁平化實(shí)現(xiàn)方法代碼總匯
這篇文章主要介紹了Js數(shù)組扁平化實(shí)現(xiàn)方法代碼總匯,文中通過(guò)示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11JS實(shí)現(xiàn)點(diǎn)擊發(fā)送驗(yàn)證碼 xx秒后重新發(fā)送功能
在一些注冊(cè)類的網(wǎng)站,經(jīng)常遇到這樣的需求,點(diǎn)擊發(fā)送驗(yàn)證碼,xx秒后重新發(fā)送,這樣的功能怎么實(shí)現(xiàn)呢,接下來(lái)通過(guò)本文給大家分享js點(diǎn)擊發(fā)送驗(yàn)證碼 xx秒后重新發(fā)送功能,需要的朋友參考下吧2019-07-07微信小程序swiper實(shí)現(xiàn)滑動(dòng)放大縮小效果
這篇文章主要介紹了微信小程序swiper實(shí)現(xiàn)滑動(dòng)放大縮小效果,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒(méi)有indexOf()方法,可通過(guò)下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05js獲取checkbox復(fù)選框選中的選項(xiàng)實(shí)例
這篇文章主要介紹了js如何獲取checkbox復(fù)選框選中的選項(xiàng),比較適合新手,需要的朋友可以參考下2014-08-08javascript利用apply和arguments復(fù)用方法
這篇文章主要介紹了javascript利用apply和arguments復(fù)用方法,有需要的朋友可以參考一下2013-11-11JavaScript判斷表單提交時(shí)哪個(gè)radio按鈕被選中的方法
這篇文章主要介紹了JavaScript判斷表單提交時(shí)哪個(gè)radio按鈕被選中的方法,實(shí)例分析了javascript操作表單radio按鈕的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-03-03如何實(shí)現(xiàn)axios的自定義適配器adapter
Axios是一個(gè)非常優(yōu)秀的基于promise的HTTP庫(kù),可以用在瀏覽器和node.js中。并且提供了很多便捷的功能,但如果我們想基于axios 擴(kuò)展一些自己的數(shù)據(jù)請(qǐng)求方式(例如某些APP內(nèi)專屬的數(shù)據(jù)請(qǐng)求方式等),并能夠使用上axios提供的便捷功能,該怎么自定義一個(gè)適配器adapter2021-05-05layUI使用layer.open,在content打開(kāi)數(shù)據(jù)表格,獲取值并返回的方法
今天小編就為大家分享一篇layUI使用layer.open,在content打開(kāi)數(shù)據(jù)表格,獲取值并返回的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09