【jQuery】on()で関数呼び出し

ボタンをクリック時のイベント定義は大体下のような感じ。

$(function(){
  $("#button").on("click", function(){
    // クリック処理
  });
});

なんだけど、
無名関数ではなくて名前付き関数を呼び出すこともできる。

$(function(){
  $("#button").on("click", logHello);

  function logHello() {
    console.log("hello, world");
  }  
});


定義した関数は呼び出されているので、即時関数の外に出してもOK

$(function(){
  $("#button").on("click", logHello);
});

function logHello() {
  console.log("hello, world");
}  


注意として、関数呼び出し時に括弧をつけると上手く動かないので注意。
logHello関数はlogHello()ではなくlogHelloと呼び出す必要がある。

$(function(){
  // これだと思ったように動かない
  $("#button").on("click", logHello());

  function logHello() {
    console.log("hello, world");
  }  
});

あとは、関数呼び出しでもthisで呼び出し元を取得できます。
そのとき呼び出し側ではなにも指定しなくて大丈夫。

$(function(){
  $("#button").on("click", logHello);
});

function logHello() {
  // thisには呼び出し元が入っている。
  console.log(this);
  console.log("hello, world");
}  

event要素も取れますが、eventの場合は明示的に仮引数で受け取る必要があるみたいです。

$(function(){
  $("#button").on("click", logHello);
});

function logHello(event) {
  // eventには呼び出し元が入っている。
  console.log(event);
  // eventのtargetはthisと同じ
  console.log(event.target);
  console.log("hello, world");
}