JavaScriptを使って、mouseoutイベントを設定する方法などについて説明します。
実際に動くサンプルを使いつつ、以下について書いています。
・mouseoutイベントをつける方法
・ページからマウスを外すと画像が表示されるサンプル
mouseoutイベントとは？
mouseoutイベントは、ユーザーのマウスが、イベントを設定した要素から離れたときに発生します。
このイベントを活用することで、要素からカーソルが外れた際に特定のUI変更や動作を実現できます。
mouseoutイベントをつける方法
mouseoutイベントをつける方法です。
属性値を設定するか、addEventListenerメソッドを使って設定できます。
DOMにmouseoutを使ってイベントをつける
HTMLのonmouseout属性を使って、直接イベントを設定する方法です。
下記のコードでは、divタグの要素内にマウスカーソルを合わせてから、カーソルが外れると色が変わるようにしてみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mouseoutのテスト</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightblue;
border: 1px solid black;
text-align: center;
line-height: 200px;
}
</style>
<script>
function changeColor() {
const box = document.querySelector('#box');
box.style.backgroundColor = 'lightgreen';
}
</script>
</head>
<body>
<div id="box" onmouseout="changeColor()">マウスを乗せてから外す！</div>
</body>
</html>
HTMLの解説
bodyタグの中に、divタグをひとつ用意して、マウスが外された時に色が変わるようにしています。
onmouseout属性を指定していて、マウスが外されるとchangeColor関数が実行されます。
JavaScriptの解説
changeColor関数では、querySelectorメソッドを呼び出して、divタグ取得するようにしています。
そして、取得したdivタグの背景色にlightgreenを設定しました。
これで、マウスが外されると背景色がlightgreenになります。
動作確認
実際に動作させると、下記のように要素からマウスを外したときだけ、div要素の色が変わっていることが確認できました。
addEventListenerを使ってイベントをつける
addEventListenerメソッドを使うことでも、対象の要素にmouseoutイベントをつけることができます。
先ほどのコードを少し変えて、addEventListenerメソッドでイベントをつけてみました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mouseoutのテスト</title>
<style>
#box {
width: 200px;
height: 200px;
background-color: lightblue;
border: 1px solid black;
text-align: center;
line-height: 200px;
}
</style>
<script>
window.onload = () => {
const box = document.querySelector('#box');
box.addEventListener('mouseout', () => {
box.style.backgroundColor = 'lightgreen';
});
};
</script>
</head>
<body>
<div id="box">マウスを乗せてから外す！</div>
</body>
</html>
HTMLの解説
先ほどと同様にdivタグを用意しています。
JavaScriptからイベントを追加するため、onmouseout属性を削除しています。
JavaScriptの解説
window.onloadを使用して、ページの読み込み時に処理されるようにしています。
最初にquerySelectorで、divタグの要素を取得しました。
そのあとに取得した要素から、addEventListenerメソッドを使用してイベントをつけています。
第1引数にmouseoutを指定して、mouseoutイベントをつけています。
第2引数にイベントが実行された時の処理を、無名関数で書いています。
実際に動作させると、先ほどと同様に、要素からマウスを外すと背景が変わりました。
ページからマウスを外すと画像が表示されるサンプル
mouseoutを使って、ブラウザからマウスを外すと、画像が表示されるようなサンプルを作成しました。
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<title>Mouseoutで画像表示</title>
<script>
window.onload = () => {
document.addEventListener('mouseout', function (event) {
if (!event.relatedTarget) {
document.getElementById('image').style.display = 'block';
}
});
};
</script>
</head>
<body>
<div id="message">ブラウザからマウスを外してください</div>
<img id="image" src="image1.png" style="display: none; width: 300px;">
</body>
</html>
HTMLの解説
bodyタグの配下に、タグを2つ配置しています。
1つめは単純にメッセージを表示しているdivタグです。
2つめが、最初に非表示にしておくimageタグです。(display:noneで非表示にしています)
マウスがページから離れると、この画像が表示されます。
JavaScriptの解説
documentに対して、addEventListenerメソッドを使ってmouseoutイベントをつけています。
これで、ページ全体にmouseoutイベントが効きます。
ページのメッセージなど他の要素にのったときにも、mouseoutイベントが走るので
「!event.relatedTarget」と判定して、要素にのっていないときに画像を表示するようにしました。
マウスがページから外れると、imageタグのdisplay属性をblockにして表示しています。
動作確認
実際に動作を確認すると、下記のようにページからマウスカーソルが出た時に画像が表示されるようになりました。
JavaScriptでmouseoutイベントを設定する方法まとめ
今回はJavaScriptのmouseoutイベントを設定する方法について書きました。
まとめると、下記のようになります。
・mouseoutイベントはonmouseoutとaddEventListenerで設定することができた。
コメント