1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
|
---
title: 'Element: mouseenter イベント'
slug: Web/API/Element/mouseenter_event
tags:
- API
- Cursor
- DOM
- Element
- Event
- Interface
- MouseEvent
- Reference
- events
- mouse
- mouseenter
- pointer
- イベント
translation_of: Web/API/Element/mouseenter_event
---
<div>{{APIRef}}</div>
<p><span class="seoSummary"><strong><code>mouseenter</code></strong> イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発生した要素の中に移動したときに {{domxref("Element")}} に発生します。</span></p>
<table class="properties">
<tbody>
<tr>
<th scope="row">バブリング</th>
<td>なし</td>
</tr>
<tr>
<th scope="row">キャンセル</th>
<td>不可</td>
</tr>
<tr>
<th scope="row">インターフェイス</th>
<td>{{domxref("MouseEvent")}}</td>
</tr>
<tr>
<th scope="row">イベントハンドラープロパティ</th>
<td>{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}</td>
</tr>
</tbody>
</table>
<h2 id="Usage_notes" name="Usage_notes">使用上の注意</h2>
<p><code>mouseenter</code> は {{domxref("Element/mouseover_event", "mouseover")}} と似ていますが、<a href="/ja/docs/Web/API/Event/bubbles">バブリング</a>しない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。</p>
<div style="column-width: 455px; border: 1px solid; padding: 5px; margin-bottom: 10px;">
<div style="text-align: center;"><img alt="mouseenter.png" class="default internal" src="/@api/deki/files/5908/=mouseenter.png"></div>
要素の階層に入った場合、それぞれの要素に1つずつ <code>mouseenter</code> が送信されます。ここでポインターがテキストに達した時、階層の4つの要素に4つのイベントが送信されます。
<div style="text-align: center;"><img alt="mouseover.png" class="default internal" src="/@api/deki/files/5909/=mouseover.png"></div>
DOM ツリーの最も深い要素に1つの <code>mouseover</code> イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。</div>
<p>深い階層では、数多くの <code>mouseenter</code> イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は <code>mouseover</code> イベントを待ち受けした方が優れています。</p>
<p>対応する (マウスがコンテンツ領域から出たときに要素に発生する) <code>mouseleave</code> と組み合わせると、 <code>mouseenter</code> イベントは CSS の {{cssxref(':hover')}} 疑似クラスととても似た方法で動作します。</p>
<h2 id="Examples" name="Examples">例</h2>
<p><a href="/ja/docs/Web/Events/mouseover#Example"><code>mouseover</code></a> のドキュメントには、 <code>mouseover</code> と <code>mouseenter</code> の間の違いを説明する例があります。</p>
<h3 id="mouseenter">mouseenter</h3>
<p>以下は端的な例ですが、 <code>mouseenter</code> イベントを使用して、マウスが割り当てられた空間に入ったときに <code>div</code> の境界を変化させます。そして、リストに <code>mouseenter</code> または <code>mouseleave</code> イベントの回数を示す項目を追加します。</p>
<h4 id="HTML">HTML</h4>
<pre class="brush: html"><div id='mouseTarget'>
<ul id="unorderedList">
<li>No events yet!</li>
</ul>
</div></pre>
<h4 id="CSS">CSS</h4>
<p><code>div</code> を整形してもっと目立つようにします。</p>
<pre class="brush: css">#mouseTarget {
box-sizing: border-box;
width:15rem;
border:1px solid #333;
}</pre>
<h4 id="JavaScript">JavaScript</h4>
<pre class="brush: js">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);
}</pre>
<h3 id="Result" name="Result">結果</h3>
<p>{{EmbedLiveSample('mouseenter')}}</p>
<h2 id="Specifications" name="Specifications">仕様書</h2>
<table class="standard-table">
<thead>
<tr>
<th scope="col">仕様書</th>
<th scope="col">状態</th>
</tr>
</thead>
<tbody>
<tr>
<td>{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}</td>
<td>{{Spec2('UI Events')}}</td>
</tr>
<tr>
<td>{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}</td>
<td>{{Spec2('DOM3 Events')}}</td>
</tr>
</tbody>
</table>
<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2>
<p>{{Compat("api.Element.mouseenter_event")}}</p>
<h2 id="See_also" name="See_also">関連情報</h2>
<ul>
<li><a href="/ja/docs/Learn/JavaScript/Building_blocks/Events">イベントの紹介</a></li>
<li>{{domxref("Element/mousedown_event", "mousedown")}}</li>
<li>{{domxref("Element/mouseup_event", "mouseup")}}</li>
<li>{{domxref("Element/mousemove_event", "mousemove")}}</li>
<li>{{domxref("Element/click_event", "click")}}</li>
<li>{{domxref("Element/dblclick_event", "dblclick")}}</li>
<li>{{domxref("Element/mouseover_event", "mouseover")}}</li>
<li>{{domxref("Element/mouseout_event", "mouseout")}}</li>
<li>{{domxref("Element/mouseenter_event", "mouseenter")}}</li>
<li>{{domxref("Element/mouseleave_event", "mouseleave")}}</li>
<li>{{domxref("Element/contextmenu_event", "contextmenu")}}</li>
</ul>
|
