.mouseout()【《マウス退出》イベントハンドラ設定・実行】

メモ

構文

構文戻り値説明
.mouseout( handler ) 1.0

handler：イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(this)該当要素 (HTML5：基本DOM要素 参照)
戻り値説明
false
その他 		.on()【イベントハンドラ設定】のイベントのバブルアップ・処理抑止 参照
処理続行
jQuery 《マウス退出》イベントハンドラ設定
.on( "mouseout", handler )の省略形
.mouseout( [eventData ], handler ) 1.4.3

Anything eventData：イベントデータ
handler：イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(イベントデータは、eventObject.data で参照)
(this)該当要素 (HTML5：基本DOM要素 参照)
戻り値説明
false
その他 		.on()【イベントハンドラ設定】のイベントのバブルアップ・処理抑止 参照
処理続行
jQuery 《マウス退出》イベントハンドラ設定
.on( "mouseout", data, handler )の省略形
.mouseout() 1.0 jQuery 《マウス退出》イベントハンドラ実行
.trigger( "mouseout" )の省略形

関連

例

<style>
.classMouse { background-color:cyan !important; }
#fieldset1 div, #fieldset2 div { width:200px; height:100px; background-color:lightyellow; border:2px black solid; }
.output { width:300px; height:100px; }
</style>

<fieldset id="fieldset1" class="ex1">
  <legend>.mouseenter() / .mouseleave() 【イベントのバブルアップなし】</legend>
  <div id="div1" class="ex1"></div>
</fieldset>
<p><textarea id="output1" class="output">【出力】</textarea></p>

<fieldset id="fieldset2" class="ex2">
  <legend>.mouseover() / .mouseout() 【イベントのバブルアップあり】</legend>
  <div id="div2" class="ex2"></div>
</fieldset>
<p><textarea id="output2" class="output">【出力】</textarea></p>

<script>
function output(outputId, msg) {
  var $output = $(outputId);
  $output.val($output.val() + "\n" + msg);
}
// .mouseenter() / .mouseleave()
$(".ex1").mouseenter("EX1", function(eventObject) {
  $(this).addClass("classMouse");
  var msg = eventObject.type + " [" + this.id + "] " + eventObject.target.id + " (" + eventObject.data + ")";
  output("#output1", msg);
});
$(".ex1").mouseleave("EX1", function(eventObject) {
  $(this).removeClass("classMouse");
  var msg = eventObject.type + " [" + this.id + "] " + eventObject.target.id + " (" + eventObject.data + ")";
  output("#output1", msg);
});
// .mouseover() / .mouseout()
$(".ex2").mouseover("EX2", function(eventObject) {
  $(this).addClass("classMouse");
  var msg = eventObject.type + " [" + this.id + "] " + eventObject.target.id + " (" + eventObject.data + ")";
  output("#output2", msg);
});
$(".ex2").mouseout("EX2", function(eventObject) {
  $(this).removeClass("classMouse");
  var msg = eventObject.type + " [" + this.id + "] " + eventObject.target.id + " (" + eventObject.data + ")";
  output("#output2", msg);
});
</script>

.mouseenter() / .mouseleave() 【イベントのバブルアップなし】

.mouseover() / .mouseout() 【イベントのバブルアップあり】