mouseenter
イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発生した要素の中に移動したときに Element
に発生します。
バブリング | なし |
---|---|
キャンセル | 不可 |
インターフェイス | MouseEvent |
イベントハンドラープロパティ | onmouseenter |
使用上の注意
mouseenter
は mouseover
と似ていますが、バブリングしない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。

mouseenter
が送信されます。ここでポインターがテキストに達した時、階層の4つの要素に4つのイベントが送信されます。

mouseover
イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。深い階層では、数多くの mouseenter
イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は mouseover
イベントを待ち受けした方が優れています。
対応する (マウスがコンテンツ領域から出たときに要素に発生する) mouseleave
と組み合わせると、 mouseenter
イベントは CSS の :hover
疑似クラスととても似た方法で動作します。
例
mouseover
のドキュメントには、 mouseover
と mouseenter
の間の違いを説明する例があります。
mouseenter
以下は端的な例ですが、 mouseenter
イベントを使用して、マウスが割り当てられた空間に入ったときに div
の境界を変化させます。そして、リストに mouseenter
または mouseleave
イベントの回数を示す項目を追加します。
HTML
<div id='mouseTarget'>
<ul id="unorderedList">
<li>No events yet!</li>
</ul>
</div>
CSS
div
を整形してもっと目立つようにします。
#mouseTarget {
box-sizing: border-box;
width:15rem;
border:1px solid #333;
}
JavaScript
var enterEventCount = 0;
var leaveEventCount = 0;
const mouseTarget = document.getElementById('mouseTarget');
const unorderedList = document.getElementById('unorderedList');
mouseTarget.addEventListener('mouseenter', e => {
mouseTarget.style.border = '5px dotted orange';
enterEventCount++;
addListItem('This is mouseenter event ' + enterEventCount + '.');
});
mouseTarget.addEventListener('mouseleave', e => {
mouseTarget.style.border = '1px solid #333';
leaveEventCount++;
addListItem('This is mouseleave event ' + leaveEventCount + '.');
});
function addListItem(text) {
// 指定されたテキストを使用して新しいテキストノードを生成する
var newTextNode = document.createTextNode(text);
// 新しい li 要素を生成する
var newListItem = document.createElement("li");
// テキストノードを li 要素に追加する
newListItem.appendChild(newTextNode);
// リストに新しく生成したリスト項目を追加する
unorderedList.appendChild(newListItem);
}
結果
仕様書
仕様書 | 状態 |
---|---|
UI Events mouseenter の定義 |
草案 |
Document Object Model (DOM) Level 3 Events Specification mouseenter の定義 |
廃止された |
ブラウザーの対応
BCD tables only load in the browser