js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問題的解決方法
DOM2兼容處理重復(fù)問題的解決方法,具體如下
在解決this問題之后,只需要在每次往自定義屬性和事件池當(dāng)中添加事件的時(shí)候進(jìn)行一下判斷就好了,具體代碼如下
/*
bind:處理DOM2級(jí)事件綁定的兼容性問題(綁定方法)
@parameter:
curEle->要綁定事件的元素
evenType->要綁定的事件類型("click","mouseover")
evenFn->要綁定的方法
*/
function bind(curEle,evenType,evenFn){
if('addEventListener' in document){
curEle.addEventListener(evenType,evenFn,false);
return;
}
//給evenFn化妝 并且把化妝前的照片貼在自己對(duì)應(yīng)的腦門上
var tempFn = function(){
evenFn.call(curEle)
}
tempFn.photo = evenFn;
//首先判斷自定義屬性之前是否存在,不存在的話創(chuàng)建一個(gè),由于要存儲(chǔ)多個(gè)化妝后的結(jié)果,所以我們讓其值是一個(gè)數(shù)組
if(!curEle["mybind"+evenType]){//根據(jù)不同的事件類型是不同的數(shù)組
curEle["mybind"+evenType] = [];
}
//解決重復(fù)問題:每一次自己在往自定義屬性對(duì)應(yīng)的容器中添加前,看一下是否已經(jīng)存在,存在的話就不用重新的添加了,同理也不需要往事件池里面存儲(chǔ)了
var ary = curEle["mybind"+evenType];
for(var i = 0;i<ary.length;i++){
var cur = ary[i];
if(cur.photo === evenFn){
return;
}
}
ary.push(tempFn);
curEle.attachEvent("on"+evenType,tempFn);
//這里的開始想法是改變this的指向,把this不指向window
/*
box.attachEvent("onclick",function(){
fn1.call(box)
})
這樣雖然解決了this的問題,但是又拋出了一個(gè)新的問題,不知道該如何刪除了(我們不知道匿名函數(shù)是誰)
var tempFn = function(){
fn1.call(box)
}
box.attachEvent("onclick",tempFn);
box.detachEvent("onclick",tempFn);
*/
}
function unbind(curEle,evenType,evenFn){
if('removeEventListener' in document){
curEle.removeEventListener(evenType,evenFn,false);
return;
}
//拿evenFn到curEle["myBind"]這里找化妝后的結(jié)果,找到之后再事件池中把化妝后的結(jié)果移除事件池
var ary = curEle['myBind'+evenType];
for(var i = 0;i<ary.length;i++){
if(ary[i].photo===evenFn){
ary.splice(i,1)//找到后 把自己存儲(chǔ)的容器中對(duì)應(yīng)的移除掉
curEle.detachEvent("on"+evenType,ary[i]);//在把事件池中對(duì)應(yīng)的也移除掉
break;
}
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript call apply使用 JavaScript對(duì)象的方法綁定到DOM事件后this指向問題
- js學(xué)習(xí)總結(jié)之DOM2兼容處理順序問題的解決方法
- javascript 兼容所有瀏覽器的DOM擴(kuò)展功能
- Dom操作之兼容技巧分享
- Dom與瀏覽器兼容性說明
- DOM Scripting中的圖片切換[兼容Firefox]
- 前端開發(fā)部分總結(jié)[兼容性、DOM操作、跨域等](持續(xù)更新)
- javascript firefox兼容ie的dom方法腳本
- javascript下有關(guān)dom以及xml節(jié)點(diǎn)訪問兼容問題
- js學(xué)習(xí)總結(jié)之DOM2兼容處理this問題的解決方法
相關(guān)文章
EasyUI彈出框行編輯如何通過下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動(dòng)
本文介紹了如何使用EasyUI彈出框和下拉框?qū)崿F(xiàn)內(nèi)容聯(lián)動(dòng),并詳細(xì)描述了當(dāng)用戶選擇下拉框時(shí)如何更新當(dāng)前行數(shù)據(jù),通過解決datagrid的onClickRow和onClickCell事件不觸發(fā)的問題,實(shí)現(xiàn)了下拉框選擇后數(shù)據(jù)的自動(dòng)填充2024-11-11
return false,對(duì)阻止事件默認(rèn)動(dòng)作的一些測(cè)試代碼
很明顯我們每個(gè)函數(shù)都返回false,如果返回值可以阻止事件默認(rèn)動(dòng)作,那么文本框?qū)o法輸入任何內(nèi)容。 看下面我測(cè)試的結(jié)果,注意紅的部分。2010-11-11
JS判斷非空至少輸入兩個(gè)字符的簡(jiǎn)單實(shí)現(xiàn)方法
這篇文章主要介紹了JS判斷非空至少輸入兩個(gè)字符的簡(jiǎn)單實(shí)現(xiàn)方法,需要的朋友可以參考下2017-06-06
JavaScript中Async/Await通過同步的方式實(shí)現(xiàn)異步的方法介紹
在JavaScript的異步編程中,我們經(jīng)常使用回調(diào)函數(shù)、Promise和 Async/Await來解決異步操作的問題,Async/Await 又是Promise的語法糖,它的出現(xiàn)讓異步編程變得更加直觀和易于理解,本文將詳細(xì)講解Async/Await如何通過同步的方式實(shí)現(xiàn)異步2023-06-06
JavaScript中判斷對(duì)象是否為空的方法小結(jié)
在JavaScript中,判斷一個(gè)對(duì)象是否為空可以有多種方法,這篇文章主要為大家詳細(xì)介紹了幾種常見的方法,感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下2024-03-03
JS提示:Uncaught SyntaxError:Unexpected token ) 錯(cuò)誤的解決方法
這篇文章主要介紹了JS提示:Uncaught SyntaxError:Unexpected token ) 錯(cuò)誤的解決方法,結(jié)合實(shí)例形式分析了javascript提示此類異常的常見原因與相關(guān)解決方法,需要的朋友可以參考下2016-08-08

