From 9c55ffbfe925ba0fab13d1597bdc4b1fefae64cc Mon Sep 17 00:00:00 2001 From: Masahiro FUJIMOTO Date: Sun, 24 Oct 2021 02:04:38 +0900 Subject: Element オブジェクトのマウスイベントを更新 MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../ja/web/api/element/mouseenter_event/index.html | 162 --------------------- files/ja/web/api/element/mouseenter_event/index.md | 162 +++++++++++++++++++++ 2 files changed, 162 insertions(+), 162 deletions(-) delete mode 100644 files/ja/web/api/element/mouseenter_event/index.html create mode 100644 files/ja/web/api/element/mouseenter_event/index.md (limited to 'files/ja/web/api/element/mouseenter_event') diff --git a/files/ja/web/api/element/mouseenter_event/index.html b/files/ja/web/api/element/mouseenter_event/index.html deleted file mode 100644 index f78dfa48da..0000000000 --- a/files/ja/web/api/element/mouseenter_event/index.html +++ /dev/null @@ -1,162 +0,0 @@ ---- -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 ---- -
{{APIRef}}
- -

mouseenter イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発生した要素の中に移動したときに {{domxref("Element")}} に発生します。

- - - - - - - - - - - - - - - - - - - - -
バブリングなし
キャンセル不可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
- -

使用上の注意

- -

mouseenter は {{domxref("Element/mouseover_event", "mouseover")}} と似ていますが、バブリングしない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。

- -
-
mouseenter.png
-要素の階層に入った場合、それぞれの要素に1つずつ mouseenter が送信されます。ここでポインターがテキストに達した時、階層の4つの要素に4つのイベントが送信されます。 - -
mouseover.png
-DOM ツリーの最も深い要素に1つの mouseover イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。
- -

深い階層では、数多くの mouseenter イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は mouseover イベントを待ち受けした方が優れています。

- -

対応する (マウスがコンテンツ領域から出たときに要素に発生する) mouseleave と組み合わせると、 mouseenter イベントは CSS の {{cssxref(':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);
-}
- -

結果

- -

{{EmbedLiveSample('mouseenter')}}

- -

仕様書

- - - - - - - - - - - - - - - - - - -
仕様書状態
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
- -

ブラウザーの対応

- -

{{Compat("api.Element.mouseenter_event")}}

- -

関連情報

- - diff --git a/files/ja/web/api/element/mouseenter_event/index.md b/files/ja/web/api/element/mouseenter_event/index.md new file mode 100644 index 0000000000..f78dfa48da --- /dev/null +++ b/files/ja/web/api/element/mouseenter_event/index.md @@ -0,0 +1,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 +--- +
{{APIRef}}
+ +

mouseenter イベントは、ポインティングデバイス (通常はマウス) のホットスポットが最初にイベントが発生した要素の中に移動したときに {{domxref("Element")}} に発生します。

+ + + + + + + + + + + + + + + + + + + + +
バブリングなし
キャンセル不可
インターフェイス{{domxref("MouseEvent")}}
イベントハンドラープロパティ{{domxref("GlobalEventHandlers.onmouseenter", "onmouseenter")}}
+ +

使用上の注意

+ +

mouseenter は {{domxref("Element/mouseover_event", "mouseover")}} と似ていますが、バブリングしない点と、ポインターが子孫の物理的な空間から自分自身の物理的な空間に移動したときに、子孫には送信されない点が異なります。

+ +
+
mouseenter.png
+要素の階層に入った場合、それぞれの要素に1つずつ mouseenter が送信されます。ここでポインターがテキストに達した時、階層の4つの要素に4つのイベントが送信されます。 + +
mouseover.png
+DOM ツリーの最も深い要素に1つの mouseover イベントが送信され、ハンドラーによってキャンセルされるかルートに達するまで階層を上にバブリングします。
+ +

深い階層では、数多くの mouseenter イベントが送信され、とても重くなり、著しい性能の問題を引き起こすことがあります。このような場合は mouseover イベントを待ち受けした方が優れています。

+ +

対応する (マウスがコンテンツ領域から出たときに要素に発生する) mouseleave と組み合わせると、 mouseenter イベントは CSS の {{cssxref(':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);
+}
+ +

結果

+ +

{{EmbedLiveSample('mouseenter')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + +
仕様書状態
{{SpecName('UI Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('UI Events')}}
{{SpecName('DOM3 Events', '#event-type-mouseenter', 'mouseenter')}}{{Spec2('DOM3 Events')}}
+ +

ブラウザーの対応

+ +

{{Compat("api.Element.mouseenter_event")}}

+ +

関連情報

+ + -- cgit v1.2.3-54-g00ecf