Javascript添加監(jiān)聽(tīng)與刪除監(jiān)聽(tīng)用法詳解
本文實(shí)例講述了Javascript添加監(jiān)聽(tīng)與刪除監(jiān)聽(tīng)的用法。分享給大家供大家參考。具體分析如下：
js中事件監(jiān)聽(tīng)就是利用addEventListener來(lái)綁定一個(gè)事件，這個(gè)用法在jquery中非常常用并且簡(jiǎn)單，但在原生js中比較復(fù)雜，這里整理了addEventListener事件各方法的測(cè)試與例子供大家參考學(xué)習(xí)。
在前兩天做播放器的時(shí)候添加監(jiān)聽(tīng)后刪除監(jiān)聽(tīng)遇到了一點(diǎn)麻煩，刪不掉，后來(lái)看了一下才發(fā)現(xiàn)，參數(shù)需要完全對(duì)應(yīng)，什么叫完全對(duì)應(yīng)呢，換句話說(shuō)：
比如這句，需要傳入三個(gè)參數(shù)，這樣才能夠刪除，為什么一定要這樣，沒(méi)錯(cuò)，蛋疼的地方就在這里：
在add和remove時(shí)，第三個(gè)參數(shù)確實(shí)可以不寫(xiě)，但此時(shí)他們的默認(rèn)情況是不一樣的??！
通常情況下addEventListener是false…
1、 添加自定義事件監(jiān)聽(tīng)
function addEvent(obj,evt,fn){
if(!fn.__EventID){ fn.__EventID=eventHandlesCounter++;}
if(!obj.__EventHandles){ obj.__EventHandles=[]; }
if(!obj.__EventHandles[evt]){
obj.__EventHandles[evt]=[];
if(obj["on"+evt] instanceof Function){
obj.__EventHandles[evt][0]=obj["on"+evt];
obj["on"+evt]=handleEvents;
}
}
obj.__EventHandles[evt][fn.__EventID]=fn;
function handleEvents(){
var fns = obj.__EventHandles[evt];
for (var i=0;i<fns.length;i++)
fns[i].call(this);
}
}
2、自定義刪除事件監(jiān)聽(tīng)
if(!obj.__EventHandles || !obj.__EventHandles[evt] || !fn.__EventID){
return false;
}
if(obj.__EventHandles[evt][fn.__EventID]==fn){
delete obj.__EventHandles[evt][fn.__EventID];
}
}
3. 對(duì)上述方法進(jìn)行修正
if(obj.addEventListener){//優(yōu)先使用W3C事件注冊(cè)
obj.addEventListener(evt,fn,!!useCapture);
}else{
if(!fn.__EventID){fn.__EventID = addEvent.__EventHandlesCounter++;}
if(!obj.__EventHandles){ obj.__EventHandles=[];}
if(!obj.__EventHandles[evt]){
obj.__EventHandles[evt]=[];
if(obj["on"+evt]){
(obj.__EventHandles[evtype][0]=obj["on"+evtype]).__EventID=0;
}
obj["on"+evtype]=addEvent.execEventHandles;
}
}
}
addEvent.__EventHandlesCounter=1;
addEvent.execEventHandles = function(evt){
if(!this.__EventHandles) {return true;}
evt = evt || window.event;
var fns = this.__EventHandles[evt.type];
for (var i=0;i<fns.length;i++){
if(fns[i] instanceof Function){
fns[i].call(this);
}
}
};
function delEvent(obj,evt,fn,useCapture){
if (obj.removeEventListener) {//先使用W3C的方法移除事件處理函數(shù)
obj.removeEventListener(evt,fn,!!useCapture);
}else {
if(obj.__EventHandles){
var fns = obj.__EventHandles[evt];
if(fns){delete fns[fn.__EventID];}
}
}
4、標(biāo)準(zhǔn)化事件對(duì)象
if(!evt.target){
evt.target = evt.srcElement;
evt.preventDefault=fixEvent.preventDefault;
evt.stopPropagation = fixEvent.stopPropagation;
if(evt.type == "mouseover"){
evt.relatedTarget = evt.fromElement;
}else if(evt.type == "mouseout"){
evt.relatedTarget = evt.toElement;
}
evt.charCode =(evt.type == "keypress")?evt.keyCode:0;
evt.eventPhase = 2;
evt.timeStamp = (new Date()).getTime();
}
return evt;
}
fixEvent.preventDefault=function(){ this.returnValue=false;}
fixEvent.stopPropagation=function(){this.cancelBubble = true;};
fixEvent函數(shù)不是單獨(dú)執(zhí)行的，它必須有一個(gè)事件對(duì)象參數(shù)，而且只有事件發(fā)生時(shí)它才被執(zhí)行！最好的方法是把它整合到addEvent函數(shù)的execEventHandles里面。
if (!this.__EventHandles) {return true;}
evt = fixEvent(evt || window.event);//在這里對(duì)其進(jìn)行標(biāo)準(zhǔn)化操作
var fns = this.__EventHandles[evt.type];
for (var i=0;i< fns.length;i++) {
if (fns[i] instanceof Function) {
fns[i].call(this,evt);//并且將其作為事件處理函數(shù)的第一個(gè)參數(shù)
//這樣在事件處理函數(shù)內(nèi)部就可以使用統(tǒng)一的方法訪問(wèn)事件對(duì)象了 } } };
上面是高手寫(xiě)了，下面整理幾個(gè)實(shí)際的監(jiān)聽(tīng)事情的例子
<html>
<head>
<title>test6.html</title>
<script type="text/javascript">
function test(){
window.alert("您投了一次票");
document.getElementById("1").detachEvent("onclick",test);
}
</script>
</head>
<body>
<input type="button" value="投票" id="1"/>
<script type="text/javascript">
document.getElementById("1").attachEvent("onclick",test);
</script>
</body>
</html>
這里使用document.getElementById("1").attachEvent("onclick",test);進(jìn)行動(dòng)態(tài)的事件綁定，使用
document.getElementById("1").detachEvent("onclick",test)
下面再演示一個(gè)時(shí)時(shí)監(jiān)聽(tīng)鍵盤(pán)事件，判斷輸入的是否是數(shù)字，如果不是數(shù)字直接動(dòng)態(tài)提示，然后拒絕其輸入
<html>
<head>
<title>test7.html</title>
<script type="text/javascript">
function test(event){
//用戶(hù)每按下一個(gè)按鍵，就去判斷是不是數(shù)字
if(event.keyCode<48 || event.keyCode > 57){
window.alert("您輸入的不是一個(gè)數(shù)字");
return false;
}
}
</script>
</head>
<body>
<input type="text" onkeypress="return test(event);" />請(qǐng)輸入數(shù)字
</body>
</html>
這里的event就是一個(gè)事件對(duì)象，他能返回很多的信息，具體請(qǐng)參考相關(guān)文檔。
補(bǔ)充:事件監(jiān)聽(tīng)方面的兼容
1. IE使用attachEvent/detachEvent方法來(lái)添加和刪除事件監(jiān)聽(tīng)器；w3c使用addEventListener/removeEventListener方法。
2. IE對(duì)其事件使用onevent的命名方式，而w3c的是event的命名方式。
3. IE事件監(jiān)聽(tīng)器內(nèi)使用的是一個(gè)全局的Event對(duì)象，而w3c是將event對(duì)象作為參數(shù)傳遞給監(jiān)聽(tīng)器。
4. 為了避免觸發(fā)默認(rèn)的事件行為，IE的做法是要求程序員設(shè)置Event對(duì)象中的returnValue屬性值為false，而w3c的做法是執(zhí)行preventDefault方法。
5. IE沒(méi)有提供對(duì)事件捕獲階段的支持。
6. 要停止事件的傳遞，IE的做法是設(shè)置event對(duì)象的cancelBubble為true，而w3c的做法是設(shè)置執(zhí)行stopPropagation方法。
7. IE將事件監(jiān)聽(tīng)器當(dāng)做一個(gè)獨(dú)立的函數(shù)來(lái)調(diào)用，而w3c中它是作為對(duì)象的方法來(lái)調(diào)用的，這表示在ie中事件監(jiān)聽(tīng)器中的this關(guān)鍵字指向的不是事件發(fā)生對(duì)象而是一個(gè)沒(méi)用的全局對(duì)象（window對(duì)象）。
8. IE在使用事件監(jiān)聽(tīng)器方面存在內(nèi)存泄露問(wèn)題。在IE瀏覽器中，如果要為某個(gè)元素創(chuàng)建一個(gè)事件監(jiān)聽(tīng)器，并且在監(jiān)聽(tīng)器中使用該元素，則在用戶(hù)進(jìn)入其他頁(yè)面之前，該監(jiān)聽(tīng)器以及相關(guān)的DOM節(jié)點(diǎn)作占據(jù)的內(nèi)存空間不會(huì)被釋放。
希望本文所述對(duì)大家的javascript程序設(shè)計(jì)有所幫助。
- JavaScript監(jiān)聽(tīng)和禁用瀏覽器回車(chē)事件實(shí)例
- javascript監(jiān)聽(tīng)鼠標(biāo)滾輪事件淺析
- 在JavaScript中監(jiān)聽(tīng)I(yíng)ME鍵盤(pán)輸入事件
- 有道JavaScript監(jiān)聽(tīng)瀏覽器的問(wèn)題
- javascript在事件監(jiān)聽(tīng)方面的兼容性小結(jié)
- javascript過(guò)濾危險(xiǎn)腳本方法
- javascript下過(guò)濾數(shù)組重復(fù)值的代碼
- JavaScript監(jiān)聽(tīng)文本框回車(chē)事件并過(guò)濾文本框空格的方法
相關(guān)文章
js實(shí)現(xiàn)有過(guò)渡漸變效果的圖片輪播相冊(cè)（兼容IE,ff）
這篇文章主要介紹了js實(shí)現(xiàn)有過(guò)渡漸變效果的圖片輪播相冊(cè)，兼容IE、ff，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2016-01-01
在javascript中，hash指的是哈希表，是一種根據(jù)關(guān)鍵字直接訪問(wèn)內(nèi)存存儲(chǔ)位置的數(shù)據(jù)結(jié)構(gòu)，hash就是一個(gè)賦值的方法，但實(shí)際用的并不需要太復(fù)雜，能用的就一點(diǎn)點(diǎn)，寫(xiě)法也非常簡(jiǎn)單，hash有多種寫(xiě)法，本文給大家介紹javascript?hash使用，感興趣的朋友一起看看吧2023-10-10
這篇文章主要介紹了js圖片輪播特效，圖片切換效果特別適合做產(chǎn)品演示，感興趣的小伙伴可以參考下2015-09-09
JS動(dòng)態(tài)修改iframe高度和寬度的方法
這篇文章主要介紹了JS動(dòng)態(tài)修改iframe高度和寬度的方法,實(shí)例分析了javascript操作iframe屬性的技巧,非常具有實(shí)用價(jià)值,需要的朋友可以參考下2015-04-04
微信小程序阻止頁(yè)面返回實(shí)例詳解(包滑動(dòng)、自動(dòng)返回鍵)
小程序如果在頁(yè)面內(nèi)進(jìn)行復(fù)雜的界面設(shè)計(jì),用戶(hù)進(jìn)行返回操作會(huì)直接離開(kāi)當(dāng)前頁(yè)面,不符合用戶(hù)預(yù)期,下面這篇文章主要給大家介紹了關(guān)于微信小程序阻止頁(yè)面返回(包滑動(dòng)、自動(dòng)返回鍵)的相關(guān)資料,需要的朋友可以參考下2023-06-06
深入理解JavaScript系列(6)：S.O.L.I.D五大原則之單一職責(zé)SRP
Bob大叔提出并發(fā)揚(yáng)了S.O.L.I.D五大原則，用來(lái)更好地進(jìn)行面向?qū)ο缶幊?/div> 2012-01-01
javascript實(shí)現(xiàn)滑動(dòng)解鎖功能
本篇文章主要介紹了javascript實(shí)現(xiàn)滑動(dòng)解鎖功能的方法實(shí)例，具有很好的參考價(jià)值。下面跟著小編一起來(lái)看下吧2017-03-03
詳解JavaScript如何優(yōu)雅地實(shí)現(xiàn)創(chuàng)建多維數(shù)組
多維數(shù)組的意思是指三維或者三維以上的數(shù)組。這篇文章將通過(guò)示例為大家詳細(xì)講解一下JavaScript如何實(shí)現(xiàn)優(yōu)雅地創(chuàng)建多維數(shù)組，需要的可以參考一下2022-07-07
使用Layer組件彈出多個(gè)對(duì)話框(非嵌套)與關(guān)閉及刷新的例子
今天小編就為大家分享一篇使用Layer組件彈出多個(gè)對(duì)話框(非嵌套)與關(guān)閉及刷新的例子，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-09-09
javascript使用smipleChart實(shí)現(xiàn)簡(jiǎn)單圖表
這篇文章主要介紹了javascript使用smipleChart實(shí)現(xiàn)簡(jiǎn)單圖表的方法及示例分享,需要的朋友可以參考下2015-01-01最新評(píng)論