onclickイベントに 'この' 渡す

Question

可能性の重複：
The current element as its Event function param

うこの作品

<script type="text/javascript"> 
var foo = function(param) 
{ 
    param.innerHTML = "Not a button"; 
}; 
</script> 
<button onclick="foo(this)" id="bar">Button</button> 

ではなく、この？

最初のメソッドを使用すると、他の場所からjavacriptを読み込んで、任意のページ要素でアクションを実行できますか？

Answer 1

あなたは仕事と持っていますが、thisはグローバルオブジェクトを参照することを意味グローバルコンテキストから実行されるコード。

<script type="text/javascript"> 
var foo = function(param) { 
    param.innerHTML = "Not a button"; 
}; 
</script> 
<button onclick="foo(this)" id="bar">Button</button> 

またに取り付けられ、あなたがthisから要素にアクセスすることを可能にする特定の要素のコンテキストから実行非インライン代替を使用することができます。

<script type="text/javascript"> 
document.getElementById('bar').onclick = function() { 
    this.innerHTML = "Not a button"; 
}; 
</script> 
<button id="bar">Button</button> 

Answer 2

最初のメソッドは、idとは無関係に常に ターゲット要素を取るため、他の場所から呼び出された要素に対してもうまく動作します。

チェックこのフィドル

http://jsfiddle.net/8cvBM/

Answer 3

あなたはいつも違ったfunciton呼び出すことができます。foo.call(this);この方法であなたは、関数内thisコンテキストを使用することができるようになります。

例：JavaScriptのthisで

<button onclick="foo.call(this)" id="bar">Button</button>​

var foo = function() 
{ 
    this.innerHTML = "Not a button"; 
}; 

Answer 4

は、常に私たちは関数がメソッドであるオブジェクトに、実行、またはむしろしている機能の「所有者」を指し、の。忠実な関数doSomething（）をページ内に定義するとき、その所有者はJavaScriptのページオブジェクト、またはウィンドウオブジェクト（またはグローバルオブジェクト）です。

How does the "this" keyword work?