js學(xué)習(xí)總結(jié)之DOM2兼容處理this問(wèn)題的解決方法
針對(duì)上一篇提到的DOM2級(jí)存在的兼容問(wèn)題,這里先說(shuō)一下this的問(wèn)題。
/*
bind:處理DOM2級(jí)事件綁定的兼容性問(wèn)題(綁定方法)
@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] = [];
}
curEle["mybind"+evenType].push(tempFn);
curEle.attachEvent("on"+evenType,tempFn);
//這里的開始想法是改變this的指向,把this不指向window
/*
box.attachEvent("onclick",function(){
fn1.call(box)
})
這樣雖然解決了this的問(wèn)題,但是又拋出了一個(gè)新的問(wèn)題,不知道該如何刪除了(我們不知道匿名函數(shù)是誰(shuí))
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){
curEle.detachEvent("on"+evenType,ary[i]);
break;
}
}
}
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
- JavaScript call apply使用 JavaScript對(duì)象的方法綁定到DOM事件后this指向問(wèn)題
- js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問(wèn)題的解決方法
- js學(xué)習(xí)總結(jié)之DOM2兼容處理順序問(wèn)題的解決方法
- javascript 兼容所有瀏覽器的DOM擴(kuò)展功能
- Dom操作之兼容技巧分享
- Dom與瀏覽器兼容性說(shuō)明
- DOM Scripting中的圖片切換[兼容Firefox]
- 前端開發(fā)部分總結(jié)[兼容性、DOM操作、跨域等](持續(xù)更新)
- javascript firefox兼容ie的dom方法腳本
- javascript下有關(guān)dom以及xml節(jié)點(diǎn)訪問(wèn)兼容問(wèn)題
相關(guān)文章
uniapp內(nèi)置組件scroll-view案例詳解(完整代碼)
這篇文章主要介紹了uniapp內(nèi)置組件scroll-view案例詳解,本文通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì),感興趣的朋友跟隨小編一起看看吧2024-07-07
js實(shí)現(xiàn)背景圖自適應(yīng)窗口大小
本文分享了背景圖自適應(yīng)窗口大小的實(shí)例代碼,具有一定的參考作用。下面跟著小編一起來(lái)看下吧2017-01-01
FF火狐下獲取一個(gè)元素同類型的相鄰元素實(shí)現(xiàn)代碼
FF火狐下獲取一個(gè)元素同類型的相鄰元素實(shí)現(xiàn)代碼 ,需要的朋友可以了解下2012-12-12
JS實(shí)現(xiàn)隱藏同級(jí)元素后只顯示JS文件內(nèi)容的方法
這篇文章主要介紹了JS實(shí)現(xiàn)隱藏同級(jí)元素后只顯示JS文件內(nèi)容的方法,可實(shí)現(xiàn)將與js文件的同級(jí)元素全部隱藏,只顯示js文件內(nèi)容的功能,涉及javascript針對(duì)頁(yè)面元素的遍歷與屬性修改相關(guān)技巧,需要的朋友可以參考下2016-09-09
Bootstrap table學(xué)習(xí)筆記(2) 前后端分頁(yè)模糊查詢
這篇文章主要為大家分享了Bootstrap table學(xué)習(xí)筆記,前后端分頁(yè)模糊查詢,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05
js?select支持手動(dòng)輸入功能實(shí)現(xiàn)代碼
這篇文章主要介紹了js?select支持手動(dòng)輸入實(shí)現(xiàn)代碼,需要的朋友可以參考下2023-05-05
JavaScript實(shí)現(xiàn)的DOM繪制柱狀圖效果示例
這篇文章主要介紹了JavaScript實(shí)現(xiàn)的DOM繪制柱狀圖效果,涉及javascript數(shù)值計(jì)算及頁(yè)面元素屬性動(dòng)態(tài)操作相關(guān)實(shí)現(xiàn)技巧,需要的朋友可以參考下2018-08-08
JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法
這篇文章主要介紹了JS實(shí)現(xiàn)選擇TextArea內(nèi)文本的方法,涉及javascript針對(duì)頁(yè)面TextArea元素焦點(diǎn)設(shè)置及文本獲取的相關(guān)技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-08-08
JS模式之簡(jiǎn)單的訂閱者和發(fā)布者模式完整實(shí)例
這篇文章主要介紹了JS模式之簡(jiǎn)單的訂閱者和發(fā)布者模式,以一個(gè)完整實(shí)例形式詳細(xì)分析了JS訂閱者和發(fā)布者模式基本實(shí)現(xiàn)技巧,需要的朋友可以參考下2015-06-06

