[Q&A] addEventListener内のthisについて

addEventListener内のthisについて

解決したいこと

javascriptのaddEventListener内でthisを使ったら上手くいきませんでした。
なぜなのでしょうか？

発生している問題・エラー

  for (let i = 0; i < cmds.length; i++) {
    cmds[i].addEventListener('click', (e) => {
      e.preventDefault();
      if (confirm('削除しますか？')) {
        document.getElementById(`form_${this.dataset.id}`).submit();
      }
    });
  }

1Answer

@uasi posted at 2021-03-22

アロー関数 () => { ... } の中の this は常に外側の this と一致するからです。

this がイベントリスナーの対象の要素になってほしいならアロー関数ではなく function 式を使ってください。

  for (let i = 0; i < cmds.length; i++) {
    cmds[i].addEventListener('click', function(e) {
      e.preventDefault();
      if (confirm('削除しますか？')) {
        document.getElementById(`form_${this.dataset.id}`).submit();
      }
    });
  }

2Like

Are you sure you want to delete the question?

addEventListener内のthisについて

解決したいこと

発生している問題・エラー

1Answer

Your answer might help someone💌