2017-02-15 7 views
1

私の質問はこのhtmlコードです(私はChrome 56で作業しています)。このJavascriptイベントハンドラの引数はどこに定義されていますか?

<html> 
 
<body> 
 
<input type='range' min='0' max='5' step='0.1' oninput="console.log(value)"> 
 
</body> 
 
</html>

予想通り、このコードが動作 - コンソールに出力される値の束をスライダコントロールリードを移動させます。

明らかに、value変数は、console.log(value)が実行される範囲で定義されます。私の主な質問は、value変数はどこから来たのですか?また、「まさにそこにある」というような他の変数がありますか?そのような変数のドキュメントはありますか?そこにいることに頼るのは良い方法ですか?

+0

これは入力フィールドの「value」属性を参照しています。「this」はhtmlタグ自体を参照してその値をすべて渡すため、「event」を含む任意のhtml属性を渡すこともできます - –

+0

? JSが持っていたとは思わなかった "暗黙の" this "のように見えます。この動作はJavascriptの一部ですか、それともブラウザによって余分に行われるものですか? – gnarledRoot

+0

http://jibbering.com/faq/names/event_handler.html – Bergi

答えて

1

したがって、入力フィールドのコンテキスト内でコールバックが実行されます。 「値」変数は、実際にはその入力の「値」属性です。this.value ...

これは、この文脈で「これ」の他の属性がどのようなものかを見たいと思っていますか?あなたのハンドラでこれを試してください:

oninput="console.log(this)" 

あなたの開発者コンソールは、あなたが検査できるオブジェクトを吐き出します。

希望すると便利です。

+0

'console.log(this.value)'を強制的に書くのではなく、 'console.log(value)'と書くことができますか? – gnarledRoot

+0

これは、javascriptの可変範囲がどのように機能するかです。 'var value = 'nothing';を定義すると、それが現在の" value "変数になります。しかし、あなたのハンドラにローカル変数が定義されていないので、コンテキストのために "this"を探します。この場合、「this」は入力フィールドです。 – MacPrawn

+0

暗黙の 'this'(C++のように)のように聞こえますが、これは私自身が設定した値です。 Javascriptにはないと思った。私はJSが "この文脈のために"これを見ているという説明を見つけることができませんでした。ブラウザ自体が 'this'属性をハンドラのスコープにコピーする余分なステップ(純粋なJSの一部ではない)を実行しているように感じていますが、これについての参照も見つかりません。 – gnarledRoot

関連する問題