.mouseover()【《マウス進入》イベントハンドラ設定・実行】

メモ

構文

説明構文戻り値
《マウス進入》
イベントハンドラ設定
.mouseover( handler ) 1.0

handler:イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(this)該当要素 (HTML5:基本DOM要素 参照)
戻り値説明
false
その他
.on()【イベントハンドラ設定】のイベントのバブルアップ・処理抑止 参照
処理続行

.on( "mouseover", handler )の省略形
jQuery
.mouseover( [eventData ], handler ) 1.4.3

Anything eventData:イベントデータ
handler:イベントハンドラ
引数説明
[ Event eventObject ]イベントオブジェクト
(イベントデータは、eventObject.data で参照)
(this)該当要素 (HTML5:基本DOM要素 参照)
戻り値説明
false
その他
.on()【イベントハンドラ設定】のイベントのバブルアップ・処理抑止 参照
処理続行

.on( "mouseover", data, handler )の省略形
jQuery
《マウス進入》
イベントハンドラ実行
.mouseover() 1.0

.trigger( "mouseover" )の省略形
jQuery

関連

<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() 【イベントのバブルアップあり】