【JavaScript】class取得をしてaddEventListenerでイベント処理をする際にハマった二つの落とし穴

こんにちは。ロジカルスタジオPR部です♪

以前、JavaScriptを書いていて、

「class名が同じものを全て取得してそれぞれにイベント処理を行う」

ということに大きく、大きく、躓いてしまいました。

今回は、簡易的なドロップダウンメニューを作成していきながら失敗例と共に解説することで、

このようなことで、丸一日費やしてしまう人を1人でも減らしたいと思っています。

【最初に書いたコード(失敗例)】

まずは、classを取得して「マウスが乗ったら表示・マウスが離れたら非表示」という処理をしたかったので、このように書きました。

var trigger = document.getElementsByClassName("trigger");

trigger.addEventListener('mouseenter', function() {
   trigger.firstElementChild.style.display = 'block';
});

trigger.addEventListener('mouseleave', function() {
   trigger.firstElementChild.style.display = 'none';
});

ですが、要素は微動だにしません。

【動かなかった理由】

「最初に書いたコード(失敗例)」が動かなかった理由は下の二つです。

addEventListenerで全ての要素にイベント処理をかけれていない
戻り値が配列ではない

では、一つずつ解説していきます。

1. addEventListenerで全ての要素にイベント処理をかける

まず、addEventListenerで全てのclassに処理をかけて！と言っていないことが原因です。なので、forEach文の繰り返し処理を使って、配列の全てに処理をかけて！と言ってやる必要があります。

var trigger = document.getElementsByClassName("trigger");

  trigger.forEach(function(target) {

  target.addEventListener('mouseenter', function() {
     target.firstElementChild.style.display = 'block';
  });

  target.addEventListener('mouseleave', function() {
     target.firstElementChild.style.display = 'none';
  });
});

しかし、これも全然反応してくれません。

なぜでしょうか。反抗期でしょうか。