jQueryでのイベントバインディング

JavaScriptのほとんどすべてのイベントには、 jQueryの対応するメソッドがあります。例えば、要素のクリックは 次のように捕捉できます: $(セレクター).click(関数)。

次のHTMLコードを考えてみましょう:

html<ul>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

次のCSSが適用されています:

cssli {
  width: 100px;
  cursor: pointer;
}

どの li をクリックしても 感嘆符が表示されるようにしてみましょう。 リストの項目をクリックして動作を確認してください:

javascript$('li').click(function() {
  alert('!');
});

バインドされた関数内では、イベントが発生した要素 （この場合はクリックされた li）を参照する this が利用できます。この this は、 JavaScriptのスタイル、例えば this.innerHTML や jQueryのスタイルで使用できます。後者の場合は この this を $ でラップする必要があります。 このように: $(this)。

HTMLコードを見てみましょう:

html<ul>
  <li>テキスト</li>
  <li>テキスト</li>
  <li>テキスト</li>
</ul>

このコードには次のCSSスタイルが適用されています:

cssli {
  width: 100px;
}
li:hover {
  color: red;
  cursor: pointer;
}

li をクリックすると、 その末尾に '!' が追加されるようにしてみましょう。 動作を確認するために、リスト項目をクリックしてください:

javascript$('li').click(function() {
  $(this).append('!');
});