こちらの記事では、JavaScriptのmouseout(マウスアウト)イベントについてサンプルコードを用いて分かりやすく解説しています。
JavaScriptの学習におすすめ参考書
改訂3版JavaScript本格入門 ~モダンスタイルによる基礎から現場での応用まで
先輩くん
10万部突破したJavaScriptの本が大幅増補改訂し7年ぶりに発売されたよ!
後輩ちゃん
最新の基本文法から、開発に欠かせない応用トピックまで学ぶことが出来るよ!
綺麗なコードが書けるようになる!
リーダブルコード-より良いコードを書くためのシンプルで実践的なテクニック
先輩くん
より良いコードを書きたい人におすすめの本だよ!
後輩ちゃん
10以上前の書籍ですが、内容は今でも役に立つものばかりです!
mouseoutイベントとは
mouseoutイベントとは、イベントを設定した要素に一度マウスカーソルを乗せてから離れたタイミングで実行するイベントです。
同じマウスイベントの一つである、mouseover(マウスカーソルが乗ったタイミングでイベント実行)とは対照的のイベントになります。
mouseoutイベントの使い方
mouseoutイベントは「addEventListenerメソッド」「onmouseoutプロパティ」「onmouseout属性」の3つの書き方があります。▼トリガーになる要素を取得(addEventListenerとonmouseoutプロパティで使用)
const elem = document.getElementById('js-elem'); // トリガーになる要素を取得
▼addEventListenerメソッド
elem.addEventListener('mouseout',function(){ // 第一引数にmouseoutを指定
// 処理を記述
});
▼onmouseoutプロパティ
elem.onmouseout = function(){
// 処理を記述
};
▼onmouseout属性
<button onmouseout="mouseoutEvent()">テキスト</button>
<script>
function mouseoutEvent(){
// 処理を記述
};
</script>
サンプルコード
こちらで紹介するサンプルコードは、要素にカーソルを一度乗せてから外すと、背景色が薄緑からオレンジに変化します。<style>
#point{
max-width:500px;
text-align:center;
margin:0 auto;
padding:25px;
background:#DDFFDD;
}
</style>
<div id="point">イベント実行で背景色が変化するよ!</div>
<script>
const point = document.getElementById('point'); // ①
point.addEventListener('mouseout',function(){ // ②
this.style.background="#FFA500"; // ③
})
</script>
実行結果
イベント実行で背景色が変化するよ!
サンプルコード解説
- mouseoutイベントを設定するトリガー要素を取得
- ①で取得した要素にaddEventListenerメソッドの第一引数にmouseoutを指定
- mouseoutイベントが実行された時に、背景色をオレンジに変更する処理を記述