JavaScript注冊(cè)監(jiān)聽事件和清除監(jiān)聽事件方式詳解
前言
JavaScript中有兩種方法可以注冊(cè)監(jiān)聽事件,一種是傳統(tǒng)的注冊(cè)方式,on+事件名稱的注冊(cè)方法,如btn.onclick,還有方法監(jiān)聽事件注冊(cè)方式, addEventListener()和ie8以下的attachEvent()。
注冊(cè)監(jiān)聽事件
傳統(tǒng)方式
語法格式:元素名.on+事件名稱 = function () {函數(shù)代碼}
這種方法只能為元素注冊(cè)一個(gè)事件,如果注冊(cè)多個(gè),那么就會(huì)覆蓋。
這種方式比較簡(jiǎn)單,看一個(gè)案例
點(diǎn)擊事件案例:判斷閏年
我們寫一個(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("沒有輸入年份!");
} else if (a <= 0) {
alert("輸入年份有錯(cuò)誤!");
} else if (a % 400 == 0 || (a % 4 == 0 && a % 100 != 0)) {
alert("輸入年份為閏年!");
} else {
alert("輸入年份不是閏年!");
}
};



方法監(jiān)聽事件注冊(cè)方式
addEventListener()
我們使用addEventListener()來注冊(cè)監(jiān)聽。它可以為一個(gè)事件源注冊(cè)多個(gè)事件。
語法:
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()無法使用。這時(shí)候我們使用attachEvent()來注冊(cè)監(jiān)聽事件。
attachEvent()
語法:
btn.attachEvent('onclick',function(){函數(shù)代碼塊},false)
參數(shù)是基本相同,注意attachEvent()的第一個(gè)參數(shù),需要在事件前面加'on'。
addEventListener()與attachEvent()的兼容
在不同瀏覽器下,存在注冊(cè)監(jiān)聽事件的兼容問題,我們可以寫一個(gè)函數(shù)來解決這個(gè)問題,把函數(shù)封裝起來方便隨時(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)聽事件
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)方法的移除
我們?cè)谑褂?元素名.on+事件名稱 = function () {函數(shù)代碼}的方式注冊(cè)監(jiān)聽事件的時(shí)候,只需要使用
元素名.on+事件名稱 =null,就可以移除監(jiān)聽事件。
移除方法監(jiān)聽事件注冊(cè)方式
removeEventListener()
語法:元素名.removeEventListener('事件名稱',函數(shù))
內(nèi)容分別是:移除哪個(gè)元素(事件源/元素名),通過什么方式觸發(fā)(事件類型)的什么事件(事件回調(diào))
removeEventListener()是常用的移除監(jiān)聽事件的方法。但在ie8以下,它是不可以使用的。所以我們使用detachEvent()來為ie8之下的瀏覽器清除監(jiān)聽事件。
btn.detachEvent()
元素名.detachEvent('on+事件名稱, 函數(shù))
基本與removeEventListener()相同,但注意事件名稱前面加'on'
removeEventListener()與btn.detachEvent()的兼容
我們可以效仿addEventListener()與attachEvent()的兼容解決辦法寫一個(gè)函數(shù)。
如下:
function getEvent(element, eventName, callback) {
if (element.removeEventListener) {
//標(biāo)準(zhǔn)瀏覽器的注冊(cè)監(jiān)聽
element.removeEventListener(eventName, callback)
} else {
//非標(biāo)準(zhǔn)瀏覽器的注冊(cè)監(jiān)聽
element.detachEvent('on' + eventName, callback)
}
}
getEvent(btn,'click',fun)案例:注冊(cè)監(jiān)聽與移除事件的結(jié)合
我們寫一個(gè)案例,來實(shí)現(xiàn)注冊(cè)監(jiān)聽,和移除事件。
首先寫兩個(gè)案例,第一個(gè)按鈕注冊(cè)監(jiān)聽事件,如點(diǎn)擊事件,點(diǎn)擊一下就打印一串文字。為第二個(gè)按鈕注冊(cè)點(diǎn)擊事件,第二個(gè)按鈕點(diǎn)擊后移除事件,使得第一個(gè)按鈕點(diǎn)擊后無法打印文字。
也要注意注冊(cè)監(jiān)聽和移除事件的兼容,一并寫入代碼中。
代碼如下:
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)聽事件
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)聽事件和清除監(jiān)聽事件的文章就介紹到這了,更多相關(guān)js注冊(cè)監(jiān)聽事件和清除內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
Js數(shù)組扁平化實(shí)現(xiàn)方法代碼總匯
這篇文章主要介紹了Js數(shù)組扁平化實(shí)現(xiàn)方法代碼總匯,文中通過示例代碼介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11
JS實(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)呢,接下來通過本文給大家分享js點(diǎn)擊發(fā)送驗(yàn)證碼 xx秒后重新發(fā)送功能,需要的朋友參考下吧2019-07-07
微信小程序swiper實(shí)現(xiàn)滑動(dòng)放大縮小效果
這篇文章主要介紹了微信小程序swiper實(shí)現(xiàn)滑動(dòng)放大縮小效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2018-11-11
JavaScript Array對(duì)象擴(kuò)展indexOf()方法
JavaScript中Array對(duì)象沒有indexOf()方法,可通過下面的代碼擴(kuò)展,需要的朋友可以參考下2014-05-05
js獲取checkbox復(fù)選框選中的選項(xiàng)實(shí)例
這篇文章主要介紹了js如何獲取checkbox復(fù)選框選中的選項(xiàng),比較適合新手,需要的朋友可以參考下2014-08-08
javascript利用apply和arguments復(fù)用方法
這篇文章主要介紹了javascript利用apply和arguments復(fù)用方法,有需要的朋友可以參考一下2013-11-11
JavaScript判斷表單提交時(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庫,可以用在瀏覽器和node.js中。并且提供了很多便捷的功能,但如果我們想基于axios 擴(kuò)展一些自己的數(shù)據(jù)請(qǐng)求方式(例如某些APP內(nèi)專屬的數(shù)據(jù)請(qǐng)求方式等),并能夠使用上axios提供的便捷功能,該怎么自定義一個(gè)適配器adapter2021-05-05
layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法
今天小編就為大家分享一篇layUI使用layer.open,在content打開數(shù)據(jù)表格,獲取值并返回的方法,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2019-09-09

