js學(xué)習(xí)總結(jié)之DOM2兼容處理this問題的解決方法
更新時間:2017年07月27日 14:39:52 作者:diasa
這篇文章主要為大家詳細(xì)介紹了js學(xué)習(xí)總結(jié)之DOM2兼容處理this問題的解決方法,具有一定的參考價值,感興趣的小伙伴們可以參考一下
針對上一篇提到的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化妝 并且把化妝前的照片貼在自己對應(yīng)的腦門上
var tempFn = function(){
evenFn.call(curEle)
}
tempFn.photo = evenFn;
//首先判斷自定義屬性之前是否存在,不存在的話創(chuàng)建一個,由于要存儲多個化妝后的結(jié)果,所以我們讓其值是一個數(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的問題,但是又拋出了一個新的問題,不知道該如何刪除了(我們不知道匿名函數(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){
curEle.detachEvent("on"+evenType,ary[i]);
break;
}
}
}
以上就是本文的全部內(nèi)容,希望對大家的學(xué)習(xí)有所幫助,也希望大家多多支持腳本之家。
您可能感興趣的文章:
- JavaScript call apply使用 JavaScript對象的方法綁定到DOM事件后this指向問題
- js學(xué)習(xí)總結(jié)之DOM2兼容處理重復(fù)問題的解決方法
- js學(xué)習(xí)總結(jié)之DOM2兼容處理順序問題的解決方法
- javascript 兼容所有瀏覽器的DOM擴展功能
- Dom操作之兼容技巧分享
- Dom與瀏覽器兼容性說明
- DOM Scripting中的圖片切換[兼容Firefox]
- 前端開發(fā)部分總結(jié)[兼容性、DOM操作、跨域等](持續(xù)更新)
- javascript firefox兼容ie的dom方法腳本
- javascript下有關(guān)dom以及xml節(jié)點訪問兼容問題
相關(guān)文章
JavaScript三種方法解決約瑟夫環(huán)問題的方法
約瑟夫環(huán)問題又稱約瑟夫問題或丟手絹問題,是一道經(jīng)典的算法問題,本篇將以循環(huán)鏈表、有序數(shù)組、數(shù)學(xué)遞歸三種方式來解決約瑟夫環(huán)問題。感興趣的可以了解一下2021-09-09
Flutter 超實用簡單菜單彈出框 PopupMenuButton功能
這篇文章主要介紹了Flutter 超實用簡單菜單彈出框 PopupMenuButton功能,本文通過實例代碼給大家介紹的非常詳細(xì),具有一定的參考借鑒價值,需要的朋友可以參考下2019-08-08
Bootstrap基本組件學(xué)習(xí)筆記之分頁(12)
這篇文章主要為大家詳細(xì)介紹了Bootstrap基本組件學(xué)習(xí)筆記之分頁,具有一定的參考價值,感興趣的小伙伴們可以參考一下2016-12-12
JS實現(xiàn)簡單的選擇題測評系統(tǒng)代碼思路詳解(demo)
本文給大家分享js實現(xiàn)簡單的選擇題測評系統(tǒng)實例代碼,非常不錯,具有參考借鑒價值,需要的朋友參考下吧2017-09-09
微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能示例
這篇文章主要介紹了微信小程序?qū)崿F(xiàn)多選框全選與取消全選功能,結(jié)合實例形式分析了微信小程序多選框功能實現(xiàn)、布局顯示及全選、取消全選相關(guān)操作技巧,需要的朋友可以參考下2019-05-05
ModelDialog JavaScript模態(tài)對話框類代碼
ModelDialog JavaScript模態(tài)對話框類代碼,需要的朋友可以參考下。2011-04-04

