1. salty-byte

    Posted

    salty-byte
Changes in title
+addEventListenerの第2引数によってthisは変わる
Changes in tags
Changes in body
Source | HTML | Preview
@@ -0,0 +1,62 @@
+TypeScript(またはJavaScript)で `EventTarget.addEventListener()` を使用する場合、第2引数の指定方法によって実行時の `this` の中身が変わります。
+今更ながら地味にはまったため、自分用にメモしておきます。
+
+# 確認
+
+確認用にコードを作成しました。
+https://playcode.io/671961
+
+`EventTarget.addEventListener()` 第2引数の指定方法によって、関数show 実行時の `this` は以下のようになります。
+
+```typescript:script.ts
+class ThisTest {
+ constructor() {
+ this.bindEvent();
+ }
+
+ // この関数を呼び出して、thisの中身を判定する。
+ show(e: Event) {
+ console.log(this.constructor.name);
+ }
+
+ bindEvent() {
+ const t1 = document.querySelector('#test1');
+ t1.addEventListener('click', this.show);
+ // => 'HTMLButtonElement'
+
+ const t2 = document.querySelector('#test2');
+ t2.addEventListener('click', this.show.bind(this));
+ // => 'ThisTest'
+
+ const t3 = document.querySelector('#test3');
+ t3.addEventListener('click', (e: Event) => this.show(e));
+ // => 'ThisTest'
+
+ const t4 = document.querySelector('#test4');
+ t4.addEventListener('click', function (e: Event) {
+ console.log(this.constructor.name);
+ // => 'HTMLButtonElement'
+
+ this.show(e);
+ // => 'error: Uncaught TypeError: this.show is not a function'
+ // this.show(e)の `this` がボタン要素を示すため、エラーが発生する。
+ });
+ }
+}
+
+new ThisTest();
+```
+
+```pug:index.pug
+button#test1 テスト1
+button#test2 テスト2
+button#test3 テスト3
+button#test4 テスト4
+```
+
+# 所感
+`EventTarget.addEventListener()` に限った話ではないですが、はまらないように注意したいですね。
+
+# 参考文献
+[JavaScript で陥りやすい失敗例を振り返る](https://qiita.com/yuki153/items/c909c54204eaab6ca1b2)
+[EventTarget.addEventListener()](https://developer.mozilla.org/ja/docs/Web/API/EventTarget/addEventListener)