onmouseleaveとonmouseoutの基本動作
onmouseleaveとonmouseoutは、要素外にマウスカーソルが移動した時に処理を実行出来ます。
以下は、onmouseleaveの例です。
【onmouseleave利用例】
<script>
function func1() {
var x = document.getElementById("test1");
x.style.color = "red";
}
</script>
<div onmouseleave="func1();" id="test1" >
ここの範囲外にマウスを移動させます。
</div>
赤字部分で、onmouseleaveによりfunc1を呼び出し、文字を赤色に変えています。
実行例は、以下の通りです。尚、分かり易いように枠を付け、広くならないよう幅も指定しています。
要素内にマウスカーソルを移動した後、要素外に移動すると、文字が赤色に変わります。
上記は、onmouseleaveの代わりにonmouseoutを使っても同じ動作になります。
子要素への移動時の違い
onmouseleaveは子要素へ移動した時はイベントになりませんが、onmouseoutはイベントになります。
以下は、onmouseleaveの例です。
【子要素がある時のonmouseleave利用例】
<script>
function func2() {
var x = document.getElementById("test2");
x.style.color = "red";
}
</script>
<div onmouseleave="func2();" id="test2">
1)範囲外にマウスを移動させると赤になります。
<img src="11.png" alt="スペードA">
2)トランプ画像にマウスを移動させても赤になりません。
</div>
11.pngはトランプの画像とします。
赤字部分でマウスカーソルが枠外に移動すると、赤色に変わるようにしています。しかし、子要素であるトランプ画像に移動しても赤色に変わりません。
実行例は、以下の通りです。尚、5秒程度で戻るように追加で処理を入れています。
1)範囲外にマウスを移動させると赤になります。
2)トランプ画像にマウスを移動させても赤になりません。
枠外に移動させると赤になります。5秒すると元に戻ります。枠内に移動した後、子要素であるトランプ上にマウスに移動させても色が変わりません。
スクリプト赤字のonmouseleaveをonmouseoutに変えた時の実行例は、以下の通りです。
1)範囲外にマウスを移動させると赤になります。
2)トランプ画像にマウスを移動させても赤になります。
枠外に移動させると赤になるのは、onmouseleaveの時と同じです。5秒すると元に戻ります。onmouseleaveと違って、子要素であるトランプ上に移動させても赤になります。
バブリングの違い
onmouseleaveはバブリング(子要素から親要素へ伝播)しませんが、onmouseoutはバブリングします。
以下は、onmouseoutを使った例です。
【onmouseoutのバブリング例】
<script>
function func4() {
var x = document.getElementById("test4");
x.style.color = "red";
setTimeout(function(){x.style.color="black";},2000);
}
</script>
<div onmouseout="func4();" id="test4">
1)範囲外にマウスを移動させると赤になります。2秒で黒に戻ります。<br>
2)トランプ画像にマウスを移動させても赤になります。2秒で黒に戻ります。
<img src="11.png" alt="スペードA">
3)再度トランプ画像の外にマウスを移動させても赤になり、2秒で黒に戻ります。</p>
</div>
onmouseoutから呼び出されるfunc4では、文字を赤字に変更して2秒後に黒へ戻しています。onmouseoutは、<div>がターゲットです。
実行例は、以下の通りです。
1)範囲外にマウスを移動させると赤になります。2秒で黒に戻ります。
2)トランプ画像にマウスを移動させても赤になります。2秒で黒に戻ります。
3)再度トランプ画像の外にマウスを移動させても赤になり、2秒で黒に戻ります。
枠外にマウスを移動させると文字が赤になりますが、2秒で黒に戻ります。これは、divで指定したonmouseoutによりfunc4が呼び出されるためです。トランプ画像上にマウスを移動させても同様です。
その後、トランプ画像外に移動させても文字が赤になり、2秒後に黒に戻ります。これは、imgにはonmouseoutが記述されていませんが、バブリングによりdivのonmouseoutが動作するためです。
onmouseoutの代わりにonmouseleaveを使った場合の実行例は、以下の通りです。
1)範囲外にマウスを移動させると赤になります。2秒で黒に戻ります。
2)トランプ画像にマウスを移動させても色は変わりません。
3)再度トランプ画像の外にマウスを移動させても色は変わりません。
枠外にマウスを移動させると文字が赤になり、2秒後に黒に戻るのはonmouseoutと同じです。
onmouseleaveは、子要素であるトランプ画像上にマウスを移動させても色が変わらないのは既に説明した通りです。
その後、トランプ画像外に移動させても赤になりません。これは、子要素から親要素への伝播であるバブリングが発生しないためです。
まとめ
onmouseleaveは、要素外に移動した時に処理を実行し、それ以外は実行しない時に使います。つまり、ターゲットとなる要素で1回だけ実行したい時に使います。
onmouseoutは、要素外に移動する時だけでなく、子要素に移動した時、子要素から戻る時等、複数回イベントを実行する時に使います。
尚、バブリングは子要素でイベントが発生した時に親要素へ伝播します。つまり、より親側(外側)にoumouseoutが記述されている必要があります。
このため、子要素でonmouseoutを記述していて親要素から外へマウスを移動させても処理は実行されません。
