javascriptの「getElementsByTagName」を使い、Aタグのホバー時に発火させるアクションを作る

Question

Aタグにホバーしたらアラートを出したいのですが、どのように書けばうまくいくでしょうか？初心者ですみませんが、宜しくお願いします。

<a href="#">アラートする</a>
<button>アラートしない</button>
<span>アラートしない</span>

var target = document.getElementsByTagName("A");
target.addEventListener('mouseenter', () => {
alert('ホバーしました');
}, false);

Answer 1

手っ取り早いのはdocumentに処理を入れて継承すること

<script>
document.addEventListener('mouseenter', (e) => {
  if(e.target.nodeName=="A") alert('ホバーしました');
},true);
</script>
<a href="#">アラートする</a>
<button>アラートしない</button>
<span>アラートしない</span>

要素にイベントをつけるならループ処理が必要

<script>
window.addEventListener('DOMContentLoaded', function(e){
  [].forEach.call(document.querySelectorAll('a'),(x)=>{
    x.addEventListener('mouseenter',()=>{
       alert('ホバーしました2');
    });
  });
});
</script>
<a href="#">アラートする</a>
<button>アラートしない</button>
<span>アラートしない</span>

Comments

[ninjanin]

２つめのループ処理の方はできませんでしたが、難解なのでこちらは置いておきまして、、（すみません）

１つめの方についてお聞きしたいのですが、Aが複数あるとき、連続でホバーしてもアラートの処理はその都度実行されますか？アラートが１回出たらおしまいなように見えてしまうのですが、実際は裏でちゃんとその都度発火しているのでしょうか？

[yambejp]

アラートが表示されている最中に別のアンカーにmouseenterしてアラートが
追加で表示されるかという質問ですか？
もしそうならアラートはwindowから処理を取り上げてしまうので、
アラート中は何をやっても無駄です。
OKで閉じたあと別のアンカーにhoverすれば再度alertが表示されるのはわかると思います

検証するならalertはやめて、console.logなど開発ツールを使うべきです

[ninjanin]

アラートはそうなんですね。ありがとうございます。ＣＳＳを変えても１回目以降わからないし、どうすればいいか悩んでましたが、コンソールに出せば何回目でも出ますね。ありがとうございます。

でも、次のように変えても、１回目でもコンソールに何もでないのすが、、すみません。

document.addEventListener('mouseenter', (e) => {
if(e.target.nodeName=="A") console.log('ホバーしました');
},true);

[yambejp]

おかしいですね。私の環境では普通に表示されますよ
ブラウザの種類とバージョン、OSはなんでしょう？

[ninjanin]

すみません！検索バーに変なのが入ってたせいでした…。申し訳ございません。できました。ありがとうございます。

Answer 2

こんなのは如何でしょうか

var elements = document.getElementsByTagName("A");
for(var i=0; i<elements.length; i++){
	elements[i].addEventListener('mouseover', function(){
		alert('ホバーしました');
	}, false );
}

Comments

[ninjanin]

数を書いてあげることで処理できるのですか。覚えておきます。ありがとうございます。