素のJavaScriptを使った、マウスオーバー（ホバー）している要素を取得する方法を紹介します。この方法を使うと、マウスカーソルが重なっている要素を取得することができます。とっても簡単ですよ！
マウスオーバーしている要素を取得する
html
htmlはどのような記述になっていても基本大丈夫です。
JavaScript
JavaScriptとして、次のようなコードを書きます。
document.addEventListener("mouseover", function(event) {
console.log(event.target); //event.targetの部分がマウスオーバーされている要素になっています
})JavaScriptの解説
document.addEventListener("mouseover", function(event) { ...
上の部分では、マウスカーソルが重なる要素が変わるたびに、function(event) { ~~~ }の部分で定義している関数が呼ばれるようにしています。
function(event)のように引数を指定しているのは、mouseoverイベントにかかわる処理を、関数の中で行えるようにするためです。この引数（イベント引数）には必ずしも「event」と書かなくても大丈夫です。
「a」でも良ければ「b」でも大丈夫です。慣例として「event」や「e」と書くため、今回はわかりやすいように「event」を使いました
event.target
上のようにイベント引数に対して「.target」とつけることで、マウスオーバーイベントが発生した要素を取得できています。
取得しているものの正体
マウスオーバーしている要素を取得すると言っても、一体何が取得できているのでしょうか？ここで言う「要素」って具体的に何なのかイマイチわかりづらいですよね。
ここで取得している「要素」の実体は、Elementオブジェクトと呼ばれるオブジェクトです。
このオブジェクトは、簡単に言うと「document.getElementById(“~~~”)」で取得するものと似ています。
let target = document.getElementById('target')
上のようにしてhtml要素を取得できるオブジェクトに似ています。共通する特徴には次のようなものがあります。
- 要素が持っている属性を取得することができる
- idとclassを取得することができる
- 要素のタグ名を取得することができる
- 子要素を追加することができる
- 属性を削除することができる
Elementオブジェクトに関する詳しいことは、公式のドキュメントに載っているのでもしよければ見てみてください。
応用の仕方
このやり方で要素を取得すると、逆に「マウスオーバーしている要素以外を○○する」とうような事ができるようになります。
document.addEventListener('mouseover', function(event) {
event.target.id = 'target';
var other = document.querySelectorAll(':not(#sample)'); //マウスオーバーしている要素以外を取得
other.forEach(function(element, index) {
//マウスオーバーしている要素に対して操作
})
})下の例では、マウスオーバーしている要素以外の背景を灰色にしてみました。
コメント