From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/globaleventhandlers/index.html | 273 +++++++++++++++++++++ .../web/api/globaleventhandlers/onabort/index.html | 30 +++ .../web/api/globaleventhandlers/onblur/index.html | 91 +++++++ .../api/globaleventhandlers/oncancel/index.html | 61 +++++ .../api/globaleventhandlers/oncanplay/index.html | 53 ++++ .../oncanplaythrough/index.html | 54 ++++ .../api/globaleventhandlers/onchange/index.html | 84 +++++++ .../web/api/globaleventhandlers/onclick/index.html | 115 +++++++++ .../web/api/globaleventhandlers/onclose/index.html | 68 +++++ .../web/api/globaleventhandlers/ondrag/index.html | 116 +++++++++ .../api/globaleventhandlers/ondragend/index.html | 150 +++++++++++ .../api/globaleventhandlers/ondragenter/index.html | 150 +++++++++++ .../api/globaleventhandlers/ondragleave/index.html | 151 ++++++++++++ .../api/globaleventhandlers/ondragover/index.html | 116 +++++++++ .../api/globaleventhandlers/ondragstart/index.html | 116 +++++++++ .../web/api/globaleventhandlers/ondrop/index.html | 116 +++++++++ .../web/api/globaleventhandlers/onfocus/index.html | 94 +++++++ .../api/globaleventhandlers/onformdata/index.html | 91 +++++++ .../ongotpointercapture/index.html | 70 ++++++ .../web/api/globaleventhandlers/oninput/index.html | 93 +++++++ .../api/globaleventhandlers/oninvalid/index.html | 98 ++++++++ .../api/globaleventhandlers/onkeydown/index.html | 98 ++++++++ .../api/globaleventhandlers/onkeypress/index.html | 166 +++++++++++++ .../web/api/globaleventhandlers/onkeyup/index.html | 95 +++++++ .../web/api/globaleventhandlers/onload/index.html | 56 +++++ .../api/globaleventhandlers/onloadend/index.html | 57 +++++ .../onlostpointercapture/index.html | 69 ++++++ .../api/globaleventhandlers/onmousedown/index.html | 121 +++++++++ .../globaleventhandlers/onmouseenter/index.html | 54 ++++ .../globaleventhandlers/onmouseleave/index.html | 54 ++++ .../api/globaleventhandlers/onmousemove/index.html | 118 +++++++++ .../api/globaleventhandlers/onmouseout/index.html | 73 ++++++ .../api/globaleventhandlers/onmouseover/index.html | 73 ++++++ .../api/globaleventhandlers/onmouseup/index.html | 125 ++++++++++ .../api/globaleventhandlers/onplaying/index.html | 58 +++++ .../globaleventhandlers/onpointercancel/index.html | 90 +++++++ .../globaleventhandlers/onpointerdown/index.html | 167 +++++++++++++ .../globaleventhandlers/onpointerenter/index.html | 89 +++++++ .../globaleventhandlers/onpointerleave/index.html | 92 +++++++ .../globaleventhandlers/onpointermove/index.html | 89 +++++++ .../globaleventhandlers/onpointerout/index.html | 89 +++++++ .../globaleventhandlers/onpointerover/index.html | 89 +++++++ .../api/globaleventhandlers/onpointerup/index.html | 89 +++++++ .../api/globaleventhandlers/onscroll/index.html | 110 +++++++++ .../api/globaleventhandlers/onselect/index.html | 81 ++++++ .../globaleventhandlers/ontouchcancel/index.html | 85 +++++++ .../api/globaleventhandlers/ontouchend/index.html | 83 +++++++ .../globaleventhandlers/ontouchstart/index.html | 85 +++++++ .../ontransitioncancel/index.html | 150 +++++++++++ .../globaleventhandlers/ontransitionend/index.html | 134 ++++++++++ .../web/api/globaleventhandlers/onwheel/index.html | 119 +++++++++ 51 files changed, 5048 insertions(+) create mode 100644 files/ja/web/api/globaleventhandlers/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onabort/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onblur/index.html create mode 100644 files/ja/web/api/globaleventhandlers/oncancel/index.html create mode 100644 files/ja/web/api/globaleventhandlers/oncanplay/index.html create mode 100644 files/ja/web/api/globaleventhandlers/oncanplaythrough/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onchange/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onclick/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onclose/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ondrag/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ondragend/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ondragenter/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ondragleave/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ondragover/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ondragstart/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ondrop/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onfocus/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onformdata/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ongotpointercapture/index.html create mode 100644 files/ja/web/api/globaleventhandlers/oninput/index.html create mode 100644 files/ja/web/api/globaleventhandlers/oninvalid/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onkeydown/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onkeypress/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onkeyup/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onload/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onloadend/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onlostpointercapture/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onmousedown/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onmouseenter/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onmouseleave/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onmousemove/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onmouseout/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onmouseover/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onmouseup/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onplaying/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onpointercancel/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onpointerdown/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onpointerenter/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onpointerleave/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onpointermove/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onpointerout/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onpointerover/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onpointerup/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onscroll/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onselect/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ontouchcancel/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ontouchend/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ontouchstart/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ontransitioncancel/index.html create mode 100644 files/ja/web/api/globaleventhandlers/ontransitionend/index.html create mode 100644 files/ja/web/api/globaleventhandlers/onwheel/index.html (limited to 'files/ja/web/api/globaleventhandlers') diff --git a/files/ja/web/api/globaleventhandlers/index.html b/files/ja/web/api/globaleventhandlers/index.html new file mode 100644 index 0000000000..6725c32d22 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/index.html @@ -0,0 +1,273 @@ +--- +title: GlobalEventHandlers +slug: Web/API/GlobalEventHandlers +tags: + - API + - DOM + - GlobalEventHandlers + - HTML DOM + - Mixin + - Reference + - events + - ミックスイン +translation_of: Web/API/GlobalEventHandlers +--- +
{{ApiRef("HTML DOM")}}
+ +

GlobalEventHandlers ミックスインは、 {{domxref("HTMLElement")}} や {{domxref("Document")}} 、 {{domxref("Window")}} といったインターフェイスに共通のイベントハンドラーを示します。もちろん、これらのインターフェイスには、以下のものに加えて他のイベントハンドラーがある場合もあります。

+ +
+

メモ: GlobalEventHandlers はミックスインであり、インターフェイスではありません。 GlobalEventHandlers 型のオブジェクトは作成できません。

+
+ +

プロパティ

+ +

このインターフェイスには、以下のイベントハンドラー以外のプロパティはありません。

+ +

イベントハンドラー

+ +

以下のイベントハンドラーは {{domxref("GlobalEventHandlers")}} ミックスインで定義されており、 {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}、さらに Web Worker 向けには {{domxref("WorkerGlobalScope")}} が実装しています。

