📝
addEventListener内で'this'を使うときの注意
環境
- Google Chrome v109
参考
アロー関数は独自の this コンテキストを持たない
とのこと
my_element.addEventListener('click', (e) => {
console.log(this.className) // 注意: `this` は `my_element` じゃないよ
console.log(e.currentTarget === this) // ログに `false`
})
なので
my_element.addEventListener('click', function (e) {
console.log(this.className) // ログに my_element の classname が出力される
console.log(e.currentTarget === this) // ログに `true`
})
これならOK
ハンドラー関数を addEventListener() を使って要素に装着したとき、ハンドラーの中の this の値は要素への参照となります。これはハンドラーに渡された event 引数の currentTarget プロパティの値と同じです。
余談
イベントハンドラー (例えば onclick) が HTML ソース内の要素に指定されていた場合、属性値の JavaScript コードは、 addEventListener() を使用するような方法で this の値を結び付けたハンドラー関数に置き換えられます。コード内に this が現れた場合には、要素への参照を表します。
<table id="my_table" onclick="console.log(this.id);"><!-- `this` refers to the table; logs 'my_table' -->
...
</table>
あとがき
案外検索で最初に出てこなかったので、こういう逆引き記事って大事かと思いました。
挙動が変わってたら教えて下さい。
修正します。
Discussion