javascriptのイベントについて

<script type="text/javascript">
window.onload = function () {
 document.getElementById( "sample1" ).onclick = function( $event1 ){
  document.getElementById( "sampleOutputTarget" ).innerHTML = $event1.target.id;
  document.getElementById( "sampleOutputCurrentTarget" ).innerHTML = $event1.currentTarget.id;
 };
 document.getElementById( "sample2" ).onclick = function( $event2 ){
  document.getElementById( "sampleOutputTarget" ).innerHTML = $event2.target.id;
  document.getElementById( "sampleOutputCurrentTarget" ).innerHTML = $event2.currentTarget.id;
 };
 document.getElementById( "sample3" ).onclick = function( $event3 ){
  document.getElementById( "sampleOutputTarget" ).innerHTML = $event3.target.id;
  document.getElementById( "sampleOutputCurrentTarget" ).innerHTML = $event3.currentTarget.id;
 };
}
</script>

について、$event1が何を表しているのか、わかりません...どこから渡ってきた引数なのか？
よろしくお願いします。

行動規範の内容に同意します

回答4件

JavaScript
1HTMLElement.onclick = function(event) { ... };

これは、HTML要素がマウスでクリックされた時に発生するイベントのリスナー関数を登録するコードです。
イベントリスナー関数の引数 event には、MouseEvent オブジェクトが渡されます。

ご参考になれば。

投稿2016/02/20 08:35

tkanda

総合スコア2425

ruby_nyumon

2016/02/21 02:14

ありがとうございます！

行動規範の内容に同意します

ベストアンサー

こんな実証コードを入れて開発ツールのコンソールを開くとわかりやすいですよ。

Javascript
1window.onload = function () {
2 document.getElementById( "sample1" ).onclick = function( $event1 ){
3  console.log($event1);
4 };
5}

こうすると、

click { target: <a#sample1>, buttons: 0, clientX: 39, clientY: 17, layerX: 39, layerY: 17 }

こんな風にeventオブジェクトが$event1に入ってくるのが分かります。
targetはクリックされたエレメントのオブジェクト（ここではaタグにidを振ったので、「a#sample1」と出ています）になります。
ですので、$event1.target.id とするとクリックされたもののidを取ることができます。

詳しくは、
https://developer.mozilla.org/ja/docs/Web/API/Event
こちらをご覧ください。

投稿2016/02/20 08:43

shi_ue

総合スコア4437

ruby_nyumon

2016/02/21 02:13

理解できました！ありがとうございます！

行動規範の内容に同意します

示されているコードは画面ロード時に各要素にクリックイベントを設定しているものです。
$event1は単純に引数でクリックイベントが発生したときにイベントオブジェクトと呼ばれるものが格納されます。
ちなみに、「どこから」となると正直正しいかは不安ですが、「イベントが発生した要素から」となるかと思います。

投稿2016/02/20 08:32