こんにちは！wdtチームの山本です。
今回は、jQueryでイベント処理を書く際によく登場する「this」についてです。
シンプルな記述ではありますが、初めのうちは挙動が分かりづらく感じるポイントのひとつです。
基本を押さえることで、イベント処理の理解が深まりますので、「this」についてお話をします。
thisとは何か
jQueryにおけるthisは、イベントが発生した要素自身（DOM要素）を指します。
例えばクリックイベント内で使用すると、「クリックされた要素」を取得できます。
※DOM要素を簡単に言うと、「JavaScriptからHTMLを自由自在に操るための仕組み」のことです。 HTMLのタグ（divやh1など）の一つひとつが、プログラムから触れる「部品（DOM要素）」として扱われます。
HTML
<div class="box">
<div class="button">ボタン</div>
</div>jQuery
$(".button").on("click", function() {
console.log(this);
});このコードでは、.buttonをクリックした際に、その要素がコンソールに出力されます。
実際に確認してみると、「どの要素が対象になっているのか」が直感的に理解できます。
$(this)との違い
thisはネイティブのDOM要素ですが、$(this)と書くことでjQueryオブジェクトとして扱うことができます
※addClassを使用し、buttonにクラスを追加する処理の例
jQuery
$(".button").on("click", function() {
$(this).addClass("active");
});実行↓
HTML
<div class="box">
<div class="button active">ボタン</div>
</div>このように、$(this)を使うことでクラスの追加やCSS操作など、jQueryのメソッドが使えるようになります。
イベント委譲の場合のthisの挙動
jQueryの.on()は、セレクタを指定することでイベント委譲として書くこともできます。
jQuery
$(".box").on("click", ".button", function() {
console.log(this);
});このコードは、.boxにイベントを設定し、その配下にある.buttonがクリックされたときに処理が実行されます。
一見すると.boxにイベントを設定しているため、thisも.boxを指しそうですが、実際にはクリックされた.button要素を指します。
違いのポイント
どちらの場合もthisは「クリックされた要素」を指しますが、違いはイベントの設定方法にあります。
| 直接指定 | $(“.button”).on(“click”, function() { }); | その場に存在する要素のみ |
| イベント委譲 | $(“.box”).on(“click”, “.button”, function() { }); | 後から追加された要素にも対応 |
活用例
※appendを使用し、box内にもう一つボタンを追加する処理の例
jQuery
$('#test').on('click', function() {
$('.box').append('<div class="button">追加ボタン</div>');
});このように要素を後から追加する場合あらかじめイベント委譲で書いておくことで、新しく追加された.buttonにもクリックイベントを適用できます。
まとめ
jQueryにおけるthisは、イベントが発生した要素自身を指す重要な概念です。
一見シンプルですが、イベント処理やDOM操作を理解するうえで欠かせないポイントです。
実際に動作を確認しながら試してみることで、より理解が深まるのでぜひ試してみてください。
