JavaScript | addEventListener()でthisは非推奨？使わない方が良い？

2023-10-16JavaScript イベント,JavaScript

JavaScriptのaddEventListener()メソッドで「this」は非推奨なのか、使わない方が良いのかについて紹介しています。

1. addEventListener()でthisは非推奨ではない
2. addEventListener()をアロー関数で記述した場合のthisについて

addEventListener()でthisは非推奨ではない

JavaScriptのaddEventListener()メソッド内での「this」は、イベントリスナーがアタッチされた要素を示しますが、非推奨ではありません。
addEventListener()メソッドにて「this」は一般的に利用されています。

addEventListener()メソッド内での「this」は、イベントがアタッチしている要素のオブジェクト、コールバック関数での引数「event」や「e」が持つ「target」と同等です。

例えばボタン要素を変数名「btn」として取得してイベントを作成した場合、「this」「e.target」「btn」をそれぞれコンソールログに出力した場合、同じ結果となります。

※ アロー関数では「this」の扱いが変わるので注意。下記参照。

<p><button id="btn" type="button">動作サンプル用ボタン</button></p>

// ボタン要素を取得
let btn = document.querySelector('#btn');

// クリックイベントを作成
btn.addEventListener("click", function (e) {
	// 以下の3つは同じ結果を返す
	console.log(this);
	console.log(e.target);
	console.log(this);
});

addEventListener()をアロー関数で記述した場合のthisについて

addEventListener()メソッドをアロー関数で記述する事も少なくありませんが、この場合「this」はグローバルコンテキストまたは親の関数のコンテキストを示します。

例えば、アロー関数で記述した以下のイベント内ではデフォルトの場合「this」はウィンドウオブジェクトを返している事が確認できます。

// ボタン要素を取得
let btn = document.querySelector('#btn');

// クリックイベントを作成
btn.addEventListener('click', (e) => {
	console.log(this);
	console.log(e.target);
	console.log(btn);
});