onmouseenterイベント

DOM イベント MouseEvent

定義と使用法

マウス指針が要素に移動したときにonmouseenterイベントが発生します。

ヒント：このイベントは通常以下とともに使用されます onmouseleave イベント一緒に使用すると、マウス指標が要素から外れたときにイベントが発生します。

ヒント： onmouseenterイベントは以下に似ています onmouseover イベント。唯一の違いは、onmouseenterイベントがバブル（上位のドキュメント構造に伝播しません）ではないことです。ページの下部にさらに多くの例があります。

実例

例1

マウス指標を画像に移動するとJavaScriptを実行します：

<img onmouseenter="bigImg(this)" src="smiley.gif" alt="Smiley">

実際に試してみてください

例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>

実際に試してみてください

文法

HTMLで：

<element onmouseenter="myScript">

実際に試してみてください

JavaScriptで：

object.onmouseenter = function(){myScript};

実際に試してみてください

JavaScriptでaddEventListener()メソッドを使用する：

object.addEventListener("mouseenter", myScript);

実際に試してみてください

注：Internet Explorer 8またはそれ以前のバージョンではサポートされていません addEventListener()メソッド。

技術的な詳細

バブル： サポートされていません
キャンセル可能： サポートされていません
イベントタイプ： MouseEvent
サポートされているHTMLタグ： すべてのHTML要素、以下のものを除いて：<base>、<bdo>、<br>、<head>、<html>、<iframe>、<meta>、<param>、<script>、<style>および<title>
DOMバージョン： レベル2イベント

ブラウザのサポート

このテーブルの数字は、そのイベントを完全にサポートする最初のブラウザバージョンを示しています。

イベント Chrome IE Firefox Safari Opera
onmouseenter 30.0 5.5 サポート 6.1 11.5
DOM イベント MouseEvent