js學習總結之DOM2兼容處理重復問題的解決方法
更新時間:2017年07月27日 11:51:59 作者:diasa
這篇文章主要為大家詳細介紹了js學習總結之DOM2兼容處理重復問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
DOM2兼容處理重復問題的解決方法,具體如下
在解決this問題之后,只需要在每次往自定義屬性和事件池當中添加事件的時候進行一下判斷就好了,具體代碼如下
/*
bind:處理DOM2級事件綁定的兼容性問題(綁定方法)
@parameter:
curEle->要綁定事件的元素
evenType->要綁定的事件類型("click","mouseover")
evenFn->要綁定的方法
*/
function bind(curEle,evenType,evenFn){
if('addEventListener' in document){
curEle.addEventListener(evenType,evenFn,false);
return;
}
//給evenFn化妝 并且把化妝前的照片貼在自己對應的腦門上
var tempFn = function(){
evenFn.call(curEle)
}
tempFn.photo = evenFn;
//首先判斷自定義屬性之前是否存在,不存在的話創(chuàng)建一個,由于要存儲多個化妝后的結果,所以我們讓其值是一個數組
if(!curEle["mybind"+evenType]){//根據不同的事件類型是不同的數組
curEle["mybind"+evenType] = [];
}
//解決重復問題:每一次自己在往自定義屬性對應的容器中添加前,看一下是否已經存在,存在的話就不用重新的添加了,同理也不需要往事件池里面存儲了
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的問題,但是又拋出了一個新的問題,不知道該如何刪除了(我們不知道匿名函數是誰)
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"]這里找化妝后的結果,找到之后再事件池中把化妝后的結果移除事件池
var ary = curEle['myBind'+evenType];
for(var i = 0;i<ary.length;i++){
if(ary[i].photo===evenFn){
ary.splice(i,1)//找到后 把自己存儲的容器中對應的移除掉
curEle.detachEvent("on"+evenType,ary[i]);//在把事件池中對應的也移除掉
break;
}
}
}
以上就是本文的全部內容,希望對大家的學習有所幫助,也希望大家多多支持腳本之家。
相關文章
JS題解leetcode去掉最低工資和最高工資后的工資平均值
這篇文章主要為大家介紹了JS題解leetcode去掉最低工資和最高工資后的工資平均值,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪2022-12-12

