onmouseenterイベント
例
マウスポインタを画像に移動するときにJavaScriptを実行します。
<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">
以下の「自分で試してみてください」の例をもっと見てください。
定義と使用法
onmouseenterイベントは、マウスポインタが要素に移動したときに発生します。
ヒント:このイベントは、マウスポインターが要素の外に移動したときに発生するonmouseleaveイベントと一緒に使用されることがよく あります。
ヒント: onmouseenterイベントは、 onmouseover イベントに似ています。唯一の違いは、onmouseenterイベントがバブルしないことです(ドキュメント階層を上に伝播しません)。違いをよりよく理解するには、このページの下部にある「その他の例」を参照してください。
ブラウザのサポート
表の数字は、イベントを完全にサポートする最初のブラウザーバージョンを示しています。
Event | |||||
---|---|---|---|---|---|
onmouseenter | 30.0 | 5.5 | Yes | 6.1 | 11.5 |
構文
HTMLの場合:
<element onmouseenter="myScript">
JavaScriptの場合:
object.onmouseenter = function(){myScript};
JavaScriptでは、addEventListener()メソッドを使用します。
object.addEventListener("mouseenter", myScript);
注: addEventListener ()メソッドは、Internet Explorer8以前のバージョンではサポートされていません。
技術的な詳細
泡: | 番号 |
---|---|
キャンセル可能: | 番号 |
イベントタイプ: | MouseEvent |
サポートされているHTMLタグ: | <base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>、および<title>を除くすべてのHTML要素 |
DOMバージョン: | レベル2のイベント |
その他の例
例
この例は、onmousemove、onmouseenter、およびmouseoverイベントの違いを示しています。
<div onmousemove="myMoveFunction()">
<p id="demo">I will demonstrate onmousemove!</p>
</div>
<div onmouseenter="myEnterFunction()">
<p id="demo2">I will demonstrate onmouseenter!</p>
</div>
<div onmouseover="myOverFunction()">
<p id="demo3">I will demonstrate onmouseover!</p>
</div>