解決使用attachEvent函數(shù)時(shí)，this指向被綁定的元素的問(wèn)題的方法
更新時(shí)間：2007年08月13日 19:14:35 作者：
使用attachEvent對(duì)同一事件進(jìn)行多次綁定，這是解決事件函數(shù)定義沖突的重要方法。但是在IE中，函數(shù)內(nèi)的this指針并沒(méi)有指向被綁定元素，而是function對(duì)象，在應(yīng)用中，這是很難受的一件事，如果試圖用局部變量傳送元素，會(huì)因?yàn)殚]包而引起內(nèi)存泄漏。那么，我們應(yīng)該如何解決這一難題呢？
我給Function添加了原型方法“bindNode”，在這個(gè)方法里，根據(jù)傳送過(guò)來(lái)的元素，進(jìn)行全局性存儲(chǔ)轉(zhuǎn)換，然后返回經(jīng)過(guò)封裝的函數(shù)，使用call方法來(lái)進(jìn)行屬主轉(zhuǎn)換。
<html>
<body>
<button id=btTest>test</button>
</body>
</html>
<script>
if(!document.all){
HTMLElement.prototype.attachEvent=function(sType,foo){
this.addEventListener(sType.slice(2),foo,false)
}
}
Function.prototype.bindNode=function(oNode){
var foo=this,iNodeItem
//使用了全局?jǐn)?shù)組__bindNodes，通過(guò)局部變量iNodeItem進(jìn)行跨函數(shù)傳值，如果直接傳送oNode，也將造成閉包
if(window.__bindNodes==null)
__bindNodes=[]
__bindNodes.push(oNode)
iNodeItem=__bindNodes.length-1
oNode=null
return function(e){
foo.call(__bindNodes[iNodeItem],e||event)
}
}
abc()
function abc(){
var bt=document.getElementById("btTest")
bt.attachEvent("onclick",function(){
//如果不經(jīng)過(guò)bindNode處理，下面的結(jié)果將是undefined
alert(this.tagName)
}.bindNode(bt))
bt=null
}
</script>
我給Function添加了原型方法“bindNode”，在這個(gè)方法里，根據(jù)傳送過(guò)來(lái)的元素，進(jìn)行全局性存儲(chǔ)轉(zhuǎn)換，然后返回經(jīng)過(guò)封裝的函數(shù)，使用call方法來(lái)進(jìn)行屬主轉(zhuǎn)換。
<html>
<body>
<button id=btTest>test</button>
</body>
</html>
<script>
if(!document.all){
HTMLElement.prototype.attachEvent=function(sType,foo){
this.addEventListener(sType.slice(2),foo,false)
}
}
Function.prototype.bindNode=function(oNode){
var foo=this,iNodeItem
//使用了全局?jǐn)?shù)組__bindNodes，通過(guò)局部變量iNodeItem進(jìn)行跨函數(shù)傳值，如果直接傳送oNode，也將造成閉包
if(window.__bindNodes==null)
__bindNodes=[]
__bindNodes.push(oNode)
iNodeItem=__bindNodes.length-1
oNode=null
return function(e){
foo.call(__bindNodes[iNodeItem],e||event)
}
}
abc()
function abc(){
var bt=document.getElementById("btTest")
bt.attachEvent("onclick",function(){
//如果不經(jīng)過(guò)bindNode處理，下面的結(jié)果將是undefined
alert(this.tagName)
}.bindNode(bt))
bt=null
}
</script>
相關(guān)文章
js 分頁(yè)全選或反選標(biāo)識(shí)實(shí)現(xiàn)代碼
分頁(yè)全選或反選標(biāo)識(shí) 對(duì)多選按鈕操作。 批量全選添加、批量移除。 行單選添加、移除。 分頁(yè)之后(全選或不選)狀態(tài)標(biāo)識(shí)依然存在2011-08-08
Js調(diào)用Java方法并互相傳參的簡(jiǎn)單實(shí)例
下面小編就為大家?guī)?lái)一篇Js調(diào)用Java方法并互相傳參的簡(jiǎn)單實(shí)例。小編覺(jué)得挺不錯(cuò)的，現(xiàn)在就分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-08-08
微信小程序云開(kāi)發(fā)如何使用云函數(shù)生成二維碼
這篇文章主要為大家詳細(xì)介紹了微信小程序云開(kāi)發(fā)如何使用云函數(shù)生成二維碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2019-05-05
利用不到200行代碼寫(xiě)一款屬于你自己的js類庫(kù)
這篇文章主要給大家介紹了如何利用不到200行代碼寫(xiě)一款屬于你自己的js類庫(kù)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家學(xué)習(xí)或者使用js具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-07-07
JSON(JavaScript Object Notation) 是一種輕量級(jí)的數(shù)據(jù)交換格式，采用完全獨(dú)立于語(yǔ)言的文本格式，是理想的數(shù)據(jù)交換格式。同時(shí)，JSON是 JavaScript 原生格式，這意味著在 JavaScript 中處理 JSON數(shù)據(jù)不須要任何特殊的API或工具包，接下來(lái)跟著小編學(xué)習(xí)js中判斷json的方法吧2015-08-08
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)文字滾動(dòng)，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-03-03
這篇文章主要為大家詳細(xì)介紹了three.js搭建室內(nèi)場(chǎng)景教程，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
js實(shí)現(xiàn)類選擇器和name屬性選擇器的示例步驟
這篇文章主要介紹了js實(shí)現(xiàn)類選擇器和name屬性選擇器的示例步驟，幫助大家更好的理解和使用js，感興趣的朋友可以了解下2021-02-02
js 去掉空格實(shí)例 Trim() LTrim() RTrim()
js 去掉空格實(shí)例Trim(),LTrim(),RTrim() 需要的朋友可以過(guò)來(lái)參考下，希望對(duì)大家有所幫助2014-01-01
JavaScript枚舉選擇jquery插件代碼實(shí)例
這篇文章主要介紹了JavaScript枚舉選擇jquery插件代碼實(shí)例,文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友可以參考下2020-11-11