講兩件事:1.this指針的用法小探. 2.ie的attachEvent和firefox的addEventListener在事件處理上的區(qū)別
更新時(shí)間:2007年04月12日 00:00:00 作者:
第一件事情.
this 指鐘是JavaScript語言中的一個(gè)特殊指鐘,他在代碼運(yùn)行時(shí),指向調(diào)用this語句的當(dāng)前對象.
如果是事件綁定函數(shù),則指向被綁定的元素本身.
<script type="text/javascript">
//by Go_Rush(阿舜) from http://ashun.cnblogs.com/
alert(this===window) //true 直
接調(diào)用的時(shí)候,指向window本身
var gorush={
f:function(){
alert(this===gorush) //true
}
}
gorush.f() //指向 gorush對象
document.onclick=function(){
alert(this===document) //true ,指向 document
}
/*
element.onclick=function(){
alert(this===element) //true
}
*/
</script>
特別要值得注意的是,當(dāng)多個(gè)對象嵌套的時(shí)候, this 是指向最近調(diào)用它的那個(gè)對象的
obj1={
obj2:{
f:function(){
alert(this===obj1.obj2) //這里 this 并不是指向 obj1的哦。
}
}
}
obj1.obj2.f()
再舉一個(gè)非常容易出錯(cuò)的例子, 點(diǎn)這里看相關(guān)鏈接
<script type="text/javascript">
//by Go_Rush from http://ashun.cnblogs.com/
//以下gorush1中 this的用法是錯(cuò)誤的,這個(gè)錯(cuò)誤10個(gè)程序員6個(gè)犯
var gorush1={
showMsg:function(){alert("hello,world")},
doAjax:function(){
new Ajax.Request("index.php",{onSuccess:function(){
this.showMsg()
}})
}
}
//gorush2中的才是對的
var gorush2={
showMsg:function(){alert("hello,world")},
doAjax:function(){
var self=this; //備份 gorush2對象
new Ajax.Request("index.php",{onSuccess:function(){
self.showMsg()
}})
}
}
</script>
第二件事情:
閑話不多說,先上碟小菜.
<script type="text/javascript">
var btn=null
window.onload=function(){
btn=document.getElementById("btn")
if (window.attachEvent) btn.attachEvent("onclick",gorush);
if (window.addEventListener) btn.addEventListener("click",gorush,false)
}
function gorush(){
if (this===window) alert("this==window") //ie6.0下,這句會執(zhí)行
if (this===btn) alert("this==btn") //ff1.5下, 這句會執(zhí)行
}
</script>
<input type="button" value="click me" id="btn">
真不明白為什么 ie 會這樣搞,讓人很郁悶啊,為什么把 this 指向 window呢?
解決方法:
1. 事件綁定的時(shí)候不要用 attachEvent, 可憐的我,當(dāng)時(shí)就是用的prototype.js的Event.Observe方法
這樣 element.onclick=function..... 這樣在兩個(gè)瀏覽器中 this 指鐘都指向 element
2. 在處理函數(shù) gorush中 用 getEvent()方法統(tǒng)一獲取事件,然后在用 evt.srcElement || evt.target 獲取 element對象
this 指鐘是JavaScript語言中的一個(gè)特殊指鐘,他在代碼運(yùn)行時(shí),指向調(diào)用this語句的當(dāng)前對象.
如果是事件綁定函數(shù),則指向被綁定的元素本身.
<script type="text/javascript">
//by Go_Rush(阿舜) from http://ashun.cnblogs.com/
alert(this===window) //true 直
接調(diào)用的時(shí)候,指向window本身
var gorush={
f:function(){
alert(this===gorush) //true
}
}
gorush.f() //指向 gorush對象
document.onclick=function(){
alert(this===document) //true ,指向 document
}
/*
element.onclick=function(){
alert(this===element) //true
}
*/
</script>
特別要值得注意的是,當(dāng)多個(gè)對象嵌套的時(shí)候, this 是指向最近調(diào)用它的那個(gè)對象的
obj1={
obj2:{
f:function(){
alert(this===obj1.obj2) //這里 this 并不是指向 obj1的哦。
}
}
}
obj1.obj2.f()
再舉一個(gè)非常容易出錯(cuò)的例子, 點(diǎn)這里看相關(guān)鏈接
<script type="text/javascript">
//by Go_Rush from http://ashun.cnblogs.com/
//以下gorush1中 this的用法是錯(cuò)誤的,這個(gè)錯(cuò)誤10個(gè)程序員6個(gè)犯
var gorush1={
showMsg:function(){alert("hello,world")},
doAjax:function(){
new Ajax.Request("index.php",{onSuccess:function(){
this.showMsg()
}})
}
}
//gorush2中的才是對的
var gorush2={
showMsg:function(){alert("hello,world")},
doAjax:function(){
var self=this; //備份 gorush2對象
new Ajax.Request("index.php",{onSuccess:function(){
self.showMsg()
}})
}
}
</script>
第二件事情:
閑話不多說,先上碟小菜.
<script type="text/javascript">
var btn=null
window.onload=function(){
btn=document.getElementById("btn")
if (window.attachEvent) btn.attachEvent("onclick",gorush);
if (window.addEventListener) btn.addEventListener("click",gorush,false)
}
function gorush(){
if (this===window) alert("this==window") //ie6.0下,這句會執(zhí)行
if (this===btn) alert("this==btn") //ff1.5下, 這句會執(zhí)行
}
</script>
<input type="button" value="click me" id="btn">
真不明白為什么 ie 會這樣搞,讓人很郁悶啊,為什么把 this 指向 window呢?
解決方法:
1. 事件綁定的時(shí)候不要用 attachEvent, 可憐的我,當(dāng)時(shí)就是用的prototype.js的Event.Observe方法
這樣 element.onclick=function..... 這樣在兩個(gè)瀏覽器中 this 指鐘都指向 element
2. 在處理函數(shù) gorush中 用 getEvent()方法統(tǒng)一獲取事件,然后在用 evt.srcElement || evt.target 獲取 element對象
您可能感興趣的文章:
- Javascript 的addEventListener()及attachEvent()區(qū)別分析
- addEventListener 的用法示例介紹
- window.addEventListener來解決讓一個(gè)js事件執(zhí)行多個(gè)函數(shù)
- document.addEventListener使用介紹
- JS在IE和FF下attachEvent,addEventListener學(xué)習(xí)筆記
- 事件綁定之小測試 onclick && addEventListener
- javascript attachEvent和addEventListener使用方法
- 詳解addEventListener的三個(gè)參數(shù)之useCapture
- addEventListener()第三個(gè)參數(shù)useCapture (Boolean)詳細(xì)解析
- addEventListener()與removeEventListener()解析
相關(guān)文章
php+js實(shí)現(xiàn)倒計(jì)時(shí)功能
由PHP傳入JS處理的時(shí)間戳我說怎么老是對不上號呢,原來JS時(shí)間戳為13位,包含3位毫秒的,而PHP只有10位不包含毫秒的。恩,基礎(chǔ)還是要補(bǔ)補(bǔ)的2014-06-06
用Javascript實(shí)現(xiàn)Sleep暫停功能代碼
ie和firefox都可以使用,有興趣可以試試2010-09-09
Javascript中判斷變量是數(shù)組還是對象(array還是object)
怎樣判斷一個(gè)JavaScript變量是array還是obiect,或許有很多初學(xué)者對此不是很清楚吧,下面為大家詳細(xì)解答下,希望對大家有所幫助2013-08-08
javascript setTimeout和setInterval計(jì)時(shí)的區(qū)別詳解
window對象有兩個(gè)主要的定時(shí)方法,分別是setTimeout 和 setInteval 他們的語法基本上相同,但是完成的功能取有區(qū)別。2013-06-06
原生JS實(shí)現(xiàn)網(wǎng)絡(luò)彩票投注效果
分享一個(gè)最近模仿市面彩票系統(tǒng)寫個(gè)小案例,沒有使用任何后臺,從投注到開獎(jiǎng)再到返獎(jiǎng)都是用原生JS實(shí)現(xiàn)的。2016-09-09

