Element: mouseenter イベント
mouseenter
イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発行された要素の中に移動したときにその要素 (Element
) に発行されます。
バブリング | なし |
---|---|
キャンセル | 不可 |
インターフェイス | MouseEvent |
イベントハンドラープロパティ | onmouseenter |
使用上の注意
mouseenter
は mouseover
と似ていますが、バブリングしない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。
mouseenter
イベントの動作
要素の階層に入った場合、それぞれの要素に 1 つずつ
mouseenter
が送信されます。ここでポインターがテキストに達した時、階層の 4 つの要素に 4 つのイベントが送信されます。
mouseover
イベントの動作
DOM ツリーの最も深い要素に 1 つの
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);
}
結果
仕様書
Specification |
---|
UI Events # event-type-mouseenter |
HTML Standard # handler-onmouseenter |
ブラウザーの互換性
BCD tables only load in the browser