マウスオーバー元の要素を取得したい

すいません質問があります。

マウスオーバー元の要素をConsole logで表示させたいです。

例えば、下記のようなClassがあるとします。

<div class="test">a</div>
<div class="test">b</div>
<div class="test">c</div>
<div class="test">d</div>
<div class="test">e</div>

もし、bの要素でマウスオーバーした場合、console.logにて b　と出力させたいです。

var x = document.getElementsByClassName('test');

var y = function(){
for(i=0; i<x.length; i++){
console.log(test[i]);
}
}

x.onmouseover = y

こちらを実行した場合、a～eのどれかをマウスオーバーした時点で
a
b
c
d
e

と表示されます。
しかし、私が望む結果は、
aをマウスオーバーしたら a, bをマウスオーバーしたらb を表示させることです。


お手数をおかけしますがよろしくお願いいたします。

No.2 回答者： fujillin 回答日時： 2020/06/11 09:44

No1です。

No1の前半の場合、対象DIVが動的に増減するような場合でも対応が可能です。
ご提示の部分だけでは上位要素が不明ですので、documentで捉えることにすればこんな感じでしょうか？
document.addEventListener('mouseover', (e) => {
let t = e.target;
if(t.classList.contains('test')) console.log(t.textContent);
});

後半の場合は、ほぼそのままですね。
getElementsByClassNameだとforEachが使えないようなので、少し変えています。

document.querySelectorAll('.test').forEach((elm) => {
elm.addEventListener('mouseover', function(){
console.log(this.textContent);
});
});
（thisを利用する場合はアロー関数は使えません。その場合はe.targetから参照してください）

この回答へのお礼

ありがとうございます！

お礼日時：2020/06/11 11:34

No.1 ベストアンサー 回答者： fujillin 回答日時： 2020/06/10 22:01

こんばんは

テスト環境がないので確認してはいませんが・・・

div群の上位要素にイベントを設定しておくと、イベント発生時に第一引数にイベントオブジェクトが渡されますので、event.target で実際の発生要素を取得できます。
https://developer.mozilla.org/ja/docs/Web/API/Ev …

あるいは、全部にイベントを設定するなら、this に当該要素がセットされていたと記憶しています。
こちらの場合でも、勿論、イベントオブジェクトから取得することも可能です。

この回答へのお礼

ありがとうございます！

thisを活用して取得する方法でなんとかできました。
今日わざわざスクリプトも作成頂いてほんとにありがとうございます。
大変助かりました。

お礼日時：2020/06/11 11:34