addEventListener の引数について.md

addEventListener の引数について

JSでボタンにクリックイベントくっつけてるんだけど、そのイベントリスナーを定義する命令を読まれると、クリック時に走って欲しい関数が呼ばれちゃうのどうしたら良いの！

https://twitter.com/FromAtom/status/361897216849358848

に関して、Javascript の addEventListener の引数は

target.addEventListener(type, listener [, useCapture]);

https://developer.mozilla.org/ja/docs/Web/API/EventTarget.addEventListener

となっています。それぞれみてみると

type

対象とするイベントの種類を表す文字列

listener

指定されたタイプのイベントが発生するときに通知を受け取るオブジェクト。

これは、EventListener インタフェースを実装するオブジェクト、あるいは、単純に、JavaScript の関数でなければなりません。

useCapture(optional)
(略)

です。

ここでややこしいのが EventListener インタフェースを実装するオブジェクト、あるいは、単純に、JavaScript の関数 という表現なわけです。まず、EventListener インターフェースというのは

function (event) {
  // something
}

のような関数で、引数にイベントオブジェクトをとるような関数です。これを使えば簡単で

target.addEventListener("click", handler);

function handler(event) {
	// something
}

のようなコードを書くとイベントを受け取ることができます。

次に、単純な Javascript の関数 というのは

function hoge() {
	// something
}

で、これを使うと

target.addEventListener("click", hoge);

function hoge() {
	// something
}

というようなコードになります。あまり変わらないですね。ここで大事なのは hoge はその関数を示すのに対して、hoge() と書いてしまうとその関数が実行されてしまうという点です。

実際に確認してみるとわかる話ですが

function hoge() {
	return "hoge";
}

console.log(hoge); // -> [Function: hoge]
console.log(hoge()); // -> hoge

そういうわけで、なにか引数をとるような関数を実行したいという場合にはイベントハンドラでラップしてやるとよいという話でした。