アロー関数内のthisに任意のオブジェクトを指定することは可能でしょうか？

addEventListener('DOMContentLoaded', () => {
  let img;
  img = document.getElementById('cat-img');

  img.addEventListener('mouseover', function() {
    this.src = 'img/cat2.jpg';
    console.log(this); // thisはimg
  });
});


addEventListener('DOMContentLoaded', () => {
  let img;
  img = document.getElementById('cat-img');

  img.addEventListener('mouseover', () => {
    this.src = 'img/cat2.jpg';
    console.log(this); // thisがwindowを指してしまう…。
  });
});

bindを利用してthisがimgを参照するようにしたいです。
よろしくお願い致します。

行動規範の内容に同意します

回答3件

アロー関数に bind() はできないですが、このケースなら this をやめて event.target でよいんじゃないでしょうか。

js
1  img.addEventListener('mouseover', event => {
2    event.target.src = 'img/cat2.jpg';
3  });

投稿2022/01/11 13:41

int32_t

総合スコア21756

taka_oct092018

2022/01/12 09:13

int32_t様、返信ありがとうございます。なるほど、event.targetを利用する方法もあったのですね。目からウロコです。

行動規範の内容に同意します

bind が利用できる以前の古典的な？

js
1(function () {
2  this.addEventListener('mouseover', () => {
3    this.src = 'img/cat2.jpg';
4    console.log(this);
5  });
6}).call (document.getElementById('cat-img'));

もし以下のコードの意図がわかってくれるなら・・・
イベントはルートで監視する

js
1<!DOCTYPE html>
2<meta charset="utf-8"><html>
3<title></title>
4<style>
5p { position: absolute; }
6</style>
7<body>
8
9<script>
10
11const {PI, sin, cos} = Math, D = PI / 6;
12for (let i = 1; i < 13; i++) {
13  let p = document.body.appendChild (document.createElement ('p'));
14  p.textContent = i;
15  p.style.top = (100 - cos (i * D) * 100 |0) + 'px';
16  p.style.left = (100 + sin (i * D) * 100 |0) +'px';
17  p.id = 'p' + i;
18}
19
20
21document.addEventListener('mouseover', (event) => {
22  let e = event.target;
23  e.id && console.log(e.id);
24});
25
26</script>
27