+ +
+
+
{{domxref("GlobalEventHandlers.onabort")}}
+
{{domxref("EventHandler")}} で、 {{domxref("HTMLMediaElement/abort_event", "abort")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}
+
{{domxref("EventHandler")}} で、 CSS アニメーションがキャンセルされたことを示す {{event("animationcancel")}} イベントが送信されたときに呼び出されます。
+
{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}
+
{{domxref("EventHandler")}} で、 CSS アニメーションの再生が停止したことを示す、 {{event("animationend")}} イベントが送信されたときに呼び出されます。
+
{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}
+
{{domxref("EventHandler")}} で、 CSS アニメーションのアニメーションシーケンスが新たなな繰り返しに入ったことを示す、{{event("animationiteration")}} イベントが送信されたときに呼び出されます。
+
{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}
+
{{domxref("EventHandler")}} で、 CSS アニメーションの再生が開始したことを示す、{{event("animationstart")}} イベントが送信されたときに呼び出されます。
+
{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}
+
{{domxref("EventHandler")}} で、入力デバイスで非プライマリーボタン (例えばマウスの中ボタン) が押下されたことを示す、 {{event("auxclick")}} イベントが送信されたときに呼び出されます。
+
{{domxref("GlobalEventHandlers.onblur")}}
+
{{domxref("EventHandler")}} で、 {{event("blur")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onerror")}}
+
{{domxref("EventHandler")}} で、 {{event("error")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onfocus")}}
+
{{domxref("EventHandler")}} で、 {{event("focus")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.oncancel")}}
+
{{domxref("EventHandler")}} で、 {{event("cancel")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.oncanplay")}}
+
{{domxref("EventHandler")}} で、 {{event("canplay")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.oncanplaythrough")}}
+
{{domxref("EventHandler")}} で、 {{event("canplaythrough")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onchange")}}
+
{{domxref("EventHandler")}} で、 {{event("change")}} イベントが発生した時にときび出すコードを表します。
+
{{domxref("GlobalEventHandlers.onclick")}}
+
{{domxref("EventHandler")}} で、 {{event("click")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onclose")}}
+
{{domxref("EventHandler")}} で、 {{event("close")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.oncontextmenu")}}
+
{{domxref("EventHandler")}} で、 {{event("contextmenu")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.oncuechange")}}
+
{{domxref("EventHandler")}} で、 {{event("cuechange")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ondblclick")}}
+
{{domxref("EventHandler")}} で、 {{event("dblclick")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ondrag")}}
+
{{domxref("EventHandler")}} で、 {{event("drag")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ondragend")}}
+
{{domxref("EventHandler")}} で、 {{event("dragend")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ondragenter")}}
+
{{domxref("EventHandler")}} で、 {{event("dragenter")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ondragexit")}}
+
{{domxref("EventHandler")}} で、 {{event("dragexit")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ondragleave")}}
+
{{domxref("EventHandler")}} で、 {{event("dragleave")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ondragover")}}
+
{{domxref("EventHandler")}} で、 {{event("dragover")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ondragstart")}}
+
{{domxref("EventHandler")}} で、 {{event("dragstart")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ondrop")}}
+
{{domxref("EventHandler")}} で、 {{event("drop")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ondurationchange")}}
+
{{domxref("EventHandler")}} で、 {{event("durationchange")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onemptied")}}
+
{{domxref("EventHandler")}} で、 {{event("emptied")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onended")}}
+
{{domxref("EventHandler")}} で、 {{event("ended")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onformdata")}}
+
{{domxref("EventHandler")}} で、フォームデータが構築されたことを表す入力リストの後で発生する {{event("formdata")}} イベントの処理をします。
+
{{domxref("GlobalEventHandlers.ongotpointercapture")}}
+
{{domxref("EventHandler")}} で、 {{event("gotpointercapture")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.oninput")}}
+
{{domxref("EventHandler")}} で、 {{event("input")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.oninvalid")}}
+
{{domxref("EventHandler")}} で、 {{event("invalid")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onkeydown")}}
+
{{domxref("EventHandler")}} で、 {{event("keydown")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onkeypress")}}
+
{{domxref("EventHandler")}} で、 {{event("keypress")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onkeyup")}}
+
{{domxref("EventHandler")}} で、 {{event("keyup")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onload")}}
+
{{domxref("EventHandler")}} で、 {{event("load")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onloadeddata")}}
+
{{domxref("EventHandler")}} で、 {{event("loadeddata")}} イベントが発生したときに呼び出すコードをします。
+
{{domxref("GlobalEventHandlers.onloadedmetadata")}}
+
{{domxref("EventHandler")}} で、 {{event("loadedmetadata")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onloadend")}}
+
{{domxref("EventHandler")}} で、 {{event("loadend")}} イベントが発生した (リソースの読み込みの進行が停止した) ときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onloadstart")}}
+
{{domxref("EventHandler")}} で、 {{event("loadstart")}} イベントが発生した (リソースの読み込みを開始した) ときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onlostpointercapture")}}
+
{{domxref("EventHandler")}} で、 {{event("lostpointercapture")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onmousedown")}}
+
{{domxref("EventHandler")}} で、 {{event("mousedown")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onmouseenter")}}
+
{{domxref("EventHandler")}} で、 {{event("mouseenter")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onmouseleave")}}
+
{{domxref("EventHandler")}} で、 {{event("mouseleave")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onmousemove")}}
+
{{domxref("EventHandler")}} で、 {{event("mousemove")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onmouseout")}}
+
{{domxref("EventHandler")}} で、 {{event("mouseout")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onmouseover")}}
+
{{domxref("EventHandler")}} で、 {{event("mouseover")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onmouseup")}}
+
{{domxref("EventHandler")}} で、 {{event("mouseup")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}
+
{{domxref("EventHandler")}} で、 {{event("mousewheel")}} イベントが発生したときに呼び出すコードを表します。廃止予定です。 代わりに onwheel を使ってください。
+
{{ domxref("GlobalEventHandlers.onwheel") }}
+
{{domxref("EventHandler")}} で、 {{event("wheel")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpause")}}
+
{{domxref("EventHandler")}} で、 {{event("pause")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onplay")}}
+
{{domxref("EventHandler")}} で、 {{event("play")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onplaying")}}
+
{{domxref("EventHandler")}} で、 {{event("playing")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpointerdown")}}
+
{{domxref("EventHandler")}} で、 {{event("pointerdown")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpointermove")}}
+
{{domxref("EventHandler")}} で、 {{event("pointermove")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpointerup")}}
+
{{domxref("EventHandler")}} で、 {{event("pointerup")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpointercancel")}}
+
{{domxref("EventHandler")}} で、 {{event("pointercancel")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpointerover")}}
+
{{domxref("EventHandler")}} で、 {{event("pointerover")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpointerout")}}
+
{{domxref("EventHandler")}} で、 {{event("pointerout")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpointerenter")}}
+
{{domxref("EventHandler")}} で、 {{event("pointerenter")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpointerleave")}}
+
{{domxref("EventHandler")}} で、 {{event("pointerleave")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}
+
{{domxref("EventHandler")}} で、 {{event("pointerlockchange")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}
+
{{domxref("EventHandler")}} で、 {{event("pointerlockerror")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onprogress")}}
+
{{domxref("EventHandler")}} で、 {{event("progress")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onratechange")}}
+
{{domxref("EventHandler")}} で、 {{event("ratechange")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onreset")}}
+
{{domxref("EventHandler")}} で、 {{event("reset")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onresize")}}
+
{{domxref("EventHandler")}} で、 {{event("resize")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onscroll")}}
+
{{domxref("EventHandler")}} で、 {{event("scroll")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onseeked")}}
+
{{domxref("EventHandler")}} で、 {{event("seeked")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onseeking")}}
+
{{domxref("EventHandler")}} で、 {{event("seeking")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onselect")}}
+
{{domxref("EventHandler")}} で、 {{event("select")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onselectstart")}}
+
{{domxref("EventHandler")}} で、 {{event("selectstart")}} イベントが発生した (ユーザーがウェブページで新たにテキスト選択を開始した) ときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onselectionchange")}}
+
{{domxref("EventHandler")}} で、 {{event("selectionchange")}} イベントが発生した (ウェブページで選択されたテキストが替わった) ときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onshow")}}
+
{{domxref("EventHandler")}} で、 {{event("show")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}
+
{{domxref("EventHandler")}} で、 {{event("sort")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onstalled")}}
+
{{domxref("EventHandler")}} で、 {{event("stalled")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onsubmit")}}
+
{{domxref("EventHandler")}} で、 {{event("submit")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onsuspend")}}
+
{{domxref("EventHandler")}} で、 {{event("suspend")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ontimeupdate")}}
+
{{domxref("EventHandler")}} で、 {{event("timeupdate")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.onvolumechange")}}
+
{{domxref("EventHandler")}} で、 {{event("volumechange")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}
+
{{domxref("EventHandler")}} で、 {{event("touchcancel")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}
+
{{domxref("EventHandler")}} で、 {{event("touchend")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}
+
{{domxref("EventHandler")}} で、 {{event("touchmove")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}
+
{{domxref("EventHandler")}} で、 {{event("touchstart")}} イベントが発生したときに呼び出すコードを表します。
+
{{domxref("GlobalEventHandlers.ontransitioncancel")}}
+
{{domxref("EventHandler")}} で、 CSS トランジションがキャンセルされたことを示す、 {{event("transitioncancel")}} イベントが送信されたときに呼び出されます。
+
{{domxref("GlobalEventHandlers.ontransitionend")}}
+
{{domxref("EventHandler")}} で、 CSS トランジションの再生が停止したことを示す、{{event("transitionend")}} イベントが送信されたときに呼び出されます。
+
{{domxref("GlobalEventHandlers.ontransitionrun")}}
+
{{domxref("EventHandler")}} で、 {{event("transitionrun")}} イベントが送信されたときに呼び出され、 CSS トランジションが実行されていることを示しますが、開始されているとは限りません。
+
{{domxref("GlobalEventHandlers.ontransitionstart")}}
+
{{domxref("EventHandler")}} で、 {{event("transitionstart")}} イベントが送信されたときに呼び出され、 CSS トランジションが遷移を開始したことを示します。
+
{{domxref("GlobalEventHandlers.onwaiting")}}
+
{{domxref("EventHandler")}} で、 {{event("waiting")}} イベントが発生したときに呼び出すコードを表します。
+
+
+ +

メソッド

+ +

このインターフェイスではメソッドを定義していません。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}{{Spec2('Selection API')}}onselectionchange を追加。
{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}{{Spec2('Pointer Lock')}}{{domxref("Document")}} で onpointerlockchange、onpointerlockerror を追加。実験的に GlobalEventHandlers で実装されています。
{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML WHATWG')}}最新のスナップショットである {{SpecName("HTML5.1")}} から変更なし。
{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}{{Spec2('HTML5.1')}}{{SpecName("HTML WHATWG")}} のスナップショット。{{SpecName("HTML5 W3C")}} のスナップショットに onsort を追加。
{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}{{Spec2('HTML5 W3C')}}{{SpecName("HTML WHATWG")}} のスナップショット。GlobalEventHandlers を作成 (以前はプロパティが実装対象に存在していました)。
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.GlobalEventHandlers")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onabort/index.html b/files/ja/web/api/globaleventhandlers/onabort/index.html new file mode 100644 index 0000000000..3f7ea11c4e --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onabort/index.html @@ -0,0 +1,30 @@ +--- +title: window.onabort +slug: Web/API/GlobalEventHandlers/onabort +tags: + - DOM + - DOM_0 + - Gecko + - Gecko DOM Reference + - NeedsUpdate + - Window + - 要更新 + - 要確認 +translation_of: Web/API/GlobalEventHandlers/onabort +--- +
+ {{ApiRef}}
+

概要

+

ウィンドウに中断イベントを送ったときのイベントハンドラです。

+

構文

+
window.onabort = funcRef
+
+ +

例

+
window.onabort = function() {
+  alert("Load aborted.");
+}
+

仕様

+

{{DOM0}} これは実際には、このハンドラが発生したときの説明になっていない。

diff --git a/files/ja/web/api/globaleventhandlers/onblur/index.html b/files/ja/web/api/globaleventhandlers/onblur/index.html new file mode 100644 index 0000000000..a5dc8cb510 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onblur/index.html @@ -0,0 +1,91 @@ +--- +title: GlobalEventHandlers.onblur +slug: Web/API/GlobalEventHandlers/onblur +tags: + - API + - HTML DOM + - NeedsMarkupWork + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onblur +--- +
{{ApiRef("HTML DOM")}}
+ +

{{domxref("GlobalEventHandlers")}} ミックスインの onblur プロパティは、{{event("blur")}} イベントを処理する {{domxref("EventHandler")}} です。これは、{{domxref("Element")}}、{{domxref("Document")}}、{{domxref("Window")}} 上で利用できます。

+ +

blur イベントは要素がフォーカスを失ったときに生じます。

+ +
+

補足: onblur の反対が {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} です。

+
+ +

構文

+ +
target.onblur = functionRef;
+
+ +

値

+ +

functionRef は関数名または 関数式 です。この関数は、{{domxref("FocusEvent")}} オブジェクトとその 1 個の引数を受け取ります。

+ +

例

+ +

この例は、onblur および {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} を使用して {{HtmlElement("input")}} 要素内のテキストを変更します。

+ +

HTML

+ +
<input type="text" value="ここをクリック">
+
+ +

JavaScript

+ +
let input = document.querySelector('input');
+
+input.onblur = inputBlur;
+input.onfocus = inputFocus;
+
+function inputBlur() {
+  input.value = 'Focus has been lost';
+}
+
+function inputFocus() {
+  input.value = 'Focus is here';
+}
+ +

実行結果

+ +

フォームフィールドの内側と外側をクリックしてみてください。それに応じてコンテンツが変化するか観察してください。

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.GlobalEventHandlers.onblur")}}

+ +

IE とは対称的に、blur イベントを受け取るほとんどすべての要素では、Gecko ブラウザー上のほとんどすべての要素において、このイベントが動作しません。

+ +

関連項目

+ + diff --git a/files/ja/web/api/globaleventhandlers/oncancel/index.html b/files/ja/web/api/globaleventhandlers/oncancel/index.html new file mode 100644 index 0000000000..44defb343e --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/oncancel/index.html @@ -0,0 +1,61 @@ +--- +title: GlobalEventHandlers.oncancel +slug: Web/API/GlobalEventHandlers/oncancel +tags: + - API + - Dialog + - Event Handler + - GrobalEventHandlers + - HTML DOM + - NeedsExample + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/oncancel +--- +
{{ApiRef("HTML DOM")}}
+ +

oncancelプロパティは{{domxref("GlobalEventHandlers")}}のミックスイン(mixin)で、{{event("cancel")}}イベントを{{HTMLElement("dialog")}}要素に送るための{{domxref("EventHandler")}}です

+ +

cancelイベントはユーザーが<dialog>を閉じる意向を示した際に発火します。このイベントハンドラーはイベントをバブリングから防ぎます。つまり、いかなる親ハンドラーであってもイベントは通知されません。

+ +

構文

+ +
target.oncancel = functionRef;
+
+ +

引数

+ +

functionRefは関数名もしくは関数式です。この関数は{{domxref("Event")}}オブジェクトを唯一の引数として受け取ります。

+ +

oncancelハンドラーは一つのオブジェクトに対して一つのみ割り当てることが可能です。より柔軟であることから{{domxref("EventTarget.addEventListener()")}}メソッドを代わりに使用するのも良いかもしれません。

+ +

仕様書

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-oncancel','oncancel')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.oncancel")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/oncanplay/index.html b/files/ja/web/api/globaleventhandlers/oncanplay/index.html new file mode 100644 index 0000000000..b7c5ce5b8f --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/oncanplay/index.html @@ -0,0 +1,53 @@ +--- +title: GlobalEventHandlers.oncanplay +slug: Web/API/GlobalEventHandlers/oncanplay +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/oncanplay +--- +
{{ ApiRef("HTML DOM") }}
+ +

oncanplay は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("canplay")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。

+ +

canplay イベントは、メディアを再生できるユーザーエージェントのとき、バッファリングのためにコンテンツを停止せずに、メディアを最後まで再生するのに十分なデータがロードされていないと推定されるときに発生します。

+ +

構文

+ +
element.oncanplay = handlerFunction;
+var handlerFunction = element.oncanplay;
+
+ +

handlerFunction は、null またはイベントハンドラーを指定する JavaScript 関数のいずれかです。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG','#handler-oncanplay','oncanplay')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.GlobalEventHandlers.oncanplay")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/oncanplaythrough/index.html b/files/ja/web/api/globaleventhandlers/oncanplaythrough/index.html new file mode 100644 index 0000000000..a1f3d4fb2d --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/oncanplaythrough/index.html @@ -0,0 +1,54 @@ +--- +title: GlobalEventHandlers.oncanplaythrough +slug: Web/API/GlobalEventHandlers/oncanplaythrough +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/oncanplaythrough +--- +
{{ ApiRef("HTML DOM") }}
+ +

oncanplaythrough は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("canplaythrough")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。

+ +

canplaythrough イベントは、メディアを再生できるユーザーエージェントのとき、バッファリングのためにコンテンツを停止せずに、メディアを最後まで再生するのに十分なデータがロードされていると推定されるときに発生します。

+ +

構文

+ +
element.oncanplaythrough = handlerFunction;
+var handlerFunction = element.oncanplaythrough;
+
+ +

handlerFunction は、null またはイベントハンドラーを指定する JavaScript 関数のいずれかです。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG','#handler-oncanplaythrough','oncanplaythrough')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.GlobalEventHandlers.oncanplaythrough")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onchange/index.html b/files/ja/web/api/globaleventhandlers/onchange/index.html new file mode 100644 index 0000000000..997d2a769d --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onchange/index.html @@ -0,0 +1,84 @@ +--- +title: GlobalEventHandlers.onchange +slug: Web/API/GlobalEventHandlers/onchange +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onchange +--- +
{{ApiRef("HTML DOM")}}
+ +

{{domxref("GlobalEventHandlers")}} ミックスインの onchange プロパティは、change イベントを処理する {{domxref("EventHandler")}} です。

+ +

change イベントはユーザーがフォームコントロールの値を変更した時に発生します。これは例えば、コントロールの外側をクリックしたり Tab キーで別のコントロールへ切り替えたりすることにより行われることがあります。

+ +
+

注記: {{domxref("GlobalEventHandlers.oninput", "oninput")}} と異なり、onchange イベントハンドラーは、各要素の value が変化するたびに呼び出される必要がありません。

+
+ +

構文

+ +
target.onchange = functionRef;
+
+ +

functionRef は関数名または 関数式 です。この関数は、{{domxref("Event")}} オブジェクトとその 1 個の引数を受け取ります。

+ +

例

+ +

この例は、{{HtmlElement("input")}} 要素のコンテンツを変更してフォーカスを要素から外す度に、その文字数をログ出力します。

+ +

HTML

+ +
<input type="text" placeholder="Type something here, then click outside of the field." size="50">
+<p id="log"></p>
+ +

JavaScript

+ +
let input = document.querySelector('input');
+let log = document.getElementById('log');
+
+input.onchange = handleChange;
+
+function handleChange(e) {
+  log.textContent = `The field's value is
+      ${e.target.value.length} character(s) long.`;
+}
+ +

実行結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onchange")}}

+
+ +

関連項目

+ + diff --git a/files/ja/web/api/globaleventhandlers/onclick/index.html b/files/ja/web/api/globaleventhandlers/onclick/index.html new file mode 100644 index 0000000000..06761ae6ff --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onclick/index.html @@ -0,0 +1,115 @@ +--- +title: GlobalEventHandlers.onclick +slug: Web/API/GlobalEventHandlers/onclick +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onclick +--- +

{{ ApiRef("HTML DOM") }}

+ +

onclick は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、所与の要素の {{domxref("Element/click_event", "click")}} イベントを処理するためのイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

click イベントは、ユーザーが要素をクリックしたときに発生します。 {{domxref("Element/mousedown_event", "mousedown")}} イベントと {{domxref("Element/mouseup_event", "mouseup")}} イベントの後に、この順番で発行されます。

+ +
注: click イベントを使用してアクションを起動するときは、マウスやタッチスクリーンを使用していないユーザーが同じアクションを使用できるように、 {{event("keydown")}} イベントにも同じアクションを追加することを検討してください。
+ +

構文

+ +
target.onclick = functionRef;
+
+ +

値

+ +

functionRef は、関数名または関数式です。 この関数は、{{domxref("MouseEvent")}} オブジェクトを唯一の引数として受け取ります。関数内では、 {{jsxref("Operators/this", "this")}} はイベントが発行された要素になります。

+ +

一度に1つのオブジェクトに割り当てることができる onclick ハンドラは1つだけです。より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。

+ +

例

+ +

クリックの検出

+ +

この例では、要素の上でクリックが行われたときに要素の色を単純に変更します。

+ +

HTML

+ +
<div id="demo">ここをクリック</div>
+ +

JavaScript

+ +
document.getElementById('demo').onclick = function changeContent() {
+
+   document.getElementById('demo').innerHTML = "Help me";
+   document.getElementById('demo').style = "Color: red";
+
+}
+ +

結果

+ +

{{EmbedLiveSample("Detecting_clicks")}}

+ +

クリックの座標の取得

+ +

この例では、最も新しくマウスボタンのクリックが行われた場所の座標を表示します。

+ +

HTML

+ +
<p>この例のどこかをクリックしてください。</p>
+<p id="log"></p>
+ +

JavaScript

+ +
let log = document.getElementById('log');
+
+document.onclick = inputChange;
+
+function inputChange(e) {
+  log.textContent = `位置: (${e.clientX}, ${e.clientY})`;
+}
+ +

結果

+ +

{{EmbedLiveSample("Getting_the_coordinates_of_clicks")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onclick")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onclose/index.html b/files/ja/web/api/globaleventhandlers/onclose/index.html new file mode 100644 index 0000000000..8c0429e233 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onclose/index.html @@ -0,0 +1,68 @@ +--- +title: window.onclose +slug: Web/API/GlobalEventHandlers/onclose +tags: + - API + - Dialog + - Event Handler + - Experimental + - GlobalEventHandlers + - HTML DOM + - NeedsExample + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onclose +--- +
{{ApiRef("HTML DOM")}} {{SeeCompatTable}}
+ +

onclose は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、ダイアログ要素に送信された {{event("close")}} イベントを処理するための {{domxref("EventHandler", "イベントハンドラー")}} です。

+ +

close イベントは、ユーザーが <dialog> を閉じたときに発生します。

+ +
+

注: ウィンドウのクローズを処理するには、{{domxref("WindowEventHandlers.onbeforeunload", "onbeforeunload")}} または {{domxref("WindowEventHandlers.onunload", "onunload")}} を使用します。

+
+ +

構文

+ +
target.onclose = functionRef;
+
+ +

値

+ +

functionRef は、関数名または関数式です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。

+ +

一度に1つのオブジェクトに割り当てることができる onclose ハンドラーは1つだけです。代わりに、より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザの互換性

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onclose")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/ondrag/index.html b/files/ja/web/api/globaleventhandlers/ondrag/index.html new file mode 100644 index 0000000000..b2bd651388 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ondrag/index.html @@ -0,0 +1,116 @@ +--- +title: GlobalEventHandlers.ondrag +slug: Web/API/GlobalEventHandlers/ondrag +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondrag +--- +
{{ApiRef("HTML DOM")}}
+ +

{{event("drag")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。

+ +

シンタックス

+ +
var dragHandler = targetElement.ondrag;
+
+ +

戻り値

+ +
+
dragHandler
+
要素 targetElement の drag イベントハンドラ。
+
+ +

例

+ +

この例では、ondrag 属性ハンドラを使用して要素の drag イベントハンドラを設定しています。

+ +
<!DOCTYPE html>
+<html lang=ja>
+<title>ondrag グローバルイベント属性の使用例</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function drag_handler(ev) {
+ console.log("Drag");
+}
+
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.currentTarget.style.background = "lightyellow";
+
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+</script>
+<body>
+<h1><code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code> の例</h1>
+ <div> <!-- <div class="source"> -->
+   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
+     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+</body>
+</html>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrag", "ondrag")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondrag", "ondrag")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ondrag")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/globaleventhandlers/ondragend/index.html b/files/ja/web/api/globaleventhandlers/ondragend/index.html new file mode 100644 index 0000000000..c7d87c9864 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ondragend/index.html @@ -0,0 +1,150 @@ +--- +title: GlobalEventHandlers.ondragend +slug: Web/API/GlobalEventHandlers/ondragend +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondragend +--- +
{{ApiRef("HTML DOM")}}
+ +

{{event("dragend")}} イベント用の{{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。

+ +

シンタックス

+ +
var dragendHandler = targetElement.ondragend;
+
+ +

戻り値

+ +
+
dragendHandler
+
要素 targetElement の dragend イベントハンドラ。
+
+ +

例

+ +

この例では、{{domxref("GlobalEventHandlers", "ondragend")}} 属性ハンドラを使用して、要素の {{event("dragend")}} イベントハンドラを設定する2つの方法を示しています。

+ +
<!DOCTYPE html>
+<html lang=ja>
+<title>グローバルイベント属性のドラッグ＆ドロップの使用例</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ // ドラッグが開始されたことを示すために、ソース要素の背景色を変更します。
+ ev.currentTarget.style.border = "dashed";
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ // ドラッグオーバーイベントが発生したことを示すために、
+ // ターゲット要素のボーダーを変更します。
+ ev.currentTarget.style.background = "lightblue";
+ ev.preventDefault();
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragenter_handler(ev) {
+ console.log("dragEnter");
+ // 入力イベントのソース要素の背景色を変更します
+ ev.currentTarget.style.background = "yellow";
+}
+
+function dragleave_handler(ev) {
+ console.log("dragLeave");
+ // ソース要素のボーダーを白に戻す
+ ev.currentTarget.style.background = "white";
+}
+
+function dragend_handler(ev) {
+ console.log("dragEnd");
+ // ターゲット要素の背景色を変更して、
+ // ドラッグが終了したことを視覚的に示すようにします。
+ var el=document.getElementById("target");
+ el.style.background = "pink";
+}
+
+function dragexit_handler(ev) {
+ console.log("dragExit");
+ // ソース要素の境界線を緑に戻し、dragexit イベントを示すように変更します。
+ ev.currentTarget.style.background = "green";
+}
+
+function init() {
+ // ソースの enter/leave/end/exit イベントのハンドラを設定します。
+ var el=document.getElementById("source");
+ el.ondragenter = dragenter_handler;
+ el.ondragleave = dragleave_handler;
+ el.ondragend = dragend_handler;
+ el.ondragexit = dragexit_handler;
+}
+</script>
+<body onload="init();">
+<h1><code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code> の例</h1>
+ <div>
+   <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+</body>
+</html>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragend", "ondragend")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondragend", "ondragend")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ondragend")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/globaleventhandlers/ondragenter/index.html b/files/ja/web/api/globaleventhandlers/ondragenter/index.html new file mode 100644 index 0000000000..a05372119b --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ondragenter/index.html @@ -0,0 +1,150 @@ +--- +title: GlobalEventHandlers.ondragenter +slug: Web/API/GlobalEventHandlers/ondragenter +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondragenter +--- +
{{ApiRef("HTML DOM")}}
+ +

{{event("dragenter")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。

+ +

シンタックス

+ +
var dragenterHandler = targetElement.ondragenter;
+
+ +

戻り値

+ +
+
dragenterHandler
+
targetElement 要素の dragenter イベントハンドラ。
+
+ +

例

+ +

この例では、{{domxref("GlobalEventHandlers.ondragenter", "ondragenter")}} 属性ハンドラを使用して、要素の {{event("dragenter")}} イベントハンドラを設定する方法を示します。

+ +
<!DOCTYPE html>
+<html lang=ja>
+<title>グローバルイベント属性のドラッグ＆ドロップの使用例</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ // ドラッグが開始されたことを示すために、ソース要素の背景色を変更します。
+ ev.currentTarget.style.border = "dashed";
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ // ドラッグオーバーイベントが発生したことを示すために、
+ // ターゲット要素のボーダーを変更します。
+ ev.currentTarget.style.background = "lightblue";
+ ev.preventDefault();
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragenter_handler(ev) {
+ console.log("dragEnter");
+ // enter イベントのソース要素の背景色を変更します。
+ ev.currentTarget.style.background = "yellow";
+}
+
+function dragleave_handler(ev) {
+ console.log("dragLeave");
+ // ソース要素のボーダーを白に戻します
+ ev.currentTarget.style.background = "white";
+}
+
+function dragend_handler(ev) {
+ console.log("dragEnd");
+ // ターゲット要素の背景色を変更して、
+ // ドラッグが終了したことを視覚的に示すようにします。
+ var el=document.getElementById("target");
+ el.style.background = "pink";
+}
+
+function dragexit_handler(ev) {
+ console.log("dragExit");
+ // ソース要素の境界線を緑に戻し、dragexit イベントを示すように変更します。
+ ev.currentTarget.style.background = "green";
+}
+
+function init() {
+ // ソースの enter/leave/end/exit イベントのハンドラを設定します。
+ var el=document.getElementById("source");
+ el.ondragenter = dragenter_handler;
+ el.ondragleave = dragleave_handler;
+ el.ondragend = dragend_handler;
+ el.ondragexit = dragexit_handler;
+}
+</script>
+<body onload="init();">
+<h1><code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code> の例</h1>
+ <div>
+   <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+</body>
+</html>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragenter", "ondragenter")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondragenter", "ondragenter")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ondragenter")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/globaleventhandlers/ondragleave/index.html b/files/ja/web/api/globaleventhandlers/ondragleave/index.html new file mode 100644 index 0000000000..0d19c8f782 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ondragleave/index.html @@ -0,0 +1,151 @@ +--- +title: GlobalEventHandlers.ondragleave +slug: Web/API/GlobalEventHandlers/ondragleave +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondragleave +--- +
{{ApiRef("HTML DOM")}}
+ +

{{event("dragleave")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。

+ +

シンタックス

+ +
var dragleaveHandler = targetElement.ondragleave;
+
+ +

戻り値

+ +
+
dragleaveHandler
+
要素 targetElement の dragleave イベントハンドラ。
+
+ +

例

+ +

この例では、{{domxref("GlobalEventHandlers.ondragleave", "ondragleave")}} 属性ハンドラを使用して、要素の {{event("dragleave")}} イベントハンドラを設定することを示しています。

+ +
<!DOCTYPE html>
+<html lang=ja>
+<title>グローバルイベント属性のドラッグ＆ドロップの使用例</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ // ドラッグが開始されたことを示すために、ソース要素の境界線を変更します。
+ ev.currentTarget.style.border = "dashed";
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ // ドラッグオーバーイベントが発生したことを示すために、
+ // ターゲット要素の背景色を変更します。
+ ev.currentTarget.style.background = "lightblue";
+ ev.preventDefault();
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragenter_handler(ev) {
+ console.log("dragEnter");
+ // 入力イベントのソース要素の背景色を変更します。
+ ev.currentTarget.style.background = "yellow";
+}
+
+function dragleave_handler(ev) {
+ console.log("dragLeave");
+ // ソース要素の背景色を白に戻します。
+ ev.currentTarget.style.background = "white";
+}
+
+function dragend_handler(ev) {
+ console.log("dragEnd");
+ // ターゲット要素の背景色を変更して、
+ // ドラッグが終了したことを視覚的に示すようにします。
+ var el=document.getElementById("target");
+ el.style.background = "pink";
+}
+
+function dragexit_handler(ev) {
+ console.log("dragExit");
+ // ソース要素の背景色を緑に戻して dragexit イベントを示します。
+ ev.currentTarget.style.background = "green";
+}
+
+function init() {
+ // ソースの enter/leave/end/exit イベントのハンドラを設定します。
+ var el=document.getElementById("source");
+ el.ondragenter = dragenter_handler;
+ el.ondragleave = dragleave_handler;
+ el.ondragend = dragend_handler;
+ el.ondragexit = dragexit_handler;
+}
+</script>
+<body onload="init();">
+<h1><code>ondragenter</code>, <code>ondragleave</code>, <code>ondragend</code>, <code>ondragexit</code> の例</h1>
+ <div>
+   <p id="source" ondragstart="dragstart_handler(event);" draggable="true">
+     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+</body>
+</html>
+
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragleave", "ondragleave")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondragleave", "ondragleave")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ondragleave")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/globaleventhandlers/ondragover/index.html b/files/ja/web/api/globaleventhandlers/ondragover/index.html new file mode 100644 index 0000000000..653b8b5824 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ondragover/index.html @@ -0,0 +1,116 @@ +--- +title: GlobalEventHandlers.ondragover +slug: Web/API/GlobalEventHandlers/ondragover +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondragover +--- +
{{ApiRef("HTML DOM")}}
+ +

{{event("dragover")}} イベント用の {{domxref("GlobalEventHandlers", "GlobalEventHandlers")}}。

+ +

シンタックス

+ +
var dragoverHandler = targetElement.ondragover;
+
+ +

戻り値

+ +
+
dragoverHandler
+
targetElement 要素の dragover イベントハンドラ。
+
+ +

例

+ +

この例では、{{domxref("GlobalEventHandlers.ondragover", "ondragover")}} 属性ハンドラを使用して、要素の {{event("dragover")}} イベントハンドラを設定することを示します。

+ +
<!DOCTYPE html>
+<html lang=ja>
+<title>ondrag グローバルイベント属性の使用例</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function drag_handler(ev) {
+ console.log("Drag");
+}
+
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.currentTarget.style.background = "lightyellow";
+
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+</script>
+<body>
+<h1><code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code> の例</h1>
+ <div>
+   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
+     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+</body>
+</html>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragover", "ondragover")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondragover", "ondragover")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ondragover")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/globaleventhandlers/ondragstart/index.html b/files/ja/web/api/globaleventhandlers/ondragstart/index.html new file mode 100644 index 0000000000..17580dcec5 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ondragstart/index.html @@ -0,0 +1,116 @@ +--- +title: GlobalEventHandlers.ondragstart +slug: Web/API/GlobalEventHandlers/ondragstart +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondragstart +--- +
{{ApiRef("HTML DOM")}}
+ +

{{event("dragstart")}} イベントの {{domxref("GlobalEventHandlers","global event handler")}} 。

+ +

構文

+ +
var dragstartHandler = targetElement.ondragstart;
+
+ +

返り値

+ +
+
dragstartHandler
+
要素 targetElement の dragstart イベントハンドラ。
+
+ +

例

+ +

この例では、 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 属性ハンドラを使用して、要素 {{event("dragstart")}} イベントハンドラを設定する方法を示します。

+ +
<!DOCTYPE html>
+<html lang=en>
+<title>Examples of using the ondrag Global Event Attribute</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function drag_handler(ev) {
+ console.log("Drag");
+}
+
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.currentTarget.style.background = "lightyellow";
+
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+</script>
+<body>
+<h1>Examples of <code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code></h1>
+ <div>
+   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
+     Select this element, drag it to the Drop Zone and then release the selection to move the element.</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">Drop Zone</div>
+</body>
+</html>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様ステータス備考
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragstart", "ondragstart")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondragstart", "ondragstart")}}{{Spec2("HTML5.1")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ondragstart")}}

+ +

関連項目

+ + diff --git a/files/ja/web/api/globaleventhandlers/ondrop/index.html b/files/ja/web/api/globaleventhandlers/ondrop/index.html new file mode 100644 index 0000000000..9e7b84dbd1 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ondrop/index.html @@ -0,0 +1,116 @@ +--- +title: GlobalEventHandlers.ondrop +slug: Web/API/GlobalEventHandlers/ondrop +tags: + - API + - HTML DOM + - Reference + - drag and drop +translation_of: Web/API/GlobalEventHandlers/ondrop +--- +
{{ApiRef("HTML DOM")}}
+ +

{{event("drop")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。

+ +

シンタックス

+ +
var dropHandler = targetElement.ondrop;
+
+ +

戻り値

+ +
+
dropHandler
+
targetElement 要素の drop イベントハンドラ。
+
+ +

例

+ +

この例では、{{domxref("GlobalEventHandlers.ondrop", "ondrop")}} 属性を使用して、要素の {{event("drop")}} イベント・ハンドラを定義することを示しています。

+ +
<!DOCTYPE html>
+<html lang=ja>
+<title>ondrag グローバルイベント属性の使用例</title>
+<meta content="width=device-width">
+<style>
+  div {
+    margin: 0em;
+    padding: 2em;
+  }
+  #source {
+    color: blue;
+    border: 1px solid black;
+  }
+  #target {
+    border: 1px solid black;
+  }
+</style>
+</head>
+<script>
+function drag_handler(ev) {
+ console.log("Drag");
+}
+
+function dragstart_handler(ev) {
+ console.log("dragStart");
+ ev.dataTransfer.setData("text", ev.target.id);
+}
+
+function drop_handler(ev) {
+ console.log("Drop");
+ ev.currentTarget.style.background = "lightyellow";
+
+ ev.preventDefault();
+ var data = ev.dataTransfer.getData("text");
+ ev.target.appendChild(document.getElementById(data));
+}
+
+function dragover_handler(ev) {
+ console.log("dragOver");
+ ev.preventDefault();
+}
+</script>
+<body>
+<h1><code>ondrag</code>, <code>ondrop</code>, <code>ondragstart</code>, <code>ondragover</code> の例</h1>
+ <div class="source">
+   <p id="source" ondrag="drag_handler(event);" ondragstart="dragstart_handler(event);" draggable="true">
+     この要素を選択し、ドロップゾーンにドラッグしてから選択を解除して要素を移動します。</p>
+ </div>
+ <div id="target" ondrop="drop_handler(event);" ondragover="dragover_handler(event);">ドロップゾーン</div>
+</body>
+</html>
+
+ +

仕様

+ + + + + + + + + + + + + + + + + + + +
仕様書ステータスコメント
{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrop", "ondrop")}}{{Spec2("HTML WHATWG")}}
{{SpecName("HTML5.1", "index.html#ix-handler-ondrop", "ondrop")}}{{Spec2("HTML5.1")}}初期定義
+ +

ブラウザの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ondrop")}}

+ +

あわせて参照

+ + diff --git a/files/ja/web/api/globaleventhandlers/onfocus/index.html b/files/ja/web/api/globaleventhandlers/onfocus/index.html new file mode 100644 index 0000000000..a602033ddf --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onfocus/index.html @@ -0,0 +1,94 @@ +--- +title: GlobalEventHandlers.onfocus +slug: Web/API/GlobalEventHandlers/onfocus +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onfocus +--- +
{{ApiRef("HTML DOM")}}
+ +

{{domxref("GlobalEventHandlers")}} ミックスインの onfocus プロパティは、与えられた要素上の focus イベントを処理する {{domxref("EventHandler")}} です。

+ +

focus イベントは、ユーザーがある要素にフォーカスを設定した時に生じます。

+ +

非 input 要素上で onfocus を発生させるには、{{htmlattrxref("tabindex")}} 属性が与えられていなければなりません (詳細は Building keyboard accessibility back in を参照)。

+ +
+

補足: onfocus の反対が {{domxref("GlobalEventHandlers.onblur", "onblur")}} です。

+
+ +

構文

+ +
target.onfocus = functionRef;
+
+ +

値

+ +

functionRef は関数名または 関数式 です。この関数は、{{domxref("FocusEvent")}} オブジェクトとその 1 個の引数を受け取ります。

+ +

例

+ +

この例は、{{domxref("GlobalEventHandlers.onblur", "onblur")}} および onfocus を使用して {{HtmlElement("input")}} 要素内のテキストを変更します。

+ +

HTML

+ +
<input type="text" value="ここをクリック">
+
+ +

JavaScript

+ +
let input = document.querySelector('input');
+
+input.onblur = inputBlur;
+input.onfocus = inputFocus;
+
+function inputBlur() {
+  input.value = 'Focus has been lost';
+}
+
+function inputFocus() {
+  input.value = 'Focus is here';
+}
+ +

実行結果

+ +

フォームフィールドの内側と外側をクリックしてみてください。それに応じてコンテンツが変化するか観察してください。

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.GlobalEventHandlers.onfocus")}}

+ +

IE とは対称的に、focus イベントを受け取るほとんどすべての要素では、Gecko ブラウザー上のほとんどすべての要素において、このイベントが動作しません。

+ +

関連項目

+ + diff --git a/files/ja/web/api/globaleventhandlers/onformdata/index.html b/files/ja/web/api/globaleventhandlers/onformdata/index.html new file mode 100644 index 0000000000..343eb03ef4 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onformdata/index.html @@ -0,0 +1,91 @@ +--- +title: GlobalEventHandlers.onformdata +slug: Web/API/GlobalEventHandlers/onformdata +tags: + - API + - Event Handler + - Experimental + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onformdata +--- +
{{ApiRef("HTML DOM")}}
+ +

onformdata は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、フォームのデータを表す項目リストが構築された後に発行される {{event("formdata")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。これはフォームが送信されたときに発生しますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターを呼び出しても発行することができます。 onformdata は {{domxref("HTMLFormElement")}} で利用できます。

+ +

構文

+ +
target.onclick = functionRef;
+
+ +

値

+ +

functionRef は関数名または 関数式です。この関数は唯一の引数として {{domxref("FormDataEvent")}} オブジェクトを受け取ります。

+ +

例

+ +
// grab reference to form
+
+const formElem = document.querySelector('form');
+
+// submit handler
+
+formElem.addEventListener('submit', (e) => {
+  // on form submission, prevent default
+  e.preventDefault();
+
+  // construct a FormData object, which fires the formdata event
+  new FormData(formElem);
+});
+
+// formdata handler to retrieve data
+
+formElem.onformdata = (e) => {
+  console.log('formdata fired');
+
+  // Get the form data from the event object
+  let data = e.formData;
+  for (var value of data.values()) {
+    console.log(value);
+  }
+
+  // submit the data via XHR
+  var request = new XMLHttpRequest();
+  request.open("POST", "/formHandler");
+  request.send(data);
+};
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onformdata','onformdata')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onformdata")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/ongotpointercapture/index.html b/files/ja/web/api/globaleventhandlers/ongotpointercapture/index.html new file mode 100644 index 0000000000..170fdf6e02 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ongotpointercapture/index.html @@ -0,0 +1,70 @@ +--- +title: GlobalEventHandlers.ongotpointercapture +slug: Web/API/GlobalEventHandlers/ongotpointercapture +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - events + - ongotpointercapture +translation_of: Web/API/GlobalEventHandlers/ongotpointercapture +--- +
{{ApiRef("HTML DOM")}}
+ +

ongotpointercapture は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("gotpointercapture")}} イベントを処理する {{domxref("EventHandler")}} です。

+ +

構文

+ +
target.ongotpointercapture = functionRef;
+ +

値

+ +

functionRef は、関数名または関数式です。 関数は {{domxref("PointerEvent")}} オブジェクトを唯一の引数として受け取ります。

+ +

例

+ +
function overHandler(event) {
+  // ターゲットイベントの gotpointercapture ハンドラを決定します
+  let gotCaptureHandler = event.target.ongotpointercapture;
+}
+
+function init() {
+  let el = document.getElementById('target');
+  el.ongotpointercapture = overHandler;
+}
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'ongotpointercapture')}}{{Spec2('Pointer Events 2')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ongotpointercapture")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/oninput/index.html b/files/ja/web/api/globaleventhandlers/oninput/index.html new file mode 100644 index 0000000000..c9613eb8c2 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/oninput/index.html @@ -0,0 +1,93 @@ +--- +title: GlobalEventHandlers.oninput +slug: Web/API/GlobalEventHandlers/oninput +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/oninput +--- +
{{ApiRef("HTML DOM")}}
+ +

{{domxref("GlobalEventHandlers")}} ミックスインの oninput プロパティは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} の各要素上の {{event("input")}} イベントを処理する {{domxref("EventHandler")}} です。これは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} または {{domxref("Document.designMode", "designMode")}} が有効になっている要素上のイベントも扱います。

+ +
+

注記: oninput と異なり、{{domxref("GlobalEventHandlers.onchange", "onchange")}} イベントハンドラーは、各要素の value が変化するたびに呼び出される必要がありません。

+
+ +

構文

+ +
target.oninput = functionRef;
+ +

値

+ +

functionRef は関数名または 関数式 です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。

+ +

例

+ +

この例は、{{HtmlElement("input")}} 要素のコンテンツを変更する度に、その文字数をログ出力します。

+ +

HTML

+ +
<input type="text" placeholder="ここに何か入力すると、その長さが分かります。" size="50">
+<p id="log"></p>
+ +

JavaScript

+ +
let input = document.querySelector('input');
+let log = document.getElementById('log');
+
+input.oninput = handleInput;
+
+function handleInput(e) {
+  log.textContent = `フィールドの value は
+      ${e.target.value.length} 文字の長さです。`;
+}
+ +

実行結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様

+ + + + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName("HTML WHATWG", "#ix-handler-oninput", "oninput")}}{{Spec2("HTML WHATWG")}}初期定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.GlobalEventHandlers.oninput")}}

+ +

以下のリンクは、互換性の問題と修正についての議論です。古いブラウザーで動作させる場合に役立つでしょう:

+ + + +

関連項目

+ + diff --git a/files/ja/web/api/globaleventhandlers/oninvalid/index.html b/files/ja/web/api/globaleventhandlers/oninvalid/index.html new file mode 100644 index 0000000000..8b16664837 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/oninvalid/index.html @@ -0,0 +1,98 @@ +--- +title: GlobalEventHandlers.oninvalid +slug: Web/API/GlobalEventHandlers/oninvalid +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/oninvalid +--- +
{{ ApiRef("HTML DOM") }}
+ +

oninvalid は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("invalid")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。

+ +

invalid イベントは、送信可能な要素が検証され、条件を満たしていない場合に発生します。送信可能な要素の有効性は、フォームを送信する前、またはフォームの checkValidity() メソッドが呼び出された後に検証されます。

+ +

構文

+ +
target.oninvalid = functionRef;
+var functionRef = target.oninvalid;
+
+ +

値

+ +

functionRef は、関数名または関数式です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。

+ +

例

+ +

この例は、フォーム上の oninvalid と {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} イベントハンドラーを示しています。

+ +

HTML

+ +
<form id="form">
+  <p id="error" hidden>Please fill out all fields.</p>
+
+  <label for="city">City</label>
+  <input type="text" id="city" required>
+
+  <button type="submit">Submit</button>
+</form>
+<p id="thanks" hidden>Your data has been received. Thanks!</p>
+ +

JavaScript

+ +
const form = document.getElementById('form');
+const error = document.getElementById('error');
+const city = document.getElementById('city');
+const thanks = document.getElementById('thanks');
+
+city.oninvalid = invalid;
+form.onsubmit = submit;
+
+function invalid(event) {
+  error.removeAttribute('hidden');
+}
+
+function submit(event) {
+  form.setAttribute('hidden', '');
+  thanks.removeAttribute('hidden');
+
+  // For this example, don't actually submit the form
+  event.preventDefault();
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG','#handler-oninvalid','oninvalid')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.GlobalEventHandlers.oninvalid")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onkeydown/index.html b/files/ja/web/api/globaleventhandlers/onkeydown/index.html new file mode 100644 index 0000000000..359f29b27e --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onkeydown/index.html @@ -0,0 +1,98 @@ +--- +title: GlobalEventHandlers.onkeydown +slug: Web/API/GlobalEventHandlers/onkeydown +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onkeydown +--- +
{{ApiRef("HTML DOM")}}
+ +

onkeydown は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで {{event("keydown")}} イベントを処理する {{domxref("EventHandler")}} です。

+ +

keydown イベントは、ユーザーがキーボードのキーを押下した時に発生します。

+ +

構文

+ +
target.onkeydown = functionRef;
+ +

値

+ +

functionRef は関数名または 関数式 です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。

+ +

例

+ +

この例は、{{HtmlElement("input")}} 要素内でキーを押下するたびに、そのキーの {{domxref("KeyboardEvent.code")}} 値をログ出力します。

+ +

HTML

+ +
<input>
+<p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.onkeydown = logKey;
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onkeydown")}}

+ +

互換性ノート

+ +

Firefox 65 以降、keyup および keydown イベントは、CJKT (中国、日本、韓国、台湾) ユーザーのブラウザー間の互換性を改善するために、IME 変換中に発生するようになりました (詳細は {{bug(354358)}} および IME 変換中にも keydown、keyup イベントが発生するようになりました を参照)。変換対象の一部に対してすべての keydown イベントを無視するには、次のようにしてください (229 は IME により処理されるイベントに関する keyCode の特別な値セットです):

+ +
eventTarget.addEventListener("keydown", event => {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // do something
+});
+
+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onkeypress/index.html b/files/ja/web/api/globaleventhandlers/onkeypress/index.html new file mode 100644 index 0000000000..ec50e5bea0 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onkeypress/index.html @@ -0,0 +1,166 @@ +--- +title: GlobalEventHandlers.onkeypress +slug: Web/API/GlobalEventHandlers/onkeypress +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onkeypress +--- +
{{ApiRef("HTML DOM")}} {{deprecated_header}}
+ +

{{domxref("GlobalEventHandlers")}} ミックスインの onkeypress プロパティは、{{event("onkeypress")}} イベントを処理する {{domxref("EventHandler")}} です。

+ +

keypress イベントはユーザーがキーボード上のキーを押下した時に発生すべきですが、実際のブラウザーでは特定のキーについて keypress イベントを発生させません。

+ +
+

onkeypress イベントハンドラーは非推奨です。代わりに {{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}} を使用してください。

+
+ +

構文

+ +
target.onkeypress = functionRef;
+
+ +

値

+ +

functionRef は関数名または 関数式 です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。

+ +

例

+ +

基本的な例

+ +

この例は、{{HtmlElement("input")}} 要素内でキーを押すたびに、そのキーの {{domxref("KeyboardEvent.code")}} 値をログ出力します。

+ +

HTML

+ +
<input>
+<p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.onkeypress = logKey;
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

実行結果

+ +

{{EmbedLiveSample("Basic_example", 700, 200)}}

+ +

正規表現でキーを絞り込む

+ +

この例は、フォームフィールドに入力された文字を 正規表現 を利用して絞り込みます。

+ +

HTML

+ +
<label>Enter numbers only:
+  <input>
+</label>
+ +

JavaScript

+ +
function numbersOnly(event) {
+  return event.charCode === 0 || /\d/.test(String.fromCharCode(event.charCode));
+}
+
+const input = document.querySelector('input');
+input.onkeypress = numbersOnly;
+
+// 貼り付けを抑止 (貼り付けられたコンテンツに数字以外の文字が含まれる可能性があるため)
+input.onpaste = event => false;
+ +

実行結果

+ +

{{EmbedLiveSample("Filter_keys_with_a_regular_expression")}}

+ +

合言葉の入力を捕捉する

+ +

次の JavaScript 関数は、ユーザーがページ上のどこかに "exit" と入力した後に何かをします。

+ +
/* Type the word "exit" in any point of your page... */
+
+(function () {
+  const sSecret = /* Choose your hidden word...: */ "exit";
+  let nOffset = 0;
+
+  document.onkeypress = function(oPEvt) {
+    let oEvent = oPEvt || window.event,
+        nChr = oEvent.charCode,
+        sNodeType = oEvent.target.nodeName.toUpperCase();
+
+    if (nChr === 0 ||
+        oEvent.target.contentEditable.toUpperCase() === "TRUE" ||
+        sNodeType === "TEXTAREA" ||
+        sNodeType === "INPUT" && oEvent.target.type.toUpperCase() === "TEXT") {
+      return true;
+    }
+
+    if (nChr !== sSecret.charCodeAt(nOffset)) {
+      nOffset = nChr === sSecret.charCodeAt(0) ? 1 : 0;
+    } else if (nOffset < sSecret.length - 1) {
+      nOffset++;
+    } else {
+      nOffset = 0;
+      /* Do something here... */
+      alert("Yesss!!!");
+      location.assign("https://developer.mozilla.org/");
+    }
+
+    return true;
+  };
+})();
+ +
+

注記: 合言葉の入力を捕捉する完全なフレームワークは、GitHub 上にあります。

+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeypress','onkeypress')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onkeypress")}}

+ +

ブラウザー互換性ノート

+ + +
+ +

関連項目

+ + diff --git a/files/ja/web/api/globaleventhandlers/onkeyup/index.html b/files/ja/web/api/globaleventhandlers/onkeyup/index.html new file mode 100644 index 0000000000..1419880ffc --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onkeyup/index.html @@ -0,0 +1,95 @@ +--- +title: GlobalEventHandlers.onkeyup +slug: Web/API/GlobalEventHandlers/onkeyup +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onkeyup +--- +
{{ApiRef("HTML DOM")}}
+ +

{{domxref("GlobalEventHandlers")}} ミックスインの onkeyup プロパティは、{{event("onkeyup")}} イベントを処理する {{domxref("EventHandler")}} です。

+ +

keyup イベントは、ユーザーが押していたキーを離した時に発生します。

+ +

構文

+ +
target.onkeyup = functionRef;
+ +

値

+ +

functionRef は関数名または 関数式 です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。

+ +

例

+ +

この例は、{{HtmlElement("input")}} 要素内でキーを離すたびに、そのキーの {{domxref("KeyboardEvent.code")}} 値をログ出力します。

+ +

HTML

+ +
<input>
+<p id="log"></p>
+ +

JavaScript

+ +
const input = document.querySelector('input');
+const log = document.getElementById('log');
+
+input.onkeyup = logKey;
+
+function logKey(e) {
+  log.textContent += ` ${e.code}`;
+}
+ +

実行結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onkeyup','onkeyup')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.GlobalEventHandlers.onkeyup")}}

+ +

互換性ノート

+ +

Firefox 65 以降、keyup および keydown イベントは、CJKT (中国、日本、韓国、台湾) ユーザーのブラウザー間の互換性を改善するために、IME 変換中に発生するようになりました (詳細は {{bug(354358)}} および IME 変換中にも keydown、keyup イベントが発生するようになりました を参照)。変換対象の一部に対してすべての keydown イベントを無視するには、次のようにしてください (229 は IME により処理されるイベントに関する keyCode の特別な値セットです):

+ +
eventTarget.addEventListener("keyup", event => {
+  if (event.isComposing || event.keyCode === 229) {
+    return;
+  }
+  // do something
+});
+ +

関連項目

+ + diff --git a/files/ja/web/api/globaleventhandlers/onload/index.html b/files/ja/web/api/globaleventhandlers/onload/index.html new file mode 100644 index 0000000000..6165e41f7e --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onload/index.html @@ -0,0 +1,56 @@ +--- +title: window.onload +slug: Web/API/GlobalEventHandlers/onload +tags: + - DOM + - Gecko + - Gecko DOM Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onload +--- +
+ {{ApiRef}}
+

概要

+

{{domxref("window")}} の load イベントに対応するイベントハンドラです。

+

構文

+
window.onload = funcRef;
+
+ +

例

+
window.onload = function() {
+  doSomething(); // DOM 構築後に実行したい関数の呼び出し
+};
+
+
<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8" />
+<title>onload のテスト</title>
+
+<script>
+function load() {
+  alert("load イベントが発生しました。");
+}
+
+window.onload = load;
+</script>
+
+</head>
+<body>
+<p>文書の読み込みの完了時に load イベントが発生します。</p>
+</body>
+</html>
+
+

注記

+

load イベントは文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了しています。

+

DOMContentLoaded や DOMFrameContentLoaded のような Gecko で定められた DOM イベント (※{{domxref("element.addEventListener()")}} でハンドリング可能) もありますが、これらは他のリソースのロード完了を待たずに発生するものです。つまり、 window.onload より先に発生します。

+

仕様

+ +

関連情報

+ diff --git a/files/ja/web/api/globaleventhandlers/onloadend/index.html b/files/ja/web/api/globaleventhandlers/onloadend/index.html new file mode 100644 index 0000000000..ea6c7358b3 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onloadend/index.html @@ -0,0 +1,57 @@ +--- +title: GlobalEventHandlers.onloadend +slug: Web/API/GlobalEventHandlers/onloadend +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - Web + - events + - onloadend +translation_of: Web/API/GlobalEventHandlers/onloadend +--- +
{{ApiRef}}
+ +

onloadend は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{domxref("XMLHttpRequest/loadend_event", "loadend")}} イベントが発行されたとき (リソースの読み取り中に進捗が停止したとき) に呼び出されるコードを表すイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

構文

+ +
img.onloadend = funcRef;
+
+ +

値

+ +

funcRef はリソースの loadend イベントが発行されたときに呼び出されるハンドラー関数です。

+ +

例

+ +

HTML

+ +
<img src="myImage.jpg">
+ +

JavaScript

+ +
// 'loadstart' が最初に発行され、次に 'load'、その次に 'loadend'
+
+image.addEventListener('load', function(e) {
+  console.log('Image loaded');
+});
+
+image.addEventListener('loadstart', function(e) {
+  console.log('Image load started');
+});
+
+image.addEventListener('loadend', function(e) {
+  console.log('Image load finished');
+});
+ +

ブラウザーの互換性

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onloadend")}}

+
diff --git a/files/ja/web/api/globaleventhandlers/onlostpointercapture/index.html b/files/ja/web/api/globaleventhandlers/onlostpointercapture/index.html new file mode 100644 index 0000000000..208b927bc7 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onlostpointercapture/index.html @@ -0,0 +1,69 @@ +--- +title: GlobalEventHandlers.onlostpointercapture +slug: Web/API/GlobalEventHandlers/onlostpointercapture +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - events + - onlostpointercapture +translation_of: Web/API/GlobalEventHandlers/onlostpointercapture +--- +
{{ApiRef("HTML DOM")}}
+ +

{{domxref("GlobalEventHandlers")}} ミックスインの onlostpointercapture プロパティは、{{event("lostpointercapture")}} イベントを処理する {{domxref("EventHandler")}} です。

+ +

構文

+ +
target.onlostpointercapture = functionRef;
+ +

値

+ +

functionRef は、関数名または関数式です。 関数は {{domxref("PointerEvent")}} オブジェクトを唯一の引数として受け取ります。

+ +

例

+ +
function overHandler(event) {
+  // ターゲットイベントの lostpointercapture ハンドラを決定します
+  let lostCaptureHandler = event.target.onlostpointercapture;
+}
+
+function init() {
+  let el = document.getElementById('target');
+  el.onlostpointercapture = overHandler;
+}
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName('Pointer Events 2', '#the-lostpointercapture-event', 'onlostpointercapture')}}{{Spec2('Pointer Events 2')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onlostpointercapture")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onmousedown/index.html b/files/ja/web/api/globaleventhandlers/onmousedown/index.html new file mode 100644 index 0000000000..b983b353c0 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onmousedown/index.html @@ -0,0 +1,121 @@ +--- +title: element.onmousedown +slug: Web/API/globalEventhandlers/onmousedown +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onmousedown +--- +
{{ ApiRef("HTML DOM") }}
+ +

onmousedown は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mousedown")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。

+ +

mousedown イベントは、ユーザーがマウスボタンを押したときに発生します。

+ +
+

メモ: onmousedown の反対の動作は {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}} です。

+
+ +

構文

+ +
target.onmousedown = functionRef;
+
+ +

値

+ +

functionRef は、関数名または関数式です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。

+ +

例

+ +

この例は、マウスボタンを押したままにすると画像の一部を表示します。onmousedown, {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}, {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}} イベントハンドラーを使用します。

+ +

HTML

+ +
<div class="container">
+  <div class="view" hidden></div>
+  <img src="https://interactive-examples.mdn.mozilla.net/media/examples/gecko-320-213.jpg">
+</div>
+ +

CSS

+ +
.container {
+  width: 320px;
+  height: 213px;
+  background: black;
+}
+
+.view {
+  position: absolute;
+  width: 100px;
+  height: 100px;
+  background: white;
+  border-radius: 50%;
+}
+
+img {
+  mix-blend-mode: darken;
+}
+ +

JavaScript

+ +
function showView(event) {
+  view.removeAttribute('hidden');
+  view.style.left = event.clientX - 50 + 'px';
+  view.style.top = event.clientY - 50 + 'px';
+  event.preventDefault();
+}
+
+function moveView(event) {
+  view.style.left = event.clientX - 50 + 'px';
+  view.style.top = event.clientY - 50 + 'px';
+}
+
+function hideView(event) {
+  view.setAttribute('hidden', '');
+}
+
+const container = document.querySelector('.container');
+const view = document.querySelector('.view');
+
+container.onmousedown = showView;
+container.onmousemove = moveView;
+document.onmouseup = hideView;
+ +

結果

+ +

{{EmbedLiveSample("Example", 700, 300)}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onmousedown','onmousedown')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザの互換性

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onmousedown")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onmouseenter/index.html b/files/ja/web/api/globaleventhandlers/onmouseenter/index.html new file mode 100644 index 0000000000..5e78df7bfe --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onmouseenter/index.html @@ -0,0 +1,54 @@ +--- +title: GlobalEventHandlers.onmouseenter +slug: Web/API/GlobalEventHandlers/onmouseenter +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onmouseenter +--- +
{{ ApiRef("HTML DOM") }}
+ +

onmouseenter は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseenter")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。

+ +

mouseenter イベントは、ポインティングデバイス（通常はマウス）がリスナーが接続されている要素上に移動したときに発生します。

+ +

構文

+ +
element.onmouseenter = handlerFunction;
+var handlerFunction = element.onmouseenter;
+
+ +

handlerFunction は、イベントのハンドラを指定する null または JavaScript 関数 です。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','#handler-onmouseenter','onmouseenter')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onmouseenter")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onmouseleave/index.html b/files/ja/web/api/globaleventhandlers/onmouseleave/index.html new file mode 100644 index 0000000000..b6065b7161 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onmouseleave/index.html @@ -0,0 +1,54 @@ +--- +title: GlobalEventHandlers.onmouseleave +slug: Web/API/GlobalEventHandlers/onmouseleave +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onmouseleave +--- +
{{ ApiRef("HTML DOM") }}
+ +

onmouseleave は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseleave")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。

+ +

mouseleave イベントは、ポインティングデバイス（通常はマウス）がリスナーが接続されている要素から外れたときに発生します。

+ +

構文

+ +
element.onmouseleave = handlerFunction;
+var handlerFunction = element.onmouseleave;
+
+ +

handlerFunction は、イベントのハンドラを指定する null または JavaScript 関数 です。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','#handler-onmouseleave','onmouseleave')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onmouseleave")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onmousemove/index.html b/files/ja/web/api/globaleventhandlers/onmousemove/index.html new file mode 100644 index 0000000000..7a3e4a8764 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onmousemove/index.html @@ -0,0 +1,118 @@ +--- +title: GlobalEventHandlers.onmousemove +slug: Web/API/GlobalEventHandlers/onmousemove +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onmousemove +--- +
{{ApiRef("HTML DOM")}}
+ +

onmousemove は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mousemove")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。

+ +

ユーザーがマウスを移動すると、mousemove イベントが発生します。

+ +

構文

+ +
target.onmousemove = functionRef;
+
+ +

値

+ +

functionRef は、関数名または関数式です。 この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。

+ +

例

+ +

ツールチップ

+ +

この例では、マウスに追従するリンクのツールチップを作成します。これは、onmousemove, {{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}, {{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}} イベントハンドラーを使用します。

+ +

HTML

+ +
<p><a href="#" data-tooltip="First link">See a tooltip here &hellip;</a></p>
+<p><a href="#" data-tooltip="Second link">&hellip; or here!</a></p>
+ +

CSS

+ +
.tooltip {
+  position: absolute;
+  z-index: 9999;
+  padding: 6px;
+  background: #ffd;
+  border: 1px #886 solid;
+  border-radius: 5px;
+}
+ +

JavaScript

+ +
const tooltip = new (function() {
+  const node = document.createElement('div');
+  node.className = 'tooltip';
+  node.setAttribute('hidden', '');
+  document.body.appendChild(node);
+
+  this.follow = function(event) {
+    node.style.left = event.clientX + 20 + 'px';
+    node.style.top = event.clientY + 10 + 'px';
+  };
+
+  this.show = function(event) {
+    node.textContent = event.target.dataset.tooltip;
+    node.removeAttribute('hidden');
+  };
+
+  this.hide = function() {
+    node.setAttribute('hidden', '');
+  };
+})();
+
+const links = document.querySelectorAll('a');
+
+links.forEach(link => {
+  link.onmouseover = tooltip.show;
+  link.onmousemove = tooltip.follow;
+  link.onmouseout = tooltip.hide;
+});
+ +

結果

+ +

{{EmbedLiveSample("Tooltips")}}

+ +

ドラッグ可能な要素

+ +

また、ドラッグ可能なオブジェクトで onmousemove イベントハンドラーを使用する例も用意しています。実際の例をご覧ください。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onmousemove','onmousemove')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザの互換性

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onmousemove")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onmouseout/index.html b/files/ja/web/api/globaleventhandlers/onmouseout/index.html new file mode 100644 index 0000000000..453c9da86f --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onmouseout/index.html @@ -0,0 +1,73 @@ +--- +title: GlobalEventHandlers.onmouseout +slug: Web/API/GlobalEventHandlers/onmouseout +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onmouseout +--- +
{{ ApiRef("HTML DOM") }}
+ +

onmouseout は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseout")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。

+ +

mouseout イベントは、マウスが要素から離れると発生します。例えば、ウェブページ内の画像からマウスが離れると、その画像要素に対して mouseout イベントが発生します。

+ +

構文

+ +
element.onmouseout = function;
+
+ +

例

+ +

この例は、onmouseout と onmouseover イベントを段落に追加しています。マウスを要素の上や外に移動してみてください。

+ +

HTML

+ +
<p>Test your mouse on me!</p>
+ +

JavaScript

+ +
const p = document.querySelector('p');
+p.onmouseover = logMouseOver;
+p.onmouseout = logMouseOut;
+
+function logMouseOver() {
+  p.innerHTML = 'MOUSE OVER detected';
+}
+
+function logMouseOut() {
+  p.innerHTML = 'MOUSE OUT detected';
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseout','onmouseout')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザの互換性

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onmouseout")}}

+
diff --git a/files/ja/web/api/globaleventhandlers/onmouseover/index.html b/files/ja/web/api/globaleventhandlers/onmouseover/index.html new file mode 100644 index 0000000000..7a6dea5747 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onmouseover/index.html @@ -0,0 +1,73 @@ +--- +title: GlobalEventHandlers.onmouseover +slug: Web/API/GlobalEventHandlers/onmouseover +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onmouseover +--- +
{{ApiRef("HTML DOM")}}
+ +

onmouseover は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseover")}} イベントを処理す{{domxref("EventHandler" ,"イベントハンドラー")}}です。

+ +

mouseover イベントは、ユーザーが特定の要素の上にマウスを移動させたときに発生します。

+ +

構文

+ +
element.onmouseover = function;
+
+ +

例

+ +

この例は、onmouseover と onmouseout イベントを段落に追加しています。マウスを要素の上や外に移動してみてください。

+ +

HTML

+ +
<p>Test your mouse on me!</p>
+ +

JavaScript

+ +
const p = document.querySelector('p');
+p.onmouseover = logMouseOver;
+p.onmouseout = logMouseOut;
+
+function logMouseOver() {
+  p.innerHTML = 'MOUSE OVER detected';
+}
+
+function logMouseOut() {
+  p.innerHTML = 'MOUSE OUT detected';
+}
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseover','onmouseover')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザの互換性

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onmouseover")}}

+
diff --git a/files/ja/web/api/globaleventhandlers/onmouseup/index.html b/files/ja/web/api/globaleventhandlers/onmouseup/index.html new file mode 100644 index 0000000000..21837138aa --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onmouseup/index.html @@ -0,0 +1,125 @@ +--- +title: element.onmouseup +slug: Web/API/GlobalEventHandlers/onmouseup +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onmouseup +--- +
{{ApiRef("HTML DOM")}}
+ +

onmouseup は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseup")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。

+ +

mouseup イベントは、ユーザーがマウスボタンを離したときに発生します。

+ +
+

メモ: onmouseup の反対の動作は {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} です。

+
+ +

構文

+ +
target.onmouseup = functionRef;
+ +

値

+ +

functionRef は、関数名または関数式です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。

+ +

例

+ +

この例は、マウスでクリックするとトーストが非表示になり、離すと再び表示されます。{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} と onmouseup イベントハンドラーを使用します。

+ +

HTML

+ +
<div class="container">
+  <div class="toaster"></div>
+  <div class="toast">Hello world!</div>
+</div>
+ +

CSS

+ +
.container {
+  position: absolute;
+  left: 50%;
+  bottom: 20px;
+  transform: translate(-50%);
+}
+
+.toaster {
+  width: 160px;
+  height: 110px;
+  background: #bbb;
+  border-radius: 10px 10px 0 0;
+}
+
+.toast {
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  z-index: -1;
+  width: 100px;
+  height: 50px;
+  padding: 10px;
+  background: #ed9;
+  border-radius: 10px 10px 0 0;
+  transform: translate(-50%, -90px);
+  transition: transform .3s;
+}
+
+.depressed {
+  transform: translate(-50%, -50%);
+}
+ +

JavaScript

+ +
function depress() {
+  toast.classList.add('depressed');
+}
+
+function release() {
+  toast.classList.remove('depressed');
+}
+
+const toaster = document.querySelector('.toaster');
+const toast = document.querySelector('.toast');
+
+toaster.onmousedown = depress;
+document.onmouseup = release;
+ +

結果

+ +

{{EmbedLiveSample("Example", 700, 200)}}

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseup','onmouseup')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザの互換性

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onmouseup")}}

+
+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onplaying/index.html b/files/ja/web/api/globaleventhandlers/onplaying/index.html new file mode 100644 index 0000000000..8ae6f5cc04 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onplaying/index.html @@ -0,0 +1,58 @@ +--- +title: GlobalEventHandlers.onplaying +slug: Web/API/GlobalEventHandlers/onplaying +tags: + - API + - Event Handler + - GlobalEventHandlers + - Property + - Reference + - イベントハンドラー + - プロパティ +translation_of: Web/API/GlobalEventHandlers/onplaying +--- +
{{ApiRef("HTML DOM")}}
+ +

onplaying は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{domxref("EventHandler")}} のうち {{event("playing")}} イベントを処理するためのものです。

+ +

playing イベントは、メディアデータが不足して一時停止または遅延した後、再生が開始できる状態になったときに発生します。

+ +

構文

+ +
element.onplaying = handlerFunction;
+var handlerFunction = element.onplaying;
+
+ +

handlerFunction は null またはイベントのハンドラーを指定する JavaScript 関数です。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','#handler-onplaying','onplaying')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onplaying")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onpointercancel/index.html b/files/ja/web/api/globaleventhandlers/onpointercancel/index.html new file mode 100644 index 0000000000..e3483ae38b --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onpointercancel/index.html @@ -0,0 +1,90 @@ +--- +title: GlobalEventHandlers.onpointercancel +slug: Web/API/GlobalEventHandlers/onpointercancel +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - PointerEvent + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onpointercancel +--- +
{{ApiRef("HTML DOM")}}
+ +

onpointercancel は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("pointercancel")}} イベントを処理する {{domxref("EventHandler")}} です。

+ +

構文

+ +
targetElement.onpointercancel = cancelHandler;
+
+var cancelHandler = targetElement.onpointercancel;
+
+ +

値

+ +
+
cancelHandler
+
要素 targetElement の pointercancel イベントハンドラ。
+
+ +

例

+ +

この例では、onpointercancel を使用して要素の pointercancel イベントを処理する2つの方法を示します。

+ +
<html>
+<script>
+function cancelHandler(ev) {
+  // pointercancel イベントの処理
+}
+function init() {
+  var el = document.getElementById('target1');
+  el.onpointercancel = cancelHandler;
+}
+</script>
+
+<body onload="init();">
+  <div id="target1"> Touch me ... </div>
+  <div id="target2" onpointercancel="cancelHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointercancel', 'onpointercancel')}}{{Spec2('Pointer Events 2')}}不安定版
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointercancel', 'onpointercancel')}}{{Spec2('Pointer Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onpointercancel")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onpointerdown/index.html b/files/ja/web/api/globaleventhandlers/onpointerdown/index.html new file mode 100644 index 0000000000..fa4c33e8fe --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onpointerdown/index.html @@ -0,0 +1,167 @@ +--- +title: GlobalEventHandlers.onpointerdown +slug: Web/API/GlobalEventHandlers/onpointerdown +tags: + - API + - Document + - Element + - GlobalEventHandlers + - HTML DOM + - Pointer Events + - Pointer Events API + - PointerEvent + - Property + - Reference + - Window +translation_of: Web/API/GlobalEventHandlers/onpointerdown +--- +
{{APIRef("HTML DOM")}}
+ +

ontransitioncancel は {{domxref("GlobalEventHandlers")}} のイベントハンドラーで、ポインティングデバイスが最初に押されたときに発生する {{event("pointerdown")}} イベントのイベントハンドラーを指定するために使用します。このイベントは {{domxref("Window")}}, {{domxref("Document")}}, {{domxref("Element")}} の各オブジェクトに送信されることがあります。

+ +

これは、マウスまたはマウスと互換性のあるデバイスでユーザーが操作したために生成された場合の {{event("mousedown")}} イベントと機能的に同等です。 pointerdown イベントが {{domxref("Event.preventDefault", "preventDefault()")}} の呼び出しによってキャンセルされなかった場合、ほとんどのユーザーエージェントは mousedown イベントを発生させるので、ポインターイベントを使用していないサイトでも機能します。

+ +

{{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、 pointerdown イベントのリスナーを追加することもできます。

+ +

構文

+ +
target.onpointerdown = downHandler;
+
+var downHandler = target.onpointerdown;
+
+ +

値

+ +

関数 ({{jsxref("Function")}}) で、 pointerdown イベントがtarget で指定された {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}} に送られた場合に処理するためのものです。これは入力として pointerdown イベントを記述する {{domxref("PointerEvent")}} を受け取ります。

+ +

例

+ +

この例では、onpointerdown を使用して pointerdown イベントを監視し、それに基づいて行動する方法を示します。 もちろん、addEventListener() を使うこともできます。

+ +

JavaScript

+ +

まず、pointerdown イベントを処理する JavaScript コードを見てみましょう。

+ +
var targetBox = document.getElementById("target");
+
+targetBox.onpointerdown = handleDown;
+
+function handleDown(evt) {
+  var action;
+
+  switch(evt.pointerType) {
+    case "mouse":
+      action = "clicking";
+      break;
+    case "pen":
+      action = "tapping";
+      break;
+    case "touch":
+      action = "touching";
+      break;
+    default:
+      action = "interacting with";
+      break;
+  }
+
+  targetBox.innerHTML = "<strong>Thanks for " + action + " me!</strong>";
+  evt.preventDefault();
+}
+ +

これは単に pointerdown イベントのイベントハンドラとして関数 handleDown() を確立するために onpointerdown を使います。

+ +

handleDown() 関数は、今度は {{domxref("PointerEvent.pointerType", "pointerType")}} の値を調べて使用されているポインティングデバイスの種類を判断し、その情報を使用して文字列をカスタマイズしてターゲットボックスの内容を置き換えます。

+ +

それから、イベントの {{domxref("Event.preventDefault", "preventDefault()")}} メソッドを呼び出して、mousedown イベントがトリガーされないようにします。 そうしないで、ポインターイベントのサポートが欠けている場合に備えて、それらのイベント用のハンドラを持っていると、イベントが2回処理される可能性があります。

+ +

{{event("pointerup")}} イベント用のハンドラーもあります。

+ +
targetBox.onpointerup = handleUp;
+
+function handleUp(evt) {
+  targetBox.innerHTML = "Tap me, click me, or touch me!";
+  evt.preventDefault();
+}
+ +

このコードの役割は、ユーザーによる要素の操作が終了した後 (例えば、マウスボタンを放したとき、またはスタイラスや指を画面から離したときなど) に、元のテキストをターゲットボックスに復元することです。

+ +

さらに、mouseup イベントが不必要にトリガーされないようにするために、イベントの {{domxref("Event.preventDefault", "preventDefault()")}} メソッドを呼び出します。

+ +
+

HTML

+ + +

HTML は次のように非常に単純です。

+ +
<div id="target">
+  Tap me, click me, or touch me!
+</div>
+
+ +
+

CSS

+ + +

CSS は単にターゲットの外観を設定するだけで、その機能にはまったく影響しません。

+ +
#target {
+  width: 400px;
+  height: 30px;
+  text-align: center;
+  font: 16px "Open Sans", "Helvetica", sans-serif;
+  color: white;
+  background-color: blue;
+  border: 2px solid darkblue;
+  cursor: pointer;
+  user-select: none;
+  -moz-user-select: none;
+  -webkit-user-select: none;
+  -ms-user-select: none;
+}
+
+ +

結果

+ +

結果の出力は次の通りです。 ボックスをタップ、クリック、タッチして、何が起こるかを確認してください。 最大の効果を得るには、さまざまなポインタタイプで試してください。

+ +

{{EmbedLiveSample("Example", 450, 50)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerdown', 'onpointerdown')}}{{Spec2('Pointer Events 2')}}不安定版
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerdown', 'onpointerdown')}}{{Spec2('Pointer Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onpointerdown")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onpointerenter/index.html b/files/ja/web/api/globaleventhandlers/onpointerenter/index.html new file mode 100644 index 0000000000..31b5820885 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onpointerenter/index.html @@ -0,0 +1,89 @@ +--- +title: GlobalEventHandlers.onpointerenter +slug: Web/API/GlobalEventHandlers/onpointerenter +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - PointerEvent + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onpointerenter +--- +
{{ApiRef("HTML DOM")}}
+ +

onpointerenter は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{domxref("HTMLElement/pointerenter_event", "pointerenter")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

構文

+ +
targetElement.onpointerenter = enterHandler;
+
+var enterHandler = targetElement.onpointerenter;
+
+ +

値

+ +
+
enterHandler
+
要素 targetElement の pointerenter イベントハンドラー。
+
+ +

例

+ +

この例では、onpointerenter を使用して要素の pointerenter イベントハンドラーを設定する2つの方法を示します。

+ +
<html>
+<script>
+function enterHandler(ev) {
+  // pointerenter イベントの処理
+}
+function init() {
+  let el = document.getElementById('target1');
+  el.onpointerenter = enterHandler;
+}
+</script>
+
+<body onload="init();">
+  <div id="target1"> Touch me ... </div>
+  <div id="target2" onpointerenter="enterHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerenter', 'onpointerenter')}}{{Spec2('Pointer Events 2')}}不安定版
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerenter', 'onpointerenter')}}{{Spec2('Pointer Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onpointerenter")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onpointerleave/index.html b/files/ja/web/api/globaleventhandlers/onpointerleave/index.html new file mode 100644 index 0000000000..766f94429f --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onpointerleave/index.html @@ -0,0 +1,92 @@ +--- +title: GlobalEventHandlers.onpointerleave +slug: Web/API/GlobalEventHandlers/onpointerleave +tags: + - API + - GlobalEventHandlers + - HTML DOM + - Pointer Events + - PointerEvent + - Property + - Reference + - onpointerleave +translation_of: Web/API/GlobalEventHandlers/onpointerleave +--- +
{{APIRef("HTML DOM")}}
+ +

{{domxref("HTMLElement/pointerleave_event", "pointerleave")}} イベントの{{domxref("GlobalEventHandlers","グローバルイベントハンドラー", "", 1)}}で、ポインター (マウスカーソル、指先など) がヒットテスト領域を出ると (例えば、カーソルが {{domxref("Element")}} や {{domxref("Window")}} のコンテンツ領域を出ると)、{{domxref("Node")}} に配信されます。このイベントは Pointer Events API の一部です。

+ +

構文

+ +
EventTarget.onpointerleave = leaveHandler;
+
+var leaveHandler = EventTarget.onpointerleave;
+ +

値

+ +
+
leaveHandler
+
{{domxref("EventListener")}} で、ターゲットに送信された {{domxref("HTMLElement/pointerleave_event", "pointerleave")}} イベントを処理するために呼び出されます。
+
+ +

例

+ +

この例では、onpointerleave を使用して要素の pointerleave イベントハンドラーを設定する2つの方法を示します。

+ +
<html>
+<script>
+function leaveHandler(ev) {
+ // pointerleave イベントの処理
+}
+function init() {
+ var el=document.getElementById("target1");
+ el.onpointerleave = leaveHandler;
+}
+</script>
+<body onload="init();">
+<div id="target1"> Touch me ... </div>
+<div id="target2" onpointerleave="leaveHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

詳細については、Pointer Events の使用を参照してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerleave', 'onpointerleave')}}{{Spec2('Pointer Events 2')}}不安定版
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerleave', 'onpointerleave')}}{{Spec2('Pointer Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onpointerleave")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onpointermove/index.html b/files/ja/web/api/globaleventhandlers/onpointermove/index.html new file mode 100644 index 0000000000..a755cb04d0 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onpointermove/index.html @@ -0,0 +1,89 @@ +--- +title: GlobalEventHandlers.onpointermove +slug: Web/API/GlobalEventHandlers/onpointermove +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - PointerEvent + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onpointermove +--- +
{{ApiRef("HTML DOM")}}
+ +

onpointermove は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("pointermove")}} イベントを処理する {{domxref("EventHandler")}} です。

+ +

構文

+ +
targetElement.onpointermove = moveHandler;
+
+var moveHandler = targetElement.onpointermove;
+
+ +

値

+ +
+
moveHandler
+
要素 targetElement の pointermove イベントハンドラー。
+
+ +

例

+ +

この例では、onpointermove を使用して要素の pointermove イベントハンドラを設定する2つの方法を示します。

+ +
<html>
+<script>
+function moveHandler(ev) {
+  // pointermove イベントの処理
+}
+function init() {
+  let el=document.getElementById('target1');
+  el.onpointermove = moveHandler;
+}
+</script>
+
+<body onload="init();">
+  <div id="target1"> Touch me ... </div>
+  <div id="target2" onpointermove="moveHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointermove', 'onpointermove')}}{{Spec2('Pointer Events 2')}}不安定版
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointermove', 'onpointermove')}}{{Spec2('Pointer Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onpointermove")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onpointerout/index.html b/files/ja/web/api/globaleventhandlers/onpointerout/index.html new file mode 100644 index 0000000000..8943b404d2 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onpointerout/index.html @@ -0,0 +1,89 @@ +--- +title: GlobalEventHandlers.onpointerout +slug: Web/API/GlobalEventHandlers/onpointerout +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - PointerEvent + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onpointerout +--- +
{{ApiRef("HTML DOM")}}
+ +

onpointerout は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("pointerout")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

構文

+ +
targetElement.onpointerout = outHandler;
+
+var outHandler = targetElement.onpointerout;
+
+ +

値

+ +
+
outHandler
+
要素 targetElement の pointerout イベントハンドラー。
+
+ +

例

+ +

この例では、onpointerout を使用して要素の pointerout イベントハンドラーを設定する2つの方法を示します。

+ +
<html>
+<script>
+function outHandler(ev) {
+  // pointerout イベントの処理
+}
+function init() {
+  let el=document.getElementById('target1');
+  el.onpointerout = outHandler;
+}
+</script>
+
+<body onload="init();">
+  <div id="target1"> Touch me ... </div>
+  <div id="target2" onpointerout="outHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerout', 'onpointerout')}}{{Spec2('Pointer Events 2')}}不安定版
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerout', 'onpointerout')}}{{Spec2('Pointer Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onpointerout")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onpointerover/index.html b/files/ja/web/api/globaleventhandlers/onpointerover/index.html new file mode 100644 index 0000000000..4a167e3685 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onpointerover/index.html @@ -0,0 +1,89 @@ +--- +title: GlobalEventHandlers.onpointerover +slug: Web/API/GlobalEventHandlers/onpointerover +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - PointerEvent + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onpointerover +--- +
{{ApiRef("HTML DOM")}}
+ +

onpointerover は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("pointerover")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

構文

+ +
targetElement.onpointerover = overHandler;
+
+var overHandler = targetElement.onpointerover;
+
+ +

値

+ +
+
overHandler
+
targetElement 要素の pointerover イベントハンドラー。
+
+ +

例

+ +

この例では、onpointerover を使用して要素の onpointerover イベントハンドラーを設定する2つの方法を示します。

+ +
<html>
+<script>
+function overHandler(ev) {
+  // pointerenter イベントの処理
+}
+function init() {
+  let el = document.getElementById('target1');
+  el.onpointerover = overHandler;
+}
+</script>
+
+<body onload="init();">
+  <div id="target1"> Touch me ... </div>
+  <div id="target2" onpointerover="overHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerover', 'onpointerover')}}{{Spec2('Pointer Events 2')}}不安定版
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerover', 'onpointerover')}}{{Spec2('Pointer Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onpointerover")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onpointerup/index.html b/files/ja/web/api/globaleventhandlers/onpointerup/index.html new file mode 100644 index 0000000000..71f04830d3 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onpointerup/index.html @@ -0,0 +1,89 @@ +--- +title: GlobalEventHandlers.onpointerup +slug: Web/API/GlobalEventHandlers/onpointerup +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - PointerEvent + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/onpointerup +--- +
{{ApiRef("HTML DOM")}}
+ +

onpointerup は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("pointerup")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

構文

+ +
targetElement.onpointerup = upHandler;
+
+var upHandler = targetElement.onpointerup;
+
+ +

値

+ +
+
upHandler
+
要素 targetElement の pointerup イベントハンドラー。
+
+ +

例

+ +

この例では、onpointerup を使用して要素の pointerup イベントハンドラーを設定する2つの方法を示します。

+ +
<html>
+<script>
+function upHandler(ev) {
+  // pointerenter イベントの処理
+}
+function init() {
+  let el = document.getElementById('target1');
+  el.onpointerup = upHandler;
+}
+</script>
+
+<body onload="init();">
+  <div id="target1"> Touch me ... </div>
+  <div id="target2" onpointerup="upHandler(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerup', 'onpointerup')}}{{Spec2('Pointer Events 2')}}不安定版
{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerup', 'onpointerup')}}{{Spec2('Pointer Events')}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onpointerup")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onscroll/index.html b/files/ja/web/api/globaleventhandlers/onscroll/index.html new file mode 100644 index 0000000000..043cd44489 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onscroll/index.html @@ -0,0 +1,110 @@ +--- +title: GlobalEventHandlers.onscroll +slug: Web/API/GlobalEventHandlers/onscroll +tags: + - API + - Event Handler + - GlobalEventHandlers + - HTML DOM + - Property + - Reference + - イベントハンドラー + - プロパティ +translation_of: Web/API/GlobalEventHandlers/onscroll +--- +
{{ApiRef("HTML DOM")}}
+ +

onscroll は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 scroll イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

scroll イベントは、ユーザー、 Web API、{{glossary("user agent","ユーザーエージェント")}}の何れかによって文書のビューまたは要素がスクロールしたときに発生します。

+ +
+

注: onscroll を {{domxref("GlobalEventHandlers.onwheel", "onwheel")}} と混同しないようにしてください。

+ +

onwheel は一般的なホイールの回転を扱うのに対し、 onscroll はオブジェクトの内容のスクロールを扱います。

+
+ +

構文

+ +
target.onscroll = functionRef
+
+ +

値

+ +
+
functionRef
+
関数名または関数式です。この関数は引数として一つだけ、 {{domxref("UIEvent")}} オブジェクトを受け取ります。
+
+ +

onscroll ハンドラーは同時に1つだけ割り当てることができます。

+ +

柔軟性を高めるために、 {{event("scroll")}} イベントを {{domxref("EventTarget.addEventListener()")}} メソッドに渡すことができます。

+ +

例

+ +

この例では {{HtmlElement("textarea")}} のスクロールを監視し、その結果である要素の垂直のスクロール位置をログ出力します。

+ +

HTML

+ +
<textarea>1 2 3 4 5 6 7 8 9</textarea>
+<p id="log"></p>
+ +

CSS

+ +
textarea {
+  width: 4rem;
+  height: 8rem;
+  font-size: 3rem;
+}
+ +

JavaScript

+ +
const textarea = document.querySelector('textarea');
+const log = document.getElementById('log');
+
+textarea.onscroll = logScroll;
+
+function logScroll(e) {
+  log.textContent = `Scroll position: ${e.target.scrollTop}`;
+}
+ +

結果

+ +

{{EmbedLiveSample("Example", 700, 200)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','#handler-onscroll','onscroll')}}{{Spec2('HTML WHATWG')}}
{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}{{Spec2("DOM3 Events")}}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onscroll")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onselect/index.html b/files/ja/web/api/globaleventhandlers/onselect/index.html new file mode 100644 index 0000000000..31ac15ff9c --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onselect/index.html @@ -0,0 +1,81 @@ +--- +title: window.onselect +slug: Web/API/GlobalEventHandlers/onselect +tags: + - DOM + - Gecko + - Window +translation_of: Web/API/GlobalEventHandlers/onselect +--- +
{{ ApiRef("HTML DOM") }}
+ +

{{domxref("window")}} の select イベントに対応するイベントハンドラです。

+ +

構文

+ +
window.onselect = funcRef;
+
+ + + +

例

+ +
<!DOCTYPE html>
+<html lang="ja">
+<head>
+<meta charset="UTF-8" />
+<title>onselect のテスト</title>
+
+<style>
+.text1 { border: 2px solid red; }
+</style>
+
+<script>
+window.onselect = selectText;
+
+function selectText() {
+  alert("select イベントが発生しました。");
+}
+</script>
+</head>
+
+<body>
+<textarea class="text1" cols="30" rows="3">
+マウスでこのテキストを選択状態にすると
+onselect イベントが発生し、
+アラートを表示する関数が実行されます。
+</textarea>
+</body>
+</html>
+
+ +

注記

+ +

select イベントは、テキストインプット (<input type="text">) もしくは {{htmlelement("textarea")}} 要素のテキストが選択された直後に 発生します。

+ +

仕様

+ + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}{{Spec2('HTML WHATWG')}} 
+ +

ブラウザー実装状況

+ +
+ + +

{{Compat("api.GlobalEventHandlers.onselect")}}

+
diff --git a/files/ja/web/api/globaleventhandlers/ontouchcancel/index.html b/files/ja/web/api/globaleventhandlers/ontouchcancel/index.html new file mode 100644 index 0000000000..a960988b03 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ontouchcancel/index.html @@ -0,0 +1,85 @@ +--- +title: GlobalEventHandlers.ontouchcancel +slug: Web/API/GlobalEventHandlers/ontouchcancel +tags: + - API + - Event Handler + - Experimental + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/ontouchcancel +--- +
{{ApiRef("HTML DOM")}} {{SeeCompatTable}}
+ +

ontouchcancel は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("touchcancel")}} イベントを処理する {{domxref("EventHandler")}} です。

+ +
+

注: このプロパティは公式には標準化されていません。これは {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 仕様書で定義されているものであり、 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}} では定義されていません。このプロパティは広く実装されているわけではありません。

+
+ +

構文

+ +
var cancelHandler = someElement.ontouchcancel;
+
+ +

返値

+ +
+
cancelHandler
+
要素 someElement の touchcancel イベントハンドラー。
+
+ +

例

+ +

この例では、touchcancel を使用して要素の touchcancel イベントを処理する2つの方法を示します。

+ +
<html>
+<script>
+function cancelTouch(ev) {
+  // イベントの処理
+}
+function init() {
+  let el = document.getElementById('target1');
+  el.ontouchcancel = cancelTouch;
+}
+</script>
+
+<body onload="init();">
+  <div id="target1"> Touch me ... </div>
+  <div id="target2" ontouchcancel="cancelTouch(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Touch Events 2','#dom-globaleventhandlers-ontouchcancel')}}{{Spec2('Touch Events 2')}}非安定版
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ontouchcancel")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/ontouchend/index.html b/files/ja/web/api/globaleventhandlers/ontouchend/index.html new file mode 100644 index 0000000000..4d748dcb31 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ontouchend/index.html @@ -0,0 +1,83 @@ +--- +title: GlobalEventHandlers.ontouchend +slug: Web/API/GlobalEventHandlers/ontouchend +tags: + - API + - Experimental + - HTML DOM + - Reference + - TouchEvent +translation_of: Web/API/GlobalEventHandlers/ontouchend +--- +
{{ApiRef("HTML DOM")}} {{SeeCompatTable}}
+ +

ontouchstart は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("touchstart")}} イベントを処理する {{domxref("EventHandler")}} です。

+ +
+

注: このプロパティは公式には標準化されていません。これは {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 仕様書で定義されているものであり、 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}} では定義されていません。このプロパティは広く実装されているわけではありません。

+
+ +

構文

+ +
var endHandler = targetElement.ontouchend;
+
+ +

返値

+ +
+
endHandler
+
要素 targetElement の touchend イベントハンドラー。
+
+ +

例

+ +

この例では、ontouchend を使用して要素の touchend イベントを処理する2つの方法を示します。

+ +
<html>
+<script>
+function endTouch(ev) {
+  // イベントの処理
+}
+function init() {
+  let el = document.getElementById('target1');
+  el.ontouchend = endTouch;
+}
+</script>
+
+<body onload="init();">
+  <div id="target1"> Touch me ... </div>
+  <div id="target2" ontouchend="endTouch(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Touch Events 2','#dom-globaleventhandlers-ontouchend')}}{{Spec2('Touch Events 2')}}非安定版
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ontouchend")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/ontouchstart/index.html b/files/ja/web/api/globaleventhandlers/ontouchstart/index.html new file mode 100644 index 0000000000..b3539f5889 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ontouchstart/index.html @@ -0,0 +1,85 @@ +--- +title: GlobalEventHandlers.ontouchstart +slug: Web/API/GlobalEventHandlers/ontouchstart +tags: + - API + - Event Handler + - Experimental + - GlobalEventHandlers + - HTML DOM + - Property + - Reference +translation_of: Web/API/GlobalEventHandlers/ontouchstart +--- +
{{ApiRef("HTML DOM")}} {{SeeCompatTable}}
+ +

ontouchstart は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("touchstart")}} イベントを処理する {{domxref("EventHandler")}} です。

+ +
+

注: このプロパティは公式には標準化されていません。これは {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 仕様書で定義されているものであり、 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}} では定義されていません。このプロパティは広く実装されているわけではありません。

+
+ +

構文

+ +
var startHandler = someElement.ontouchstart;
+
+ +

返値

+ +
+
startHandler
+
要素 someElement の touchstart イベントハンドラー。
+
+ +

例

+ +

この例では、ontouchstart を使用して要素の touchstart イベントを処理する2つの方法を示します。

+ +
<html>
+<script>
+function startTouch(ev) {
+  // イベントの処理
+}
+function init() {
+  let el = document.getElementById('target1');
+  el.ontouchstart = startTouch;
+}
+</script>
+
+<body onload="init();">
+  <div id="target1"> Touch me ... </div>
+  <div id="target2" ontouchstart="startTouch(event)"> Touch me ... </div>
+</body>
+</html>
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('Touch Events 2','#dom-globaleventhandlers-ontouchstart')}}{{Spec2('Touch Events 2')}}非安定版
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onpointercancel")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/ontransitioncancel/index.html b/files/ja/web/api/globaleventhandlers/ontransitioncancel/index.html new file mode 100644 index 0000000000..b898c68422 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ontransitioncancel/index.html @@ -0,0 +1,150 @@ +--- +title: GlobalEventHandlers.ontransitioncancel +slug: Web/API/GlobalEventHandlers/ontransitioncancel +tags: + - API + - CSS Transitions + - CSS3 Transitions + - Event Handler + - GlobalEventHandlers + - Property + - Reference + - ontransitioncancel +translation_of: Web/API/GlobalEventHandlers/ontransitioncancel +--- +
{{APIRef("CSS3 Transitions")}}
+ +

ontransitioncancel は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("transitioncancel")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

transitioncancel イベントは CSS トランジションがキャンセルされたときに送信されます。トランジションがキャンセルされるのは下記のような時です。

+ + + +

構文

+ +
var transitionCancelHandler = target.ontransitioncancel;
+
+target.ontransitioncancel = {{jsxref("Function")}}
+
+ +

値

+ +

関数 ({{jsxref("Function")}}) で、 CSS トランジションがキャンセルされたことを示す {{event("transitioncancel")}} イベントが target 上で発生した場合に呼び出されるものです。対象となるオブジェクトは HTML 要素 ({{domxref("HTMLElement")}})、文書 ({{domxref("Document")}})、ウィンドウ ({{domxref("Window")}}) です。この関数は単一の引数、発生したイベントを記述する {{domxref("TransitionEvent")}} を単一の引数として受け取ります。イベントの {{domxref("TransitionEvent.elapsedTime")}} プロパティの値は、 {{cssxref("transition-duration")}} の値と同じでなければなりません。

+ +
+

注: elapsedTime には、トランジション効果が始まる前の時間は含まれていません。つまり、 {{cssxref("transition-delay")}} の値は、待ち時間が終了してアニメーションが始まるまでは 0 である elapsedTime の値に影響しません。

+
+ +

例

+ +

この例では、{{event("transitionrun")}} イベントと {{event("transitionend")}} イベントを使用して、トランジションの開始と終了を検出し、トランジション中にテキスト更新が発生するようにしています。これは、アニメーションやその他のエフェクトを起動して、反応を連鎖させるために使用することもできます。

+ +

追加で、{{event("click")}} イベントも使用しています。それで、(display: none;) で四角を非表示にすることで、{{event("transitioncancel")}} イベントが発行される様子を見ることができます。

+ +

HTML

+ +

これは {{HTMLElement("div")}} だけを作成して、後は CSS で色やトランジション後のスタイルを指定します。

+ +
<div class="box"></div>
+
+ +

CSS

+ +

下記の CSS は四角にマウスオーバーする時、色やサイズを変えたり、回転させたりするようなトランジション効果を適用します。

+ +
.box {
+  margin-left: 70px;
+  margin-top: 30px;
+  border-style: solid;
+  border-width: 1px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: #0000FF;
+  color: #FFFFFF;
+  padding: 20px;
+  font: bold 1.6em "Helvetica", "Arial", sans-serif;
+  -webkit-transition: width 2s, height 2s, background-color 2s, -webkit-transform 2s, color 2s;
+  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
+}
+
+.box:hover {
+  background-color: #FFCCCC;
+  color: #000000;
+  width: 200px;
+  height: 200px;
+  -webkit-transform: rotate(180deg);
+  transform: rotate(180deg);
+}
+
+ +

JavaScript

+ +

次に、トランジションの開始時と終了時にボックスのテキストコンテンツを変更するためにイベントハンドラ－を設定します。

+ +
let box = document.querySelector(".box");
+box.ontransitionrun = function(event) {
+  box.innerHTML = "Zooming...";
+}
+box.ontransitionend = function(event) {
+  box.innerHTML = "Done!";
+}
+
+box.onclick = function() {
+  box.style.display = 'none';
+  timeout = window.setTimeout(appear, 2000);
+  function appear() {
+    box.style.display = 'block';
+  }
+}
+
+box.ontransitioncancel = function(event) {
+  console.log('transitioncancel fired after ' + event.elapsedTime + ' seconds.');
+}
+ +

結果

+ +

結果のコンテンツは次のようになります。

+ +

{{EmbedLiveSample('Example', 600, 280)}}

+ +

四角にマウスオーバーやマウスアウトするときどうなるか見てください。

+ +

あと、開発ツールにある JavaScript コンソールも見て、トランジションが終わる前に四角をクリックしたりマウスアウトすると、どんなログが出るか注意してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions','#dom-globaleventhandlers-ontransitioncancel','ontransitioncancel')}}{{Spec2('CSS3 Transitions')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ontransitioncancel")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/ontransitionend/index.html b/files/ja/web/api/globaleventhandlers/ontransitionend/index.html new file mode 100644 index 0000000000..692ff79941 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/ontransitionend/index.html @@ -0,0 +1,134 @@ +--- +title: GlobalEventHandlers.ontransitionend +slug: Web/API/GlobalEventHandlers/ontransitionend +tags: + - API + - CSS Transitions + - CSS3 Transitions + - Document + - Element + - Event Handler + - GlobalEventHandlers + - Property + - Reference + - Window + - ontransitionend +translation_of: Web/API/GlobalEventHandlers/ontransitionend +--- +
{{APIRef("CSS3 Transitions")}}
+ +

ontransitionend は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("transitionend")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。

+ +

transitionend イベントは、 CSS トランジションが完了すると発生します。

+ +
+

トランジションの実行が完了する前に対象ノードからトランジションが削除された場合、 {{event("transitionend")}} イベントは生成されません。これは、対象に適用される {{cssxref("transition-property")}} 属性の値を変更することで発生します。もう一つは、 {{cssxref("display")}} 属性が none に設定されている場合です。

+
+ +

構文

+ +
var transitionEndHandler = target.ontransitionend;
+
+target.ontransitionend = {{jsxref("Function")}}
+
+ +

値

+ +

関数 ({{jsxref("Function")}}) で、 CSS トランジションの完了を示す {{event("transitionend")}} イベントが target 上で発生した場合に呼び出されるものです。対象となるオブジェクトは HTML 要素 ({{domxref("HTMLElement")}})、文書 ({{domxref("Document")}})、ウィンドウ ({{domxref("Window")}}) です。この関数は単一の引数、発生したイベントを記述する {{domxref("TransitionEvent")}} を単一の引数として受け取ります。イベントの {{domxref("TransitionEvent.elapsedTime")}} プロパティの値は、 {{cssxref("transition-duration")}} の値と同じでなければなりません。

+ +
+

elapsedTime には、トランジション効果が始まる前の時間は含まれていません。つまり、 {{cssxref("transition-delay")}} の値は、待ち時間が終了してアニメーションが始まるまでは 0 である elapsedTime の値に影響しません。

+
+ +

例

+ +

この例では、{{event("transitionrun")}} イベントと {{event("transitionend")}} イベントを使用して、トランジションの開始と終了を検出し、トランジション中にテキスト更新が発生するようにしています。これは、アニメーションやその他のエフェクトを起動して、反応を連鎖させるために使用することもできます。

+ +

HTML

+ +

これは単純に {{HTMLElement("div")}} を作成するだけで、以下の CSS でスタイルを変更して、ボックスの大きさを変更したり色を変更したりします。

+ +
<div class="box"></div>
+
+ +

CSS

+ +

以下の CSS は、ボックスのスタイルを設定し、ボックスの色と大きさを変化させ、マウスカーソルがボックスの上に乗っている間にボックスが回転するようなトランジション効果を適用しています。

+ +
.box {
+  margin-left: 70px;
+  margin-top: 30px;
+  border-style: solid;
+  border-width: 1px;
+  display: block;
+  width: 100px;
+  height: 100px;
+  background-color: #0000FF;
+  color: #FFFFFF;
+  padding: 20px;
+  font: bold 1.6em "Helvetica", "Arial", sans-serif;
+  transition: width 2s, height 2s, background-color 2s, transform 2s, color 2s;
+}
+
+.box:hover {
+  background-color: #FFCCCC;
+  color: #000000;
+  width: 200px;
+  height: 200px;
+  transform: rotate(180deg);
+}
+
+ +

JavaScript

+ +

次に、トランジションの開始時と終了時にボックスのテキストコンテンツを変更するためにイベントハンドラ－を設定します。

+ +
let box = document.querySelector(".box");
+box.ontransitionrun = function(event) {
+  box.innerHTML = "Zooming...";
+}
+box.ontransitionend = function(event) {
+  box.innerHTML = "Done!";
+}
+
+ +

結果

+ +

結果のコンテンツは次のようになります。

+ +

{{EmbedLiveSample('Example', 600, 280)}}

+ +

マウスカーソルをボックスの上に置いてから、マウスを移動させるとどうなるかに注目してください。

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('CSS3 Transitions','#dom-globaleventhandlers-ontransitionend','ontransitionend')}}{{Spec2('CSS3 Transitions')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.ontransitionend")}}

+ +

関連情報

+ + diff --git a/files/ja/web/api/globaleventhandlers/onwheel/index.html b/files/ja/web/api/globaleventhandlers/onwheel/index.html new file mode 100644 index 0000000000..f9ec12d548 --- /dev/null +++ b/files/ja/web/api/globaleventhandlers/onwheel/index.html @@ -0,0 +1,119 @@ +--- +title: GlobalEventHandlers.onwheel +slug: Web/API/GlobalEventHandlers/onwheel +tags: + - API + - DOM + - Event Handler + - GlobalEventHandlers + - Property + - Reference + - onwheel + - プロパティ +translation_of: Web/API/GlobalEventHandlers/onwheel +--- +
{{ ApiRef("DOM") }}
+ +

onscroll は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 wheel イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。

+ +

wheel イベントは、ユーザーがマウス (または他のポインティングデバイス) のホイールを回転させたときに発生します。

+ +
+

メモ: onwheel を {{domxref("GlobalEventHandlers.onscroll", "onscroll")}} と混同しないようにしてください。 onwheel は一般的なホイールの回転を扱うのに対し、 onscroll はオブジェクトの内容のスクロールを扱います。

+
+ +

構文

+ +
target.onwheel = functionRef;
+
+ +

値

+ +

functionRef は関数名または関数式です。この関数は引数として一つだけ、 {{domxref("WheelEvent")}} オブジェクトを受け取ります。

+ +

例

+ +

この例では、マウス (または他のポインティングデバイス) のホイールを使用して、要素を拡大縮小する方法を示します。

+ +

HTML

+ +
<div>マウスホイールで拡大縮小します。</div>
+ +

CSS

+ +
body {
+  min-height: 100vh;
+  margin: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+div {
+  width: 80px;
+  height: 80px;
+  background: #cdf;
+  padding: 5px;
+  transition: transform .3s;
+}
+ +

JavaScript

+ +
function zoom(event) {
+  event.preventDefault();
+
+  if (event.deltaY < 0) {
+    // Zoom in
+    scale *= event.deltaY * -2;
+  }
+  else {
+    // Zoom out
+    scale /= event.deltaY * 2;
+  }
+
+  // Restrict scale
+  scale = Math.min(Math.max(.125, scale), 4);
+
+  // Apply scale transform
+  el.style.transform = `scale(${scale})`;
+}
+
+let scale = 1;
+const el = document.querySelector('div');
+document.onwheel = zoom;
+ +

結果

+ +

{{EmbedLiveSample("Examples", 700, 400)}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}{{Spec2('HTML WHATWG')}}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.GlobalEventHandlers.onwheel")}}

+ +

関連情報

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