Element: mouseover イベント
=======================

**`mouseover`** イベントは、ポインティングデバイス (マウスやトラックパッドなど) のカーソルが要素またはその子要素のうちの一つの上を移動したときに、その要素 (`Element`) に発行されます。

構文
--

このイベント名を `addEventListener()` 等のメソッドで使用するか、イベントハンドラープロパティを設定するかしてください。


```js
addEventListener("mouseover", (event) => {});

onmouseover = (event) => {};
```

イベント型
-----

`MouseEvent` です。 `Event` を継承しています。

Event

UIEvent

MouseEventイベントプロパティ
---------

*親である `UIEvent` および `Event` から継承したプロパティもあります*。

`MouseEvent.altKey` 読取専用 

このマウスイベントが発行されたときに `alt` キーが押されていた場合は `true` を返します。

`MouseEvent.button` 読取専用 

このマウスイベントが発行されたときに押されていたボタンの番号です（もしあれば）。

`MouseEvent.buttons` 読取専用 

このマウスイベントが発行されたときに押されていたボタンです（もしあれば）。

`MouseEvent.clientX` 読取専用 

ビューポート座標におけるマウスポインターの X 座標です。

`MouseEvent.clientY` 読取専用 

ビューポート座標におけるマウスポインターの Y 座標です。

`MouseEvent.ctrlKey` 読取専用 

このマウスイベントが発行されたときに `control` キーが押されていた場合は `true` を返します。

`MouseEvent.layerX` 
Non-standard
 読取専用 

このイベントの現在のレイヤーにおける相対の水平座標を返します。

`MouseEvent.layerY` 
Non-standard
 読取専用 

このイベントの現在のレイヤーにおける相対の垂直座標を返します。

`MouseEvent.metaKey` 読取専用 

このマウスイベントが発行されたときに `meta` キーが押されていた場合は `true` を返します。

`MouseEvent.movementX` 読取専用 

前回の `mousemove` イベントの位置から相対的なマウスポインターの X 座標です。

`MouseEvent.movementY` 読取専用 

前回の `mousemove` イベントの位置から相対的なマウスポインターの Y 座標です。

`MouseEvent.offsetX` 読取専用 

対象ノードのパディング辺からの相対的なマウスポインターの X 座標です。

`MouseEvent.offsetY` 読取専用 

対象ノードのパディング辺からの相対的なマウスポインターの Y 座標です。

`MouseEvent.pageX` 読取専用 

文書全体からの相対的なマウスポインターの X 座標です。

`MouseEvent.pageY` 読取専用 

文書全体からの相対的なマウスポインターの Y 座標です。

`MouseEvent.relatedTarget` 読取専用 

もしあれば、イベントの副ターゲットです。

`MouseEvent.screenX` 読取専用 

スクリーン座標におけるマウスポインターの X 座標です。

`MouseEvent.screenY` 読取専用 

スクリーン座標におけるマウスポインターの Y 座標です。

`MouseEvent.shiftKey` 読取専用 

このマウスイベントが発行されたときに `shift` キーが押されていた場合は `true` を返します。

`MouseEvent.mozInputSource` 
Non-standard
 読取専用 

 イベントを発生させた機器の種類（`MOZ_SOURCE_*` 定数のいずれか）。
 これにより、例えばマウスイベントが実際のマウスによって生成されたのか、タッチイベントによって生成されたのかを判断することができます（これはイベントに関連付けられた座標を解釈する精度に影響するかもしれません）。


`MouseEvent.webkitForce` 
Non-standard
 読取専用 

クリックしたときに適用された圧力です。

`MouseEvent.x` 読取専用 

`MouseEvent.clientX` の別名です。

`MouseEvent.y` 読取専用 

`MouseEvent.clientY` の別名です。

例
-

以下の例は、`mouseover` と `mouseenter` の各イベントの違いを説明しています。

### HTML


```html
<ul id="test">
  <li>item 1</li>
  <li>item 2</li>
  <li>item 3</li>
</ul>
```

### JavaScript


```js
let test = document.getElementById("test");

// このハンドラーは、カーソルが順序なしリストの上を移動した
// ときに1度だけ実行されます
test.addEventListener(
  "mouseenter",
  (event) => {
    // highlight the mouseenter target
    event.target.style.color = "purple";

    // 少し待ってから色をリセット
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);

// このハンドラーは異なるリスト項目の上を移動するごとに
// 実行されます
test.addEventListener(
  "mouseover",
  (event) => {
    // mouseover の対象を強調
    event.target.style.color = "orange";

    // 少し待ってから色をリセット
    setTimeout(() => {
      event.target.style.color = "";
    }, 500);
  },
  false,
);
```

### 結果

仕様書
---

| Specification |
| --- |
| UI Events # event-type-mouseover |
| HTML Standard # handler-onmouseover |

ブラウザーの互換性
---------

BCD tables only load in the browser with JavaScript enabled. Enable JavaScript to view data.

関連情報
----

* イベントの紹介
* `mousedown`
* `mouseup`
* `mousemove`
* `click`
* `dblclick`
* `mouseover`
* `mouseout`
* `mouseenter`
* `mouseleave`
* `contextmenu`