在早先的一篇blog中說event的時候有些關於方法中this使用的問題討論，這裏整理單獨出來。
---------首先解釋一下，這裏說明的this的用法主要涉及到方法的調用問題。
1、this代表了什麼?
[code]function doSomething() {
this.style.color = '#cc0000';
}[/code]
這個方法中this代表了什麼呢？它試圖改變誰的樣式呢？
[color=green]可以很不負責任的告訴你誰調用了它就代表誰![/color]
以一段代碼說明如下:
[code]<html>
<head><title></title>
<script language="javascript" type="text/javascript">
function doSomething() {
this.style.color = '#cc0000';
}
doSomething();
</script>
</head>
<body>
<div id="clickme" οnclick="doSomething()"></div>
</body>
</html>[/code]
上面的代碼中定義了doSomething方法，並且調用了2次，一次直接調用，另外一次使用onclick事件觸發，可惜很不幸，瀏覽器總是說this.style has no properties!這是爲什麼呢，這裏的關鍵就是我們並沒有明確的給定this所代表的對象[或者說我們明確的把this分配給了一個我們不清楚的對象],在這種情況下this所代表的就是window對象。如果我們非要把doSomething中的this分配給ID爲clickme的div的話，則需要做的就是把doSomething複製給傳統的事件onchick，處理方法爲[code]document.getElementById("clickme").onclick = doSomething;[/code]
修改後的代碼爲:
[code]<html>
<head><title></title>
<script language="javascript" type="text/javascript">
function doSomething() {
this.style.color = '#cc0000';
}
</script>
</head>
<body>
<div id="clickme">123</div>
<script language="javascript" type="text/javascript">
document.getElementById("clickme").onclick = doSomething;
</script>
</body>
</html>[/code]
這裏唯一要注意的一點就是[color=red]document.getElementById("clickme").onclick = doSomething;[/color]的位置要出現在<div id="clickme">之後！爲什麼就不解釋了哈
下面簡單解釋一下一個元素觸發事件的差別，如上面的兩中形式:
1:
<div id="clickme" οnclick="doSomething()">這個據說叫[color=green]inline event registration[/color]
2:
element.onclick = doSomething;
方式一隻是做了一個引用，並沒有做複製方法的處理，而2則不同，引用並做了複製方法的處理，所以方式1只是簡單的call doSomething。我們可以使用如下的方式來用一種看得件的方式理解這個問題;
使用方法一:<div id="clickme" οnclick="doSomething()">
我們alert(document.getElementById("clickme").onclick);我們得到的代碼爲:
[code]
//這裏只給出firefox下的形式，至於IE那個爛東東，就先不管了……
function onclick(event){
doSomething(); //firefox下，IE下應該是個匿名函數anonymous(){...}
}[/code]
而使用方法二我們得到的卻是doSomething的定義:
[code]function doSomething(){
this.style.color ="#cc0000";
}[/code]
需要注意的一些問題是:
如下的使用都只是做了引用的:
[code]element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element οnclick="doSomething()">[/code]
而下面的這些則做了複製:
[code]element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element οnclick="this.style.color = '#cc0000';">[/code]
一個簡單的避免this出錯的方法就是傳遞並使用它，修改方法doSomething的定義爲:
[code]function doSomething(o){
o.style.color="#cc0000";
}
//然後
<div οnclick="doSomething(this)">[/code]
---------首先解釋一下，這裏說明的this的用法主要涉及到方法的調用問題。
1、this代表了什麼?
[code]function doSomething() {
this.style.color = '#cc0000';
}[/code]
這個方法中this代表了什麼呢？它試圖改變誰的樣式呢？
[color=green]可以很不負責任的告訴你誰調用了它就代表誰![/color]
以一段代碼說明如下:
[code]<html>
<head><title></title>
<script language="javascript" type="text/javascript">
function doSomething() {
this.style.color = '#cc0000';
}
doSomething();
</script>
</head>
<body>
<div id="clickme" οnclick="doSomething()"></div>
</body>
</html>[/code]
上面的代碼中定義了doSomething方法，並且調用了2次，一次直接調用，另外一次使用onclick事件觸發，可惜很不幸，瀏覽器總是說this.style has no properties!這是爲什麼呢，這裏的關鍵就是我們並沒有明確的給定this所代表的對象[或者說我們明確的把this分配給了一個我們不清楚的對象],在這種情況下this所代表的就是window對象。如果我們非要把doSomething中的this分配給ID爲clickme的div的話，則需要做的就是把doSomething複製給傳統的事件onchick，處理方法爲[code]document.getElementById("clickme").onclick = doSomething;[/code]
修改後的代碼爲:
[code]<html>
<head><title></title>
<script language="javascript" type="text/javascript">
function doSomething() {
this.style.color = '#cc0000';
}
</script>
</head>
<body>
<div id="clickme">123</div>
<script language="javascript" type="text/javascript">
document.getElementById("clickme").onclick = doSomething;
</script>
</body>
</html>[/code]
這裏唯一要注意的一點就是[color=red]document.getElementById("clickme").onclick = doSomething;[/color]的位置要出現在<div id="clickme">之後！爲什麼就不解釋了哈
下面簡單解釋一下一個元素觸發事件的差別，如上面的兩中形式:
1:
<div id="clickme" οnclick="doSomething()">這個據說叫[color=green]inline event registration[/color]
2:
element.onclick = doSomething;
方式一隻是做了一個引用，並沒有做複製方法的處理，而2則不同，引用並做了複製方法的處理，所以方式1只是簡單的call doSomething。我們可以使用如下的方式來用一種看得件的方式理解這個問題;
使用方法一:<div id="clickme" οnclick="doSomething()">
我們alert(document.getElementById("clickme").onclick);我們得到的代碼爲:
[code]
//這裏只給出firefox下的形式，至於IE那個爛東東，就先不管了……
function onclick(event){
doSomething(); //firefox下，IE下應該是個匿名函數anonymous(){...}
}[/code]
而使用方法二我們得到的卻是doSomething的定義:
[code]function doSomething(){
this.style.color ="#cc0000";
}[/code]
需要注意的一些問題是:
如下的使用都只是做了引用的:
[code]element.onclick = function () {doSomething()}
element.attachEvent('onclick',doSomething)
<element οnclick="doSomething()">[/code]
而下面的這些則做了複製:
[code]element.onclick = doSomething
element.addEventListener('click',doSomething,false)
element.onclick = function () {this.style.color = '#cc0000';}
<element οnclick="this.style.color = '#cc0000';">[/code]
一個簡單的避免this出錯的方法就是傳遞並使用它，修改方法doSomething的定義爲:
[code]function doSomething(o){
o.style.color="#cc0000";
}
//然後
<div οnclick="doSomething(this)">[/code]
