JavaScriptにおけるthisオブジェクト

ここでは、イベントハンドラ関数内で利用可能な特別なオブジェクト thisについて学びます。このオブジェクトは、イベントが発生した要素を指し示します。

thisオブジェクトは、イベントが発生した要素と、その結果として何らかのアクションが行われる要素が同じである場合に便利です。

例えば、input要素がある場合、そこにフォーカス喪失(blur)イベントのハンドラをバインドし、そのイベント発生時にinputのテキストに対して何かを行うことができます。説明したことを実装してみましょう。以下のinput要素があるとします:

<input id="elem" value="text">

この要素への参照を変数 elemに取得しましょう:

let elem = document.querySelector('#elem');

この要素に blurイベントのハンドラ関数をバインドします:

elem.addEventListener('blur', func);

この関数 funcの内部では、input要素を指す thisオブジェクトが利用可能です:

function func() {
	console.log(this); // 当該要素への参照を含みます
}

input要素の value属性の内容を出力してみましょう:

function func() {
	console.log(this.value); // 属性の内容を出力します
}

では、inputに何らかのテキストを書き込んでみましょう:

function func() {
	this.value = '!!!';
}

無名関数も使用できます:

elem.addEventListener('blur', function() {
	this.value = '!!!';
});

input要素が与えられます。このinputがフォーカスを得たときに数値 1を入力し、フォーカスを失ったときに数値 2を入力してください。ハンドラ関数内でinputを参照するには thisオブジェクトを使用してください。

数値 1が値(初期値)として設定されているボタンがあります。このボタンがクリックされるたびに、その値が1ずつ増加するようにしてください。