diff options
| author | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
|---|---|---|
| committer | Peter Bengtsson <mail@peterbe.com> | 2020-12-08 14:40:17 -0500 |
| commit | 33058f2b292b3a581333bdfb21b8f671898c5060 (patch) | |
| tree | 51c3e392513ec574331b2d3f85c394445ea803c6 /files/ja/web/api/globaleventhandlers | |
| parent | 8b66d724f7caf0157093fb09cfec8fbd0c6ad50a (diff) | |
| download | translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.gz translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.tar.bz2 translated-content-33058f2b292b3a581333bdfb21b8f671898c5060.zip | |
initial commit
Diffstat (limited to 'files/ja/web/api/globaleventhandlers')
51 files changed, 5048 insertions, 0 deletions
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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>GlobalEventHandlers</code></strong> ミックスインは、 {{domxref("HTMLElement")}} や {{domxref("Document")}} 、 {{domxref("Window")}} といったインターフェイスに共通のイベントハンドラーを示します。</span>もちろん、これらのインターフェイスには、以下のものに加えて他のイベントハンドラーがある場合もあります。</p> + +<div class="note"> +<p><strong>メモ</strong>: <code>GlobalEventHandlers</code> はミックスインであり、インターフェイスではありません。 <code>GlobalEventHandlers</code> 型のオブジェクトは作成できません。</p> +</div> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<p><em>このインターフェイスには、以下のイベントハンドラー以外のプロパティはありません。</em></p> + +<h3 id="Event_handlers" name="Event_handlers">イベントハンドラー</h3> + +<p>以下のイベントハンドラーは {{domxref("GlobalEventHandlers")}} ミックスインで定義されており、 {{domxref("HTMLElement")}}, {{domxref("Document")}}, {{domxref("Window")}}、さらに Web Worker 向けには {{domxref("WorkerGlobalScope")}} が実装しています。</p> + +<div id="Properties"> +<dl> + <dt>{{domxref("GlobalEventHandlers.onabort")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{domxref("HTMLMediaElement/abort_event", "abort")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationcancel")}} {{Non-standard_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>がキャンセルされたことを示す {{event("animationcancel")}} イベントが送信されたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationend")}} {{Non-standard_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>の再生が停止したことを示す、 {{event("animationend")}} イベントが送信されたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationiteration")}} {{Non-standard_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>のアニメーションシーケンスが新たなな繰り返しに入ったことを示す、{{event("animationiteration")}} イベントが送信されたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onanimationstart")}} {{Non-standard_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 <a href="/ja/docs/Web/CSS/CSS_Animations">CSS アニメーション</a>の再生が開始したことを示す、{{event("animationstart")}} イベントが送信されたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onauxclick")}} {{Non-standard_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、入力デバイスで非プライマリーボタン (例えばマウスの中ボタン) が押下されたことを示す、 {{event("auxclick")}} イベントが送信されたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.onblur")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("blur")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onerror")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("error")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onfocus")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("focus")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.oncancel")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("cancel")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplay")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("canplay")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.oncanplaythrough")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("canplaythrough")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onchange")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("change")}} イベントが発生した時にときび出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onclick")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("click")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onclose")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("close")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.oncontextmenu")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("contextmenu")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.oncuechange")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("cuechange")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ondblclick")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("dblclick")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ondrag")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("drag")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ondragend")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("dragend")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ondragenter")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("dragenter")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ondragexit")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("dragexit")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ondragleave")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("dragleave")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ondragover")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("dragover")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ondragstart")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("dragstart")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ondrop")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("drop")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ondurationchange")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("durationchange")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onemptied")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("emptied")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onended")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("ended")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onformdata")}}</dt> + <dd>{{domxref("EventHandler")}} で、フォームデータが構築されたことを表す入力リストの後で発生する {{event("formdata")}} イベントの処理をします。</dd> + <dt>{{domxref("GlobalEventHandlers.ongotpointercapture")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("gotpointercapture")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.oninput")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("input")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.oninvalid")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("invalid")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onkeydown")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("keydown")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onkeypress")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("keypress")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onkeyup")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("keyup")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onload")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("load")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onloadeddata")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("loadeddata")}} イベントが発生したときに呼び出すコードをします。</dd> + <dt>{{domxref("GlobalEventHandlers.onloadedmetadata")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("loadedmetadata")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onloadend")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("loadend")}} イベントが発生した (リソースの読み込みの進行が停止した) ときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onloadstart")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("loadstart")}} イベントが発生した (リソースの読み込みを開始した) ときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onlostpointercapture")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("lostpointercapture")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onmousedown")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("mousedown")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseenter")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("mouseenter")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseleave")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("mouseleave")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onmousemove")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("mousemove")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseout")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("mouseout")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseover")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("mouseover")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onmouseup")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("mouseup")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onmousewheel")}} {{Non-standard_inline}} {{Deprecated_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("mousewheel")}} イベントが発生したときに呼び出すコードを表します。廃止予定です。 代わりに <code>onwheel</code> を使ってください。</dd> + <dt>{{ domxref("GlobalEventHandlers.onwheel") }}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("wheel")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpause")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pause")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onplay")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("play")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onplaying")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("playing")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerdown")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pointerdown")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpointermove")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pointermove")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerup")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pointerup")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpointercancel")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pointercancel")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerover")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pointerover")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerout")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pointerout")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerenter")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pointerenter")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerleave")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pointerleave")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockchange")}} {{experimental_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pointerlockchange")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onpointerlockerror")}} {{experimental_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("pointerlockerror")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onprogress")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("progress")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onratechange")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("ratechange")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onreset")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("reset")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onresize")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("resize")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onscroll")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("scroll")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onseeked")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("seeked")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onseeking")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("seeking")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onselect")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("select")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onselectstart")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("selectstart")}} イベントが発生した (ユーザーがウェブページで新たにテキスト選択を開始した) ときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onselectionchange")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("selectionchange")}} イベントが発生した (ウェブページで選択されたテキストが替わった) ときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onshow")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("show")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onsort")}} {{experimental_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("sort")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onstalled")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("stalled")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onsubmit")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("submit")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onsuspend")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("suspend")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ontimeupdate")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("timeupdate")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.onvolumechange")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("volumechange")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchcancel")}} {{Non-standard_inline}} {{Experimental_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("touchcancel")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchend")}} {{Non-standard_inline}} {{Experimental_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("touchend")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchmove")}} {{Non-standard_inline}} {{Experimental_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("touchmove")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ontouchstart")}} {{Non-standard_inline}} {{Experimental_inline}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("touchstart")}} イベントが発生したときに呼び出すコードを表します。</dd> + <dt>{{domxref("GlobalEventHandlers.ontransitioncancel")}}</dt> + <dd>{{domxref("EventHandler")}} で、 <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>がキャンセルされたことを示す、 {{event("transitioncancel")}} イベントが送信されたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.ontransitionend")}}</dt> + <dd>{{domxref("EventHandler")}} で、 <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>の再生が停止したことを示す、{{event("transitionend")}} イベントが送信されたときに呼び出されます。</dd> + <dt>{{domxref("GlobalEventHandlers.ontransitionrun")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("transitionrun")}} イベントが送信されたときに呼び出され、 <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>が実行されていることを示しますが、開始されているとは限りません。</dd> + <dt>{{domxref("GlobalEventHandlers.ontransitionstart")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("transitionstart")}} イベントが送信されたときに呼び出され、 <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>が遷移を開始したことを示します。</dd> + <dt>{{domxref("GlobalEventHandlers.onwaiting")}}</dt> + <dd>{{domxref("EventHandler")}} で、 {{event("waiting")}} イベントが発生したときに呼び出すコードを表します。</dd> +</dl> +</div> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<p><em>このインターフェイスではメソッドを定義していません。</em></p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("Selection API",'', 'Extension to GlobalEventHandlers')}}</td> + <td>{{Spec2('Selection API')}}</td> + <td><code>onselectionchange</code> を追加。</td> + </tr> + <tr> + <td>{{SpecName('Pointer Lock', '#extensions-to-the-document-interface', 'Extension of Document')}}</td> + <td>{{Spec2('Pointer Lock')}}</td> + <td>{{domxref("Document")}} で <code>onpointerlockchange</code>、<code>onpointerlockerror</code> を追加。実験的に <code>GlobalEventHandlers</code> で実装されています。</td> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td>最新のスナップショットである {{SpecName("HTML5.1")}} から変更なし。</td> + </tr> + <tr> + <td>{{SpecName('HTML5.1', '#globaleventhandlers', 'GlobalEventHandlers')}}</td> + <td>{{Spec2('HTML5.1')}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。{{SpecName("HTML5 W3C")}} のスナップショットに <code>onsort</code> を追加。</td> + </tr> + <tr> + <td>{{SpecName("HTML5 W3C", "#globaleventhandlers", "GlobalEventHandlers")}}</td> + <td>{{Spec2('HTML5 W3C')}}</td> + <td>{{SpecName("HTML WHATWG")}} のスナップショット。<code>GlobalEventHandlers</code> を作成 (以前はプロパティが実装対象に存在していました)。</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element")}}</li> + <li>{{domxref("EventHandler")}}</li> + <li>{{domxref("Event")}}</li> +</ul> 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 +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>ウィンドウに中断イベントを送ったときのイベントハンドラです。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.onabort = <var>funcRef</var> +</pre> +<ul> + <li><var>funcRef</var> : 関数への参照</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">window.onabort = function() { + alert("Load aborted."); +}</pre> +<h2 id="Specification" name="Specification">仕様</h2> +<p>{{DOM0}} <span class="comment">これは実際には、このハンドラが発生したときの説明になっていない。</span></p> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{domxref("GlobalEventHandlers")}} ミックスインの <code><strong>onblur</strong></code> プロパティは、{{event("blur")}} イベントを処理する {{domxref("EventHandler")}} です。これは、{{domxref("Element")}}、{{domxref("Document")}}、{{domxref("Window")}} 上で利用できます。</p> + +<p><code>blur</code> イベントは要素がフォーカスを失ったときに生じます。</p> + +<div class="blockIndicator note"> +<p><strong>補足:</strong> <code>onblur</code> の反対が {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} です。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>target</em>.onblur = <em>functionRef</em>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>functionRef</code> は関数名または <a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a> です。この関数は、{{domxref("FocusEvent")}} オブジェクトとその 1 個の引数を受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、<code>onblur</code> および {{domxref("GlobalEventHandlers.onfocus", "onfocus")}} を使用して {{HtmlElement("input")}} 要素内のテキストを変更します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="ここをクリック"> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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'; +}</pre> + +<h3 id="Result_2" name="Result_2">実行結果</h3> + +<p>フォームフィールドの内側と外側をクリックしてみてください。それに応じてコンテンツが変化するか観察してください。</p> + +<p id="Result">{{EmbedLiveSample('Example')}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onblur','onblur')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onblur")}}</p> + +<p>IE とは対称的に、<code>blur</code> イベントを受け取るほとんどすべての要素では、Gecko ブラウザー上のほとんどすべての要素において、このイベントが動作しません。</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>{{event("blur")}} イベント</li> + <li>関連するイベントハンドラー: {{domxref("GlobalEventHandlers.onfocus")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><code><strong>oncancel</strong></code>プロパティは{{domxref("GlobalEventHandlers")}}のミックスイン(mixin)で、{{event("cancel")}}イベントを{{HTMLElement("dialog")}}要素に送るための{{domxref("EventHandler")}}です</p> + +<p><code>cancel</code>イベントはユーザーが<code><dialog></code>を閉じる意向を示した際に発火します。このイベントハンドラーはイベントをバブリングから防ぎます。つまり、いかなる親ハンドラーであってもイベントは通知されません。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em>target</em>.oncancel = <em>functionRef</em>; +</pre> + +<h3 id="引数">引数</h3> + +<p><code>functionRef</code>は関数名もしくは<a href="https://wiki.developer.mozilla.org/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は{{domxref("Event")}}オブジェクトを唯一の引数として受け取ります。</p> + +<p><code>oncancel</code>ハンドラーは一つのオブジェクトに対して一つのみ割り当てることが可能です。より柔軟であることから{{domxref("EventTarget.addEventListener()")}}メソッドを代わりに使用するのも良いかもしれません。</p> + +<h2 id="仕様書">仕様書</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-oncancel','oncancel')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.oncancel")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{event("cancel")}} イベント</li> + <li>HTML {{HTMLElement("dialog")}} 要素</li> + <li>関連するイベントハンドラー: {{domxref("GlobalEventHandlers.onclose")}}</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p><strong><code>oncanplay</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("canplay")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。</p> + +<p><code>canplay</code> イベントは、メディアを再生できるユーザーエージェントのとき、バッファリングのためにコンテンツを停止せずに、メディアを最後まで再生するのに十分なデータがロードされていないと推定されるときに発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em><var>element</var></em>.oncanplay = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.oncanplay; +</pre> + +<p><code>handlerFunction</code> は、<code>null</code> またはイベントハンドラーを指定する <a href="/ja/docs/Web/JavaScript/Reference/Functions">JavaScript 関数</a>のいずれかです。</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-oncanplay','oncanplay')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.oncanplay")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/Guide/Events/Event_handlers" title="/ja/docs/Web/Guide/DOM/Events/Event_handlers">DOM onevent ハンドラー</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p><strong><code>oncanplaythrough</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("canplaythrough")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。</p> + +<p><code>canplaythrough</code> イベントは、メディアを再生できるユーザーエージェントのとき、バッファリングのためにコンテンツを停止せずに、メディアを最後まで再生するのに十分なデータがロードされていると推定されるときに発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em><var>element</var></em>.oncanplaythrough = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.oncanplaythrough; +</pre> + +<p><code>handlerFunction</code> は、<code>null</code> またはイベントハンドラーを指定する <a href="/ja/docs/Web/JavaScript/Reference/Functions">JavaScript 関数</a>のいずれかです。</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-oncanplaythrough','oncanplaythrough')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.oncanplaythrough")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{event("canplaythrough")}}</li> + <li><a href="/ja/docs/Web/Guide/Events/Event_handlers" title="/ja/docs/Web/Guide/DOM/Events/Event_handlers">DOM onevent ハンドラー</a></li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{domxref("GlobalEventHandlers")}} ミックスインの <strong><code>onchange</code></strong> プロパティは、<code><a href="/ja/docs/Web/API/HTMLElement/change_event">change</a></code> イベントを処理する {{domxref("EventHandler")}} です。</p> + +<p><code>change</code> イベントはユーザーがフォームコントロールの値を変更した時に発生します。これは例えば、コントロールの外側をクリックしたり <kbd>Tab</kbd> キーで別のコントロールへ切り替えたりすることにより行われることがあります。</p> + +<div class="blockIndicator note"> +<p><strong>注記:</strong> {{domxref("GlobalEventHandlers.oninput", "oninput")}} と異なり、<code>onchange</code> イベントハンドラーは、各要素の <code>value</code> が変化するたびに呼び出される必要がありません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em><var>target</var></em>.onchange = <em>functionRef</em>; +</pre> + +<p><code>functionRef</code> は関数名または <a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a> です。この関数は、{{domxref("Event")}} オブジェクトとその 1 個の引数を受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、{{HtmlElement("input")}} 要素のコンテンツを変更してフォーカスを要素から外す度に、その文字数をログ出力します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" placeholder="Type something here, then click outside of the field." size="50"> +<p id="log"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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.`; +}</pre> + +<h3 id="Result" name="Result">実行結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onchange','onchange')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </thead> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onchange")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>{{event("change")}} イベント</li> +</ul> 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 +--- +<p>{{ ApiRef("HTML DOM") }}</p> + +<p><code><strong>onclick</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、所与の要素の {{domxref("Element/click_event", "click")}} イベントを処理するためのイベントハンドラー ({{domxref("EventHandler")}}) です。</p> + +<p><code>click</code> イベントは、ユーザーが要素をクリックしたときに発生します。 {{domxref("Element/mousedown_event", "mousedown")}} イベントと {{domxref("Element/mouseup_event", "mouseup")}} イベントの後に、この順番で発行されます。</p> + +<div class="note"><strong>注</strong>: <code>click</code> イベントを使用してアクションを起動するときは、マウスやタッチスクリーンを使用していないユーザーが同じアクションを使用できるように、 {{event("keydown")}} イベントにも同じアクションを追加することを検討してください。</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>target</var>.onclick = <var>functionRef</var>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code><var>functionRef</var></code> は、関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。 この関数は、{{domxref("MouseEvent")}} オブジェクトを唯一の引数として受け取ります。関数内では、 {{jsxref("Operators/this", "this")}} はイベントが発行された要素になります。</p> + +<p>一度に1つのオブジェクトに割り当てることができる <code>onclick</code> ハンドラは1つだけです。より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Detecting_clicks" name="Detecting_clicks">クリックの検出</h3> + +<p>この例では、要素の上でクリックが行われたときに要素の色を単純に変更します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush:html notranslate"><div id="demo">ここをクリック</div></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">document.getElementById('demo').onclick = function changeContent() { + + document.getElementById('demo').innerHTML = "Help me"; + document.getElementById('demo').style = "Color: red"; + +}</pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Detecting_clicks")}}</p> + +<h3 id="Getting_the_coordinates_of_clicks" name="Getting_the_coordinates_of_clicks">クリックの座標の取得</h3> + +<p>この例では、最も新しくマウスボタンのクリックが行われた場所の座標を表示します。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush:html notranslate"><p>この例のどこかをクリックしてください。</p> +<p id="log"></p></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js notranslate">let log = document.getElementById('log'); + +document.onclick = inputChange; + +function inputChange(e) { + log.textContent = `位置: (${e.clientX}, ${e.clientY})`; +}</pre> + +<h4 id="Result_2" name="Result_2">結果</h4> + +<p>{{EmbedLiveSample("Getting_the_coordinates_of_clicks")}}</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclick','onclick')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onclick")}}</p> +</div> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Element/click_event", "click")}} イベント</li> + <li>関連イベントハンドラー + <ul> + <li>{{domxref("GlobalEventHandlers.onauxclick")}}</li> + <li>{{domxref("GlobalEventHandlers.ondblclick")}}</li> + </ul> + </li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}} {{SeeCompatTable}}</div> + +<p><code><strong>onclose</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、ダイアログ要素に送信された {{event("close")}} イベントを処理するための {{domxref("EventHandler", "イベントハンドラー")}} です。</p> + +<p><code>close</code> イベントは、ユーザーが <code><dialog></code> を閉じたときに発生します。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> ウィンドウのクローズを処理するには、{{domxref("WindowEventHandlers.onbeforeunload", "onbeforeunload")}} または {{domxref("WindowEventHandlers.onunload", "onunload")}} を使用します。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em>target</em>.onclose = <em>functionRef</em>; +</pre> + +<h3 id="値">値</h3> + +<p><code>functionRef</code> は、関数名または<a href="/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。</p> + +<p>一度に1つのオブジェクトに割り当てることができる <code>onclose</code> ハンドラーは1つだけです。代わりに、より柔軟性のある {{domxref("EventTarget.addEventListener()")}} メソッドを使用することをお勧めします。</p> + +<h2 id="仕様">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onclose','onclose')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onclose")}}</p> +</div> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{event("close")}} event</li> + <li>HTML {{HTMLElement("dialog")}} element</li> + <li>Related event handler: {{domxref("GlobalEventHandlers.oncancel")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{event("drag")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate">var <var>dragHandler</var> = <var>targetElement</var>.ondrag; +</pre> + +<h3 id="戻り値">戻り値</h3> + +<dl> + <dt><code>dragHandler</code></dt> + <dd>要素 <code>targetElement</code> の <em>drag</em> イベントハンドラ。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>この例では、<em>ondrag</em> 属性ハンドラを使用して要素の <em>drag</em> イベントハンドラを設定しています。</p> + +<pre class="brush: js notranslate"><!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> +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrag", "ondrag")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondrag", "ondrag")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ondrag")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li>{{event("drag")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{event("dragend")}} イベント用の{{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate">var <var>dragendHandler</var> = <var>targetElement</var>.ondragend; +</pre> + +<h3 id="戻り値">戻り値</h3> + +<dl> + <dt><code>dragendHandler</code></dt> + <dd>要素 <code>targetElement</code> の <em>dragend</em> イベントハンドラ。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>この例では、{{domxref("GlobalEventHandlers", "ondragend")}} 属性ハンドラを使用して、要素の {{event("dragend")}} イベントハンドラを設定する2つの方法を示しています。</p> + +<pre class="brush: js notranslate"><!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> +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragend", "ondragend")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragend", "ondragend")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ondragend")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li>{{event("dragend")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{event("dragenter")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate">var <var>dragenterHandler</var> = <var>targetElement</var>.ondragenter; +</pre> + +<h3 id="戻り値">戻り値</h3> + +<dl> + <dt><code>dragenterHandler</code></dt> + <dd><code>targetElement</code> 要素の <em>dragenter</em> イベントハンドラ。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>この例では、{{domxref("GlobalEventHandlers.ondragenter", "ondragenter")}} 属性ハンドラを使用して、要素の {{event("dragenter")}} イベントハンドラを設定する方法を示します。</p> + +<pre class="brush: js notranslate"><!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> +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragenter", "ondragenter")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragenter", "ondragenter")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ondragenter")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li>{{event("dragenter")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{event("dragleave")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate">var <var>dragleaveHandler</var> = <var>targetElement</var>.ondragleave; +</pre> + +<h3 id="戻り値">戻り値</h3> + +<dl> + <dt><code>dragleaveHandler</code></dt> + <dd>要素 <code>targetElement</code> の <em>dragleave</em> イベントハンドラ。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>この例では、{{domxref("GlobalEventHandlers.ondragleave", "ondragleave")}} 属性ハンドラを使用して、要素の {{event("dragleave")}} イベントハンドラを設定することを示しています。</p> + +<pre class="brush: js notranslate"><!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> + +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragleave", "ondragleave")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragleave", "ondragleave")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ondragleave")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li>{{event("dragleave")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{event("dragover")}} イベント用の {{domxref("GlobalEventHandlers", "GlobalEventHandlers")}}。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate">var <var>dragoverHandler</var> = <var>targetElement</var>.ondragover; +</pre> + +<h3 id="戻り値">戻り値</h3> + +<dl> + <dt><code>dragoverHandler</code></dt> + <dd><code>targetElement</code> 要素の <code>dragover</code> イベントハンドラ。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>この例では、{{domxref("GlobalEventHandlers.ondragover", "ondragover")}} 属性ハンドラを使用して、要素の {{event("dragover")}} イベントハンドラを設定することを示します。</p> + +<pre class="brush: js notranslate"><!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> +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragover", "ondragover")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragover", "ondragover")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ondragover")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li>{{event("dragover")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{event("dragstart")}} イベントの {{domxref("GlobalEventHandlers","global event handler")}} 。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate">var <var>dragstartHandler</var> = <var>targetElement</var>.ondragstart; +</pre> + +<h3 id="返り値">返り値</h3> + +<dl> + <dt><code>dragstartHandler</code></dt> + <dd>要素 <code>targetElement</code> の <em>dragstart</em> イベントハンドラ。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>この例では、 {{domxref("GlobalEventHandlers.ondragstart","ondragstart")}} 属性ハンドラを使用して、要素 {{event("dragstart")}} イベントハンドラを設定する方法を示します。</p> + +<pre class="brush: js notranslate"><!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> +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">ステータス</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondragstart", "ondragstart")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondragstart", "ondragstart")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザーの互換性">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.ondragstart")}}</p> + +<h2 id="関連項目">関連項目</h2> + +<ul> + <li>{{event("dragstart")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{event("drop")}} イベント用の {{domxref("GlobalEventHandlers", "グローバルイベントハンドラ")}}。</p> + +<h2 id="シンタックス">シンタックス</h2> + +<pre class="syntaxbox notranslate">var <var>dropHandler</var> = <var>targetElement</var>.ondrop; +</pre> + +<h3 id="戻り値">戻り値</h3> + +<dl> + <dt><code>dropHandler</code></dt> + <dd><code>targetElement</code> 要素の <em>drop</em> イベントハンドラ。</dd> +</dl> + +<h2 id="例">例</h2> + +<p>この例では、{{domxref("GlobalEventHandlers.ondrop", "ondrop")}} 属性を使用して、要素の {{event("drop")}} イベント・ハンドラを定義することを示しています。</p> + +<pre class="brush: js notranslate"><!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> +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">ステータス</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName("HTML WHATWG", "indices.html#ix-handler-ondrop", "ondrop")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("HTML5.1", "index.html#ix-handler-ondrop", "ondrop")}}</td> + <td>{{Spec2("HTML5.1")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div class="hidden">このページの互換性一覧表は、構造化データから生成されています。データに貢献したい方は、https://github.com/mdn/browser-compat-data をチェックしてプルリクエストを送ってください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ondrop")}}</p> + +<h2 id="あわせて参照">あわせて参照</h2> + +<ul> + <li>{{event("drop")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{domxref("GlobalEventHandlers")}} ミックスインの <code><strong>onfocus</strong></code> プロパティは、与えられた要素上の <code><a href="/ja/docs/Web/API/Element/focus_event">focus</a></code> イベントを処理する {{domxref("EventHandler")}} です。</p> + +<p><code>focus</code> イベントは、ユーザーがある要素にフォーカスを設定した時に生じます。</p> + +<p>非 input 要素上で <code>onfocus</code> を発生させるには、{{htmlattrxref("tabindex")}} 属性が与えられていなければなりません (詳細は <a href="/ja/docs/Learn/Accessibility/HTML#Building_keyboard_accessibility_back_in">Building keyboard accessibility back in</a> を参照)。</p> + +<div class="blockIndicator note"> +<p><strong>補足:</strong> <code>onfocus</code> の反対が {{domxref("GlobalEventHandlers.onblur", "onblur")}} です。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>target</em>.onfocus = <em>functionRef</em>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>functionRef</code> は関数名または <a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a> です。この関数は、{{domxref("FocusEvent")}} オブジェクトとその 1 個の引数を受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、{{domxref("GlobalEventHandlers.onblur", "onblur")}} および <code>onfocus</code> を使用して {{HtmlElement("input")}} 要素内のテキストを変更します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" value="ここをクリック"> +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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'; +}</pre> + +<h3 id="Result_2" name="Result_2">実行結果</h3> + +<p>フォームフィールドの内側と外側をクリックしてみてください。それに応じてコンテンツが変化するか観察してください。</p> + +<p id="Result">{{EmbedLiveSample('Example')}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onfocus','onfocus')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + +</thead></table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onfocus")}}</p> + +<p>IE とは対称的に、<code>focus</code> イベントを受け取るほとんどすべての要素では、Gecko ブラウザー上のほとんどすべての要素において、このイベントが動作しません。</p> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>{{event("focus")}} イベント</li> + <li>関連するイベントハンドラー: {{domxref("GlobalEventHandlers.onblur")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><code><strong>onformdata</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、フォームのデータを表す項目リストが構築された後に発行される {{event("formdata")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。これはフォームが送信されたときに発生しますが、 {{domxref("FormData.FormData", "FormData()")}} コンストラクターを呼び出しても発行することができます。 <code>onformdata</code> は {{domxref("HTMLFormElement")}} で利用できます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>target</var>.onclick = <var>functionRef</var>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code><var>functionRef</var></code> は関数名または <a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は唯一の引数として {{domxref("FormDataEvent")}} オブジェクトを受け取ります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<pre class="brush: js notranslate">// 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); +};</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onformdata','onformdata')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onformdata")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLFormElement/formdata_event", "formdata")}} イベント</li> + <li>{{domxref("FormDataEvent")}}</li> + <li><a href="/ja/docs/Web/API/FormData/Using_FormData_Objects">FormData オブジェクトの使用</a></li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><strong><code>ongotpointercapture</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("gotpointercapture")}} イベントを処理する {{domxref("EventHandler")}} です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>target</var>.ongotpointercapture = <var>functionRef</var>;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code><var>functionRef</var></code> は、関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。 関数は {{domxref("PointerEvent")}} オブジェクトを唯一の引数として受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js notranslate">function overHandler(event) { + // ターゲットイベントの gotpointercapture ハンドラを決定します + let gotCaptureHandler = event.target.ongotpointercapture; +} + +function init() { + let el = document.getElementById('target'); + el.ongotpointercapture = overHandler; +}</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 2', '#the-gotpointercapture-event', 'ongotpointercapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ongotpointercapture")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/API/Document/gotpointercapture_event">Document: gotpointercapture</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/gotpointercapture_event">HTMLElement: gotpointercapture</a></code> イベント</li> + <li>{{domxref("Element.setPointerCapture()")}}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{domxref("GlobalEventHandlers")}} ミックスインの <strong><code>oninput</code></strong> プロパティは、{{HTMLElement("input")}}、{{HTMLElement("select")}}、{{HTMLElement("textarea")}} の各要素上の {{event("input")}} イベントを処理する {{domxref("EventHandler")}} です。これは、{{domxref("HTMLElement.contentEditable", "contenteditable")}} または {{domxref("Document.designMode", "designMode")}} が有効になっている要素上のイベントも扱います。</p> + +<div class="blockIndicator note"> +<p><strong>注記:</strong> <code>oninput</code> と異なり、{{domxref("GlobalEventHandlers.onchange", "onchange")}} イベントハンドラーは、各要素の <code>value</code> が変化するたびに呼び出される必要がありません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>target</em>.oninput = <em>functionRef</em>;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>functionRef</code> は関数名または <a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a> です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、{{HtmlElement("input")}} 要素のコンテンツを変更する度に、その文字数をログ出力します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input type="text" placeholder="ここに何か入力すると、その長さが分かります。" size="50"> +<p id="log"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">let input = document.querySelector('input'); +let log = document.getElementById('log'); + +input.oninput = handleInput; + +function handleInput(e) { + log.textContent = `フィールドの value は + ${e.target.value.length} 文字の長さです。`; +}</pre> + +<h3 id="Result" name="Result">実行結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName("HTML WHATWG", "#ix-handler-oninput", "oninput")}}</td> + <td>{{Spec2("HTML WHATWG")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.oninput")}}</p> + +<p>以下のリンクは、互換性の問題と修正についての議論です。古いブラウザーで動作させる場合に役立つでしょう:</p> + +<ul> + <li><a class="external" href="http://blog.danielfriesen.name/2010/02/16/html5-browser-maze-oninput-support/">A HTML5 Browser maze, oninput support</a></li> + <li><a class="external" href="http://www.useragentman.com/blog/2011/05/12/fixing-oninput-in-ie9-using-html5widgets/">Fixing oninput in IE Using html5Widgets</a> includes polyfill for IE6-8</li> + <li>Mathias Bynens suggests <a class="external" href="http://mathiasbynens.be/notes/oninput">binding to both input and keydown</a></li> + <li><a class="external" href="http://help.dottoro.com/ljhxklln.php">oninput event | dottoro</a> has notes about bugginess in IE9</li> + <li><a href="https://bugzilla.mozilla.org/show_bug.cgi?id=312094">Bug 312094 - Add support for <select oninput></a></li> +</ul> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>{{event("input")}} イベント</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p><strong><code>oninvalid</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("invalid")}} イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。</p> + +<p><code>invalid</code> イベントは、送信可能な要素が検証され、条件を満たしていない場合に発生します。送信可能な要素の有効性は、フォームを送信する前、またはフォームの <code><a href="/ja/docs/Learn/HTML/Forms/Form_validation">checkValidity()</a></code> メソッドが呼び出された後に検証されます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>target</em>.oninvalid = <em>functionRef</em>; +var <em>functionRef</em> = <em>target</em>.oninvalid; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>functionRef</code> は、関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、{{domxref("Event")}} オブジェクトを唯一の引数として受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、フォーム上の <code>oninvalid</code> と {{domxref("GlobalEventHandlers.onsubmit", "onsubmit")}} イベントハンドラーを示しています。</p> + +<h3 id="HTML" name="HTML">HTML</h3> + +<pre class="brush: html notranslate"><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></pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">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(); +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-oninvalid','oninvalid')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.oninvalid")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{event("invalid")}} event</li> + <li><a href="/ja/docs/Web/Guide/Events/Event_handlers" title="/ja/docs/Web/Guide/DOM/Events/Event_handlers">DOM onevent ハンドラー</a></li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><code><strong>onkeydown</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで {{event("keydown")}} イベントを処理する {{domxref("EventHandler")}} です。</p> + +<p><code>keydown</code> イベントは、ユーザーがキーボードのキーを押下した時に発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>target</var>.onkeydown = <var>functionRef</var>;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>functionRef</code> は関数名または <a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a> です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、{{HtmlElement("input")}} 要素内でキーを押下するたびに、そのキーの {{domxref("KeyboardEvent.code")}} 値をログ出力します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><input> +<p id="log"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">const input = document.querySelector('input'); +const log = document.getElementById('log'); + +input.onkeydown = logKey; + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeydown','onkeydown')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onkeydown")}}</p> + +<h3 id="Compatibility_notes" name="Compatibility_notes">互換性ノート</h3> + +<p>Firefox 65 以降、<code><a href="/ja/docs/Web/Events/keyup">keyup</a></code> および <code><a href="/ja/docs/Web/Events/keydown">keydown</a></code> イベントは、CJKT (中国、日本、韓国、台湾) ユーザーのブラウザー間の互換性を改善するために、IME 変換中に発生するようになりました (詳細は {{bug(354358)}} および <a href="https://www.fxsitecompat.dev/ja/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/">IME 変換中にも keydown、keyup イベントが発生するようになりました</a> を参照)。変換対象の一部に対してすべての <code>keydown</code> イベントを無視するには、次のようにしてください (229 は IME により処理されるイベントに関する <code>keyCode</code> の特別な値セットです):</p> + +<pre class="brush: js notranslate">eventTarget.addEventListener("keydown", event => { + if (event.isComposing || event.keyCode === 229) { + return; + } + // do something +}); +</pre> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{Event("keydown")}} イベント</li> + <li>関連するイベントハンドラー + <ul> + <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li> + <li>{{domxref("GlobalEventHandlers.onkeyup")}}</li> + </ul> + </li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}} {{deprecated_header}}</div> + +<p>{{domxref("GlobalEventHandlers")}} ミックスインの <code><strong>onkeypress</strong></code> プロパティは、{{event("onkeypress")}} イベントを処理する {{domxref("EventHandler")}} です。</p> + +<p><code>keypress</code> イベントはユーザーがキーボード上のキーを押下した時に発生<em>すべき</em>ですが、実際のブラウザーでは特定のキーについて <code>keypress</code> イベントを発生させません。</p> + +<div class="blockIndicator warning"> +<p><code>onkeypress</code> イベントハンドラーは非推奨です。代わりに {{domxref("GlobalEventHandlers.onkeydown", "onkeydown")}} を使用してください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>target</em>.onkeypress = <var>functionRef</var>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>functionRef</code> は関数名または <a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a> です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="Basic_example" name="Basic_example">基本的な例</h3> + +<p>この例は、{{HtmlElement("input")}} 要素内でキーを押すたびに、そのキーの {{domxref("KeyboardEvent.code")}} 値をログ出力します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html"><input> +<p id="log"></p></pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js">const input = document.querySelector('input'); +const log = document.getElementById('log'); + +input.onkeypress = logKey; + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<h4 id="Result" name="Result">実行結果</h4> + +<p>{{EmbedLiveSample("Basic_example", 700, 200)}}</p> + +<h3 id="Filter_keys_with_a_regular_expression" name="Filter_keys_with_a_regular_expression">正規表現でキーを絞り込む</h3> + +<p>この例は、フォームフィールドに入力された文字を <a href="/ja/docs/Web/JavaScript/Guide/Regular_Expressions">正規表現</a> を利用して絞り込みます。</p> + +<h4 id="HTML_2">HTML</h4> + +<pre class="brush: html"><label>Enter numbers only: + <input> +</label></pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<pre class="brush: js">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;</pre> + +<h4 id="Result_2" name="Result_2">実行結果</h4> + +<p>{{EmbedLiveSample("Filter_keys_with_a_regular_expression")}}</p> + +<h3 id="Capture_the_typing_of_a_hidden_word" name="Capture_the_typing_of_a_hidden_word">合言葉の入力を捕捉する</h3> + +<p>次の JavaScript 関数は、ユーザーがページ上のどこかに "exit" と入力した後に何かをします。</p> + +<pre class="brush: js">/* 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; + }; +})();</pre> + +<div class="blockIndicator note"> +<p><strong>注記:</strong> 合言葉の入力を捕捉する完全なフレームワークは、<a href="https://github.com/madmurphy/spell.js/">GitHub</a> 上にあります。</p> +</div> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeypress','onkeypress')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onkeypress")}}</p> + +<h3 id="Browser_compatibility_notes" name="Browser_compatibility_notes">ブラウザー互換性ノート</h3> + +<ul> + <li><code>keypress</code> イベントは <a href="/ja/docs/Web/API/KeyboardEvent/keyCode#Non-printable_keys_(function_keys)">non-printable keys</a> に対して発生しなくなりました (この Firefox 65 での実装について {{bug(968056)}} を参照)。ただし、<kbd>Enter</kbd> キーおよび <kbd>Shift</kbd> + <kbd>Enter</kbd>、<kbd>Ctrl</kbd> + <kbd>Enter</kbd> キーの組み合わせを除きます (ブラウザー間の互換性を維持するため)。</li> +</ul> +</div> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>{{Event("keypress")}} イベント</li> + <li>関連するイベントハンドラー + <ul> + <li>{{domxref("GlobalEventHandlers.onkeydown")}}</li> + <li>{{domxref("GlobalEventHandlers.onkeyup")}}</li> + </ul> + </li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p>{{domxref("GlobalEventHandlers")}} ミックスインの <code><strong>onkeyup</strong></code> プロパティは、{{event("onkeyup")}} イベントを処理する {{domxref("EventHandler")}} です。</p> + +<p><code>keyup</code> イベントは、ユーザーが押していたキーを離した時に発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>target</em>.onkeyup = <em>functionRef</em>;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>functionRef</code> は関数名または <a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a> です。この関数は、{{domxref("KeyboardEvent")}} オブジェクトとその 1 個の引数を受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、{{HtmlElement("input")}} 要素内でキーを離すたびに、そのキーの {{domxref("KeyboardEvent.code")}} 値をログ出力します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><input> +<p id="log"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">const input = document.querySelector('input'); +const log = document.getElementById('log'); + +input.onkeyup = logKey; + +function logKey(e) { + log.textContent += ` ${e.code}`; +}</pre> + +<h3 id="Result" name="Result">実行結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onkeyup','onkeyup')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onkeyup")}}</p> + +<h3 id="Compatibility_notes" name="Compatibility_notes">互換性ノート</h3> + +<p>Firefox 65 以降、<code><a href="/ja/docs/Web/Events/keyup">keyup</a></code> および <code><a href="/ja/docs/Web/Events/keydown">keydown</a></code> イベントは、CJKT (中国、日本、韓国、台湾) ユーザーのブラウザー間の互換性を改善するために、IME 変換中に発生するようになりました (詳細は {{bug(354358)}} および <a href="https://www.fxsitecompat.dev/ja/docs/2018/keydown-and-keyup-events-are-now-fired-during-ime-composition/">IME 変換中にも keydown、keyup イベントが発生するようになりました</a> を参照)。変換対象の一部に対してすべての <code>keydown</code> イベントを無視するには、次のようにしてください (229 は IME により処理されるイベントに関する <code>keyCode</code> の特別な値セットです):</p> + +<pre class="brush: js"><code>eventTarget.addEventListener("keyup", event => { + if (event.isComposing || event.keyCode === 229) { + return; + } + // do something +});</code></pre> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li>{{Event("keyup")}} イベント</li> + <li>関連するイベントハンドラー + <ul> + <li>{{domxref("GlobalEventHandlers.onkeydown")}}</li> + <li>{{domxref("GlobalEventHandlers.onkeypress")}}</li> + </ul> + </li> +</ul> 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 +--- +<div> + {{ApiRef}}</div> +<h2 id="Summary" name="Summary">概要</h2> +<p>{{domxref("window")}} の <code>load</code> イベントに対応するイベントハンドラです。</p> +<h2 id="Syntax" name="Syntax">構文</h2> +<pre class="syntaxbox">window.onload = <var>funcRef</var>; +</pre> +<ul> + <li><var>funcRef</var> : <code>load</code> イベント発生時に呼び出す関数への参照または関数式</li> +</ul> +<h2 id="Example" name="Example">例</h2> +<pre class="brush:js">window.onload = function() { + doSomething(); // DOM 構築後に実行したい関数の呼び出し +}; +</pre> +<pre class="brush:html"><!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> +</pre> +<h2 id="Notes" name="Notes">注記</h2> +<p><code>load</code> イベントは文書のローディング工程の終了時に発生します。このイベントが発生した時点で、文書中の全てのオブジェクトは DOM 内にあり、全ての画像とサブフレームのロードは完了しています。</p> +<p><code>DOMContentLoaded</code> や <code>DOMFrameContentLoaded</code> のような Gecko で定められた <a href="/ja/docs/Web/Reference/Events">DOM イベント</a> (※{{domxref("element.addEventListener()")}} でハンドリング可能) もありますが、これらは他のリソースのロード完了を待たずに発生するものです。つまり、 <code>window.onload</code> より先に発生します。</p> +<h2 id="Specification" name="Specification">仕様</h2> +<ul> + <li><a href="http://www.whatwg.org/html/#handler-window-onload">http://www.whatwg.org/html/#handler-window-onload</a></li> +</ul> +<h2 id="See_also" name="See_also">関連情報</h2> +<ul> + <li><a href="/ja/docs/Listening_to_events_in_Firefox_extensions">Firefox 拡張機能内でのイベントのリスニング</a></li> +</ul> 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 +--- +<div>{{ApiRef}}</div> + +<p><strong><code>onloadend</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{domxref("XMLHttpRequest/loadend_event", "loadend")}} イベントが発行されたとき (リソースの読み取り中に進捗が停止したとき) に呼び出されるコードを表すイベントハンドラー ({{domxref("EventHandler")}}) です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>img</var>.onloadend = <var>funcRef</var>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code><var>funcRef</var></code> はリソースの <code>loadend</code> イベントが発行されたときに呼び出されるハンドラー関数です。</p> + +<h2 id="Examples" name="Examples">例</h2> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><img src="myImage.jpg"></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">// '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'); +});</pre> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div> +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onloadend")}}</p> +</div> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><span class="seoSummary">{{domxref("GlobalEventHandlers")}} ミックスインの <strong><code>onlostpointercapture</code></strong> プロパティは、{{event("lostpointercapture")}} イベントを処理する {{domxref("EventHandler")}} です。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>target</em>.onlostpointercapture = <em>functionRef</em>;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>functionRef</code> は、関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。 関数は {{domxref("PointerEvent")}} オブジェクトを唯一の引数として受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">function overHandler(event) { + // ターゲットイベントの lostpointercapture ハンドラを決定します + let lostCaptureHandler = event.target.onlostpointercapture; +} + +function init() { + let el = document.getElementById('target'); + el.onlostpointercapture = overHandler; +} +</pre> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th scope="col">仕様</th> + <th scope="col">状態</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('Pointer Events 2', '#the-lostpointercapture-event', 'onlostpointercapture')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onlostpointercapture")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/API/Document/lostpointercapture_event">Document: lostpointercapture</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/lostpointercapture_event">HTMLElement: lostpointercapture</a></code> イベント</li> + <li>{{domxref("Element.releasePointerCapture()")}}</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p><strong><code>onmousedown</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mousedown")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。</p> + +<p><code>mousedown</code> イベントは、ユーザーがマウスボタンを押したときに発生します。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> <code>onmousedown</code> の反対の動作は {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}} です。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em>target</em>.onmousedown = <em>functionRef</em>; +</pre> + +<h3 id="値">値</h3> + +<p><code>functionRef</code> は、関数名または<a href="/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。</p> + +<h2 id="例">例</h2> + +<p>この例は、マウスボタンを押したままにすると画像の一部を表示します。<code>onmousedown</code>, {{domxref("GlobalEventHandlers.onmouseup", "onmouseup")}}, {{domxref("GlobalEventHandlers.onmousemove", "onmousemove")}} イベントハンドラーを使用します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="container"> + <div class="view" hidden></div> + <img src="https://interactive-examples.mdn.mozilla.net/media/examples/gecko-320-213.jpg"> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.container { + width: 320px; + height: 213px; + background: black; +} + +.view { + position: absolute; + width: 100px; + height: 100px; + background: white; + border-radius: 50%; +} + +img { + mix-blend-mode: darken; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">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;</pre> + +<h3 id="結果">結果</h3> + +<p>{{EmbedLiveSample("Example", 700, 300)}}</p> + +<h2 id="仕様">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmousedown','onmousedown')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onmousedown")}}</p> +</div> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{event("mousedown")}} event</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p><strong><code>onmouseenter</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseenter")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。</p> + +<p><code>mouseenter</code> イベントは、ポインティングデバイス（通常はマウス）がリスナーが接続されている要素上に移動したときに発生します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em><var>element</var></em>.onmouseenter = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.onmouseenter; +</pre> + +<p><code>handlerFunction</code> は、イベントのハンドラを指定する <code>null</code> または <a href="/docs/Web/JavaScript/Reference/Functions">JavaScript 関数</a> です。</p> + +<h2 id="仕様">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onmouseenter','onmouseenter')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onmouseenter")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{event("mouseenter")}}</li> + <li><a href="/docs/Web/Guide/Events/Event_handlers">DOM onevent ハンドラー</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p><strong><code>onmouseleave</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseleave")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。</p> + +<p><code>mouseleave</code> イベントは、ポインティングデバイス（通常はマウス）がリスナーが接続されている要素から外れたときに発生します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em><var>element</var></em>.onmouseleave = <em>handlerFunction</em>; +var <em>handlerFunction</em> = <em><var>element</var></em>.onmouseleave; +</pre> + +<p><code>handlerFunction</code> は、イベントのハンドラを指定する <code>null</code> または <a href="/docs/Web/JavaScript/Reference/Functions">JavaScript 関数 </a> です。</p> + +<h2 id="仕様">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onmouseleave','onmouseleave')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + + + +<p>{{Compat("api.GlobalEventHandlers.onmouseleave")}}</p> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{event("mouseleave")}}</li> + <li><a href="/docs/Web/Guide/Events/Event_handlers">DOM onevent ハンドラー</a></li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><code><strong>onmousemove</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mousemove")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。</p> + +<p>ユーザーがマウスを移動すると、<code>mousemove</code> イベントが発生します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em>target</em>.onmousemove = <em>functionRef</em>; +</pre> + +<h3 id="値">値</h3> + +<p><code>functionRef</code> は、関数名または<a href="/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。 この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。</p> + +<h2 id="例">例</h2> + +<h3 id="ツールチップ">ツールチップ</h3> + +<p>この例では、マウスに追従するリンクのツールチップを作成します。これは、<code>onmousemove</code>, {{domxref("GlobalEventHandlers.onmouseover", "onmouseover")}}, {{domxref("GlobalEventHandlers.onmouseout", "onmouseout")}} イベントハンドラーを使用します。</p> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><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></pre> + +<h4 id="CSS">CSS</h4> + +<pre class="brush: css notranslate">.tooltip { + position: absolute; + z-index: 9999; + padding: 6px; + background: #ffd; + border: 1px #886 solid; + border-radius: 5px; +}</pre> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">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; +});</pre> + +<h4 id="結果">結果</h4> + +<p>{{EmbedLiveSample("Tooltips")}}</p> + +<h3 id="ドラッグ可能な要素">ドラッグ可能な要素</h3> + +<p>また、ドラッグ可能なオブジェクトで <code>onmousemove</code> イベントハンドラーを使用する例も用意しています。<a href="https://mdn.mozillademos.org/files/5031/draggable_elements.html">実際の例をご覧ください</a>。</p> + +<h2 id="仕様">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmousemove','onmousemove')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onmousemove")}}</p> +</div> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{event("mousemove")}} event</li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p><code><strong>onmouseout</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseout")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。</p> + +<p><code>mouseout</code> イベントは、マウスが要素から離れると発生します。例えば、ウェブページ内の画像からマウスが離れると、その画像要素に対して <code>mouseout</code> イベントが発生します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em>element</em>.onmouseout = <em>function</em>; +</pre> + +<h2 class="editable" id="例">例</h2> + +<p>この例は、<code>onmouseout</code> と <code>onmouseover</code> イベントを段落に追加しています。マウスを要素の上や外に移動してみてください。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Test your mouse on me!</p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">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'; +}</pre> + +<h3 id="結果">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="仕様">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseout','onmouseout')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onmouseout")}}</p> +</div> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><code><strong>onmouseover</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseover")}} イベントを処理す{{domxref("EventHandler" ,"イベントハンドラー")}}です。</p> + +<p><code>mouseover</code> イベントは、ユーザーが特定の要素の上にマウスを移動させたときに発生します。</p> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em>element</em>.onmouseover = <em>function</em>; +</pre> + +<h2 class="editable" id="例">例</h2> + +<p>この例は、<code>onmouseover</code> と <code>onmouseout</code> イベントを段落に追加しています。マウスを要素の上や外に移動してみてください。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>Test your mouse on me!</p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">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'; +}</pre> + +<h3 id="結果">結果</h3> + +<p>{{EmbedLiveSample("Example")}}</p> + +<h2 id="仕様">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseover','onmouseover')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onmouseover")}}</p> +</div> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><code><strong>onmouseup</strong></code> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("mouseup")}} イベントを処理する{{domxref("EventHandler" ,"イベントハンドラー")}}です。</p> + +<p><code>mouseup</code> イベントは、ユーザーがマウスボタンを離したときに発生します。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> <code>onmouseup</code> の反対の動作は {{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} です。</p> +</div> + +<h2 id="構文">構文</h2> + +<pre class="syntaxbox notranslate"><em>target</em>.onmouseup = <var>functionRef</var>;</pre> + +<h3 id="値">値</h3> + +<p><code>functionRef</code> は、関数名または<a href="/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は、唯一の引数として {{domxref("MouseEvent")}} オブジェクトを受け取ります。</p> + +<h2 id="例">例</h2> + +<p>この例は、マウスでクリックするとトーストが非表示になり、離すと再び表示されます。{{domxref("GlobalEventHandlers.onmousedown", "onmousedown")}} と <code>onmouseup</code> イベントハンドラーを使用します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><div class="container"> + <div class="toaster"></div> + <div class="toast">Hello world!</div> +</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">.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%); +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">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;</pre> + +<h3 id="結果">結果</h3> + +<p>{{EmbedLiveSample("Example", 700, 200)}}</p> + +<h2 id="仕様">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onmouseup','onmouseup')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザの互換性">ブラウザの互換性</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onmouseup")}}</p> +</div> + +<h2 id="関連情報">関連情報</h2> + +<ul> + <li>{{event("mouseup")}} event</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><strong><code>onplaying</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{domxref("EventHandler")}} のうち {{event("playing")}} イベントを処理するためのものです。</p> + +<p><code>playing</code> イベントは、メディアデータが不足して一時停止または遅延した後、再生が開始できる状態になったときに発生します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>element</var>.onplaying = <var>handlerFunction</var>; +var <var>handlerFunction</var> = <var>element</var>.onplaying; +</pre> + +<p><code>handlerFunction</code> は <code>null</code> またはイベントのハンドラーを指定する <a href="/ja/docs/Web/JavaScript/Reference/Functions">JavaScript 関数</a>です。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onplaying','onplaying')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onplaying")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("HTMLMediaElement/playing_event", "playing")}}</li> + <li><a href="/ja/docs/Web/Guide/Events/Event_handlers">DOM イベントハンドラー</a></li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><span class="seoSummary"><strong><code>onpointercancel</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("pointercancel")}} イベントを処理する {{domxref("EventHandler")}} です。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>targetElement</var>.onpointercancel = <var>cancelHandler</var>; + +var <var>cancelHandler</var> = <var>targetElement</var>.onpointercancel; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<dl> + <dt><code>cancelHandler</code></dt> + <dd>要素 <code>targetElement</code> の <code>pointercancel</code> イベントハンドラ。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>onpointercancel</code> を使用して要素の <code>pointercancel</code> イベントを処理する2つの方法を示します。</p> + +<pre class="brush: js notranslate"><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> +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointercancel', 'onpointercancel')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointercancel', 'onpointercancel')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onpointercancel")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/API/Document/pointercancel_event">Document: pointercancel</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/pointercancel_event">HTMLElement: pointercancel</a></code> イベント</li> + <li>{{domxref("Element.setPointerCapture()")}}</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><strong><code>ontransitioncancel</code></strong> は {{domxref("GlobalEventHandlers")}} のイベントハンドラーで、ポインティングデバイスが最初に押されたときに発生する {{event("pointerdown")}} イベントのイベントハンドラーを指定するために使用します。このイベントは {{domxref("Window")}}, {{domxref("Document")}}, {{domxref("Element")}} の各オブジェクトに送信されることがあります。</p> + +<p>これは、マウスまたはマウスと互換性のあるデバイスでユーザーが操作したために生成された場合の {{event("mousedown")}} イベントと機能的に同等です。 <code>pointerdown</code> イベントが {{domxref("Event.preventDefault", "preventDefault()")}} の呼び出しによってキャンセルされなかった場合、ほとんどのユーザーエージェントは <code>mousedown</code> イベントを発生させるので、ポインターイベントを使用していないサイトでも機能します。</p> + +<p>{{domxref("EventTarget.addEventListener", "addEventListener()")}} を使用して、 <code>pointerdown</code> イベントのリスナーを追加することもできます。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>target</var>.onpointerdown = <var>downHandler</var>; + +var <var>downHandler</var> = <var>target</var>.onpointerdown; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>関数 ({{jsxref("Function")}}) で、 <code>pointerdown</code> イベントが<code><var>target</var></code> で指定された {{domxref("Element")}}, {{domxref("Document")}}, {{domxref("Window")}} に送られた場合に処理するためのものです。これは入力として <code>pointerdown</code> イベントを記述する {{domxref("PointerEvent")}} を受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>onpointerdown</code> を使用して <code>pointerdown</code> イベントを監視し、それに基づいて行動する方法を示します。 もちろん、<code>addEventListener()</code> を使うこともできます。</p> + +<h4 id="JavaScript">JavaScript</h4> + +<p>まず、<code>pointerdown</code> イベントを処理する JavaScript コードを見てみましょう。</p> + +<pre class="brush: js notranslate">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(); +}</pre> + +<p>これは単に <code>pointerdown</code> イベントのイベントハンドラとして関数 <code>handleDown()</code> を確立するために <code>onpointerdown</code> を使います。</p> + +<p><code>handleDown()</code> 関数は、今度は {{domxref("PointerEvent.pointerType", "pointerType")}} の値を調べて使用されているポインティングデバイスの種類を判断し、その情報を使用して文字列をカスタマイズしてターゲットボックスの内容を置き換えます。</p> + +<p>それから、イベントの {{domxref("Event.preventDefault", "preventDefault()")}} メソッドを呼び出して、<code>mousedown</code> イベントがトリガーされないようにします。 そうしないで、ポインターイベントのサポートが欠けている場合に備えて、それらのイベント用のハンドラを持っていると、イベントが2回処理される可能性があります。</p> + +<p>{{event("pointerup")}} イベント用のハンドラーもあります。</p> + +<pre class="brush: js notranslate">targetBox.onpointerup = handleUp; + +function handleUp(evt) { + targetBox.innerHTML = "Tap me, click me, or touch me!"; + evt.preventDefault(); +}</pre> + +<p>このコードの役割は、ユーザーによる要素の操作が終了した後 (例えば、マウスボタンを放したとき、またはスタイラスや指を画面から離したときなど) に、元のテキストをターゲットボックスに復元することです。</p> + +<p>さらに、<code>mouseup</code> イベントが不必要にトリガーされないようにするために、イベントの {{domxref("Event.preventDefault", "preventDefault()")}} メソッドを呼び出します。</p> + +<details><summary> +<h4 id="HTML">HTML</h4> +</summary> + +<p>HTML は次のように非常に単純です。</p> + +<pre class="brush: html notranslate"><div id="target"> + Tap me, click me, or touch me! +</div></pre> +</details> + +<details><summary> +<h4 id="CSS" name="CSS">CSS</h4> +</summary> + +<p>CSS は単にターゲットの外観を設定するだけで、その機能にはまったく影響しません。</p> + +<pre class="brush: css notranslate">#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; +}</pre> +</details> + +<h4 id="Result" name="Result">結果</h4> + +<p>結果の出力は次の通りです。 ボックスをタップ、クリック、タッチして、何が起こるかを確認してください。 最大の効果を得るには、さまざまなポインタタイプで試してください。</p> + +<p>{{EmbedLiveSample("Example", 450, 50)}}</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerdown', 'onpointerdown')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerdown', 'onpointerdown')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onpointerdown")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Pointer_events">ポインターイベント</a></li> + <li><a href="/ja/docs/Web/API/Pointer_events/Using_Pointer_Events">ポインターイベントの使用</a></li> + <li><a href="/ja/docs/Web/CSS/CSSOM_View/Coordinate_systems">座標系</a></li> + <li><code><a href="/ja/docs/Web/API/Document/pointerdown_event">Document: pointerdown</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerdown_event">HTMLElement: pointerdown</a></code> イベント</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><strong><code>onpointerenter</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{domxref("HTMLElement/pointerenter_event", "pointerenter")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>targetElement</var>.onpointerenter = <var>enterHandler</var>; + +var <var>enterHandler</var> = <var>targetElement</var>.onpointerenter; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<dl> + <dt><code>enterHandler</code></dt> + <dd>要素 <code>targetElement</code> の <code>pointerenter</code> イベントハンドラー。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>onpointerenter</code> を使用して要素の <code>pointerenter</code> イベントハンドラーを設定する2つの方法を示します。</p> + +<pre class="brush: html notranslate"><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> +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerenter', 'onpointerenter')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerenter', 'onpointerenter')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onpointerenter")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/API/Document/pointerenter_event">Document: pointerenter</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerenter_event">HTMLElement: pointerenter</a></code> イベント</li> +</ul> 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 +--- +<div>{{APIRef("HTML DOM")}}</div> + +<p><span class="seoSummary">{{domxref("HTMLElement/pointerleave_event", "pointerleave")}} イベントの{{domxref("GlobalEventHandlers","グローバルイベントハンドラー", "", 1)}}で、ポインター (マウスカーソル、指先など) がヒットテスト領域を出ると (例えば、カーソルが {{domxref("Element")}} や {{domxref("Window")}} のコンテンツ領域を出ると)、{{domxref("Node")}} に配信されます。このイベントは <a href="/ja/docs/Web/API/Pointer_events">Pointer Events API</a> の一部です。</span></p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>EventTarget</var>.onpointerleave = <var>leaveHandler</var>; + +var <var>leaveHandler</var> = <var>EventTarget</var>.onpointerleave;</pre> + +<h3 id="Value" name="Value">値</h3> + +<dl> + <dt><code><var>leaveHandler</var></code></dt> + <dd>{{domxref("EventListener")}} で、ターゲットに送信された {{domxref("HTMLElement/pointerleave_event", "pointerleave")}} イベントを処理するために呼び出されます。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>onpointerleave</code> を使用して要素の <code>pointerleave</code> イベントハンドラーを設定する2つの方法を示します。</p> + +<pre class="brush: js notranslate"><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> +</pre> + +<p>詳細については、<a href="/ja/docs/Web/API/Pointer_events/Using_Pointer_Events">Pointer Events の使用</a>を参照してください。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerleave', 'onpointerleave')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerleave', 'onpointerleave')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onpointerleave")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Pointer_events">ポインターイベント</a></li> + <li><a href="/ja/docs/Web/API/Pointer_events/Using_Pointer_Events">ポインターイベントの使用</a></li> + <li><code><a href="/ja/docs/Web/API/Document/pointerleave_event">Document: pointerleave</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerleave_event">HTMLElement: pointerleave</a></code> イベント</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><strong><code>onpointermove</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("pointermove")}} イベントを処理する {{domxref("EventHandler")}} です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>targetElement</var>.onpointermove = <var>moveHandler</var>; + +var <var>moveHandler</var> = <var>targetElement</var>.onpointermove; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<dl> + <dt><code><var>moveHandler</var></code></dt> + <dd>要素 <code><var>targetElement</var></code> の <code>pointermove</code> イベントハンドラー。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>onpointermove</code> を使用して要素の <code>pointermove</code> イベントハンドラを設定する2つの方法を示します。</p> + +<pre class="brush: js notranslate"><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> +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointermove', 'onpointermove')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointermove', 'onpointermove')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onpointermove")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/API/Document/pointermove_event">Document: pointermove</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/pointermove_event">HTMLElement: pointermove</a></code> イベント</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><strong><code>onpointerout</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、{{event("pointerout")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>targetElement</var>.onpointerout = <var>outHandler</var>; + +var <var>outHandler</var> = <var>targetElement</var>.onpointerout; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<dl> + <dt><code>outHandler</code></dt> + <dd>要素 <code>targetElement</code> の <code>pointerout</code> イベントハンドラー。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>onpointerout</code> を使用して要素の <code>pointerout</code> イベントハンドラーを設定する2つの方法を示します。</p> + +<pre class="brush: js notranslate"><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> +</pre> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerout', 'onpointerout')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerout', 'onpointerout')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onpointerout")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/API/Document/pointerout_event">Document: pointerout</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerout_event">HTMLElement: pointerout</a></code> イベント</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><strong><code>onpointerover</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("pointerover")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>targetElement</var>.onpointerover = <var>overHandler</var>; + +var <var>overHandler</var> = <var>targetElement</var>.onpointerover; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<dl> + <dt><code><var>overHandler</var></code></dt> + <dd><code><var>targetElement</var></code> 要素の <code>pointerover</code> イベントハンドラー。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>onpointerover</code> を使用して要素の <code>onpointerover</code> イベントハンドラーを設定する2つの方法を示します。</p> + +<pre class="brush: js notranslate"><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> +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerover', 'onpointerover')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerover', 'onpointerover')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onpointerover")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/API/Document/pointerover_event">Document: pointerover</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerover_event">HTMLElement: pointerover</a></code> イベント</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><strong><code>onpointerup</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("pointerup")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>targetElement</var>.onpointerup = <var>upHandler</var>; + +var <var>upHandler</var> = <var>targetElement</var>.onpointerup; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<dl> + <dt><code>upHandler</code></dt> + <dd>要素 <code>targetElement</code> の <code>pointerup</code> イベントハンドラー。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>onpointerup</code> を使用して要素の <code>pointerup</code> イベントハンドラーを設定する2つの方法を示します。</p> + +<pre class="brush: js notranslate"><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> +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Pointer Events 2','#dom-globaleventhandlers-onpointerup', 'onpointerup')}}</td> + <td>{{Spec2('Pointer Events 2')}}</td> + <td>不安定版</td> + </tr> + <tr> + <td>{{SpecName('Pointer Events', '#widl-GlobalEventHandlers-onpointerup', 'onpointerup')}}</td> + <td>{{Spec2('Pointer Events')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onpointerup")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><code><a href="/ja/docs/Web/API/Document/pointerup_event">Document: pointerup</a></code> イベント</li> + <li><code><a href="/ja/docs/Web/API/HTMLElement/pointerup_event">HTMLElement: pointerup</a></code> イベント</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}}</div> + +<p><strong><code>onscroll</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 <code>scroll</code> イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。</p> + +<p><code>scroll</code> イベントは、ユーザー、 <a href="/ja/docs/Web/API">Web API</a>、{{glossary("user agent","ユーザーエージェント")}}の何れかによって文書のビューまたは要素がスクロールしたときに発生します。</p> + +<div class="blockIndicator note"> +<p><strong>注:</strong> <code>onscroll</code> を {{domxref("GlobalEventHandlers.onwheel", "onwheel")}} と混同しないようにしてください。</p> + +<p><code>onwheel</code> は一般的なホイールの回転を扱うのに対し、 <code>onscroll</code> はオブジェクトの内容のスクロールを扱います。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>target</var>.onscroll = <var>functionRef</var> +</pre> + +<h3 id="Value" name="Value">値</h3> + +<dl> + <dt><code><var>functionRef</var></code></dt> + <dd>関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は引数として一つだけ、 {{domxref("UIEvent")}} オブジェクトを受け取ります。</dd> +</dl> + +<p><code>onscroll</code> ハンドラーは同時に1つだけ割り当てることができます。</p> + +<p>柔軟性を高めるために、 {{event("scroll")}} イベントを {{domxref("EventTarget.addEventListener()")}} メソッドに渡すことができます。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では {{HtmlElement("textarea")}} のスクロールを監視し、その結果である要素の垂直のスクロール位置をログ出力します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><textarea>1 2 3 4 5 6 7 8 9</textarea> +<p id="log"></p></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: css notranslate">textarea { + width: 4rem; + height: 8rem; + font-size: 3rem; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">const textarea = document.querySelector('textarea'); +const log = document.getElementById('log'); + +textarea.onscroll = logScroll; + +function logScroll(e) { + log.textContent = `Scroll position: ${e.target.scrollTop}`; +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Example", 700, 200)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','#handler-onscroll','onscroll')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM3 Events", "#event-type-scroll", "onscroll")}}</td> + <td>{{Spec2("DOM3 Events")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onscroll")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Document/scroll_event">Document: <code>scroll</code> イベント</a></li> + <li><a href="/ja/docs/Web/API/Element/scroll_event">Element: <code>scroll</code> イベント</a></li> +</ul> 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 +--- +<div>{{ ApiRef("HTML DOM") }}</div> + +<p>{{domxref("window")}} の <code>select</code> イベントに対応するイベントハンドラです。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">window.onselect = <em>funcRef</em>; +</pre> + +<ul> + <li><code>funcRef</code> : 関数への参照、または関数式</li> +</ul> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: html"><!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> +</pre> + +<h2 id="Notes" name="Notes">注記</h2> + +<p><code>select</code> イベントは、テキストインプット (<code><input type="text"></code>) もしくは {{htmlelement("textarea")}} 要素のテキストが<em>選択された直後に</em> 発生します。</p> + +<h2 id="Specification" name="Specification">仕様</h2> + +<table class="spectable standard-table"> + <tbody> + <tr> + <th scope="col">仕様書</th> + <th scope="col">策定状況</th> + <th scope="col">コメント</th> + </tr> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onselect','onselect')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_Compatibility" name="Browser_Compatibility">ブラウザー実装状況</h2> + +<div> + + +<p>{{Compat("api.GlobalEventHandlers.onselect")}}</p> +</div> 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 +--- +<div>{{ApiRef("HTML DOM")}} {{SeeCompatTable}}</div> + +<p><strong><code>ontouchcancel</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("touchcancel")}} イベントを処理する {{domxref("EventHandler")}} です。</p> + +<div class="note"> +<p><strong>注:</strong> このプロパティは公式には標準化されて<em>いません</em>。これは {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 仕様書で定義されているものであり、 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}} では定義されていません。このプロパティは広く実装されているわけではありません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>cancelHandler</var> = <var>someElement</var>.ontouchcancel; +</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<dl> + <dt><code><var>cancelHandler</var></code></dt> + <dd>要素 <code><var>someElement</var></code> の <code>touchcancel</code> イベントハンドラー。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>touchcancel</code> を使用して要素の <code>touchcancel</code> イベントを処理する2つの方法を示します。</p> + +<pre class="brush: js notranslate"><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> +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Touch Events 2','#dom-globaleventhandlers-ontouchcancel')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>非安定版</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ontouchcancel")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ event("touchcancel") }}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}} {{SeeCompatTable}}</div> + +<p><strong><code>ontouchstart</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("touchstart")}} イベントを処理する {{domxref("EventHandler")}} です。</p> + +<div class="note"> +<p><strong>注:</strong> このプロパティは公式には標準化されて<em>いません</em>。これは {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 仕様書で定義されているものであり、 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}} では定義されていません。このプロパティは広く実装されているわけではありません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>endHandler</var> = <var>targetElement</var>.ontouchend; +</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<dl> + <dt><code><var>endHandler</var></code></dt> + <dd>要素 <code><var>targetElement</var></code> の <code>touchend</code> イベントハンドラー。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>ontouchend</code> を使用して要素の <code>touchend</code> イベントを処理する2つの方法を示します。</p> + +<pre class="brush: js notranslate"><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> +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Touch Events 2','#dom-globaleventhandlers-ontouchend')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>非安定版</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ontouchend")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ event("touchend") }}</li> +</ul> 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 +--- +<div>{{ApiRef("HTML DOM")}} {{SeeCompatTable}}</div> + +<p><strong><code>ontouchstart</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("touchstart")}} イベントを処理する {{domxref("EventHandler")}} です。</p> + +<div class="note"> +<p><strong>注:</strong> このプロパティは公式には標準化されて<em>いません</em>。これは {{SpecName('Touch Events 2')}} {{Spec2('Touch Events 2')}} 仕様書で定義されているものであり、 {{SpecName('Touch Events')}} {{Spec2('Touch Events')}} では定義されていません。このプロパティは広く実装されているわけではありません。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>startHandler</var> = <var>someElement</var>.ontouchstart; +</pre> + +<h3 id="Return_value" name="Return_value">返値</h3> + +<dl> + <dt><code><var>startHandler</var></code></dt> + <dd>要素 <code><var>someElement</var></code> の <code>touchstart</code> イベントハンドラー。</dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、<code>ontouchstart</code> を使用して要素の <code>touchstart</code> イベントを処理する2つの方法を示します。</p> + +<pre class="brush: js notranslate"><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> +</pre> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('Touch Events 2','#dom-globaleventhandlers-ontouchstart')}}</td> + <td>{{Spec2('Touch Events 2')}}</td> + <td>非安定版</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onpointercancel")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ event("touchstart") }}</li> +</ul> 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 +--- +<div>{{APIRef("CSS3 Transitions")}}</div> + +<p><strong><code>ontransitioncancel</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("transitioncancel")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。</p> + +<p><code>transitioncancel</code> イベントは <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>がキャンセルされたときに送信されます。トランジションがキャンセルされるのは下記のような時です。</p> + +<ul> + <li>適用されている対象の {{cssxref("transition-property")}} プロパティの値が変更された時。</li> + <li>{{cssxref("display")}} プロパティが <code>none</code> に変更された時。</li> + <li>完了する前に、トランジションが停止された時。例えば、マウスオーバーでトランジション中の要素をマウスアウトした時。</li> +</ul> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>transitionCancelHandler</var> = <var>target</var>.ontransitioncancel; + +<var>target</var>.ontransitioncancel = <var>{{jsxref("Function")}}</var> +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>関数 ({{jsxref("Function")}}) で、 CSS トランジションがキャンセルされたことを示す {{event("transitioncancel")}} イベントが <code><var>target</var></code> 上で発生した場合に呼び出されるものです。対象となるオブジェクトは HTML 要素 ({{domxref("HTMLElement")}})、文書 ({{domxref("Document")}})、ウィンドウ ({{domxref("Window")}}) です。この関数は単一の引数、発生したイベントを記述する {{domxref("TransitionEvent")}} を単一の引数として受け取ります。イベントの {{domxref("TransitionEvent.elapsedTime")}} プロパティの値は、 {{cssxref("transition-duration")}} の値と同じでなければなりません。</p> + +<div class="note"> +<p><strong>注</strong>: <code>elapsedTime</code> には、トランジション効果が始まる前の時間は含まれていません。つまり、 {{cssxref("transition-delay")}} の値は、待ち時間が終了してアニメーションが始まるまでは 0 である <code>elapsedTime</code> の値に影響しません。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、{{event("transitionrun")}} イベントと {{event("transitionend")}} イベントを使用して、トランジションの開始と終了を検出し、トランジション中にテキスト更新が発生するようにしています。これは、アニメーションやその他のエフェクトを起動して、反応を連鎖させるために使用することもできます。</p> + +<p>追加で、{{event("click")}} イベントも使用しています。それで、(<code>display: none;</code>) で四角を非表示にすることで、{{event("transitioncancel")}} イベントが発行される様子を見ることができます。</p> + +<h3 id="HTML" name="HTML">HTML</h3> + +<p>これは {{HTMLElement("div")}} だけを作成して、後は CSS で色やトランジション後のスタイルを指定します。</p> + +<pre class="brush: html; notranslate"><div class="box"></div> +</pre> + +<h3 id="CSS">CSS</h3> + +<p>下記の CSS は四角にマウスオーバーする時、色やサイズを変えたり、回転させたりするようなトランジション効果を適用します。</p> + +<pre class="brush: css; highlight:[13,14] notranslate">.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); +} +</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<p>次に、トランジションの開始時と終了時にボックスのテキストコンテンツを変更するためにイベントハンドラ－を設定します。</p> + +<pre class="brush: js notranslate">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.<code>elapsedTime + ' seconds.'</code>); +}</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>結果のコンテンツは次のようになります。</p> + +<p>{{EmbedLiveSample('Example', 600, 280)}}</p> + +<p>四角にマウスオーバーやマウスアウトするときどうなるか見てください。</p> + +<p>あと、開発ツールにある JavaScript コンソールも見て、トランジションが終わる前に四角をクリックしたりマウスアウトすると、どんなログが出るか注意してください。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions','#dom-globaleventhandlers-ontransitioncancel','ontransitioncancel')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ontransitioncancel")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このハンドラーを起動する {{event("transitioncancel")}} イベント</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>トランジションが開始したときに発生する {{event("transitionrun")}} イベント</li> +</ul> 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 +--- +<div>{{APIRef("CSS3 Transitions")}}</div> + +<p><strong><code>ontransitionend</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 {{event("transitionend")}} イベントを処理するイベントハンドラー ({{domxref("EventHandler")}}) です。</p> + +<p><code>transitionend</code> イベントは、 <a href="/ja/docs/Web/CSS/CSS_Transitions">CSS トランジション</a>が完了すると発生します。</p> + +<div class="note"> +<p>トランジションの実行が完了する前に対象ノードからトランジションが削除された場合、 {{event("transitionend")}} イベントは生成されません。これは、対象に適用される {{cssxref("transition-property")}} 属性の値を変更することで発生します。もう一つは、 {{cssxref("display")}} 属性が <code>none</code> に設定されている場合です。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">var <var>transitionEndHandler</var> = <var>target</var>.ontransitionend; + +<var>target</var>.ontransitionend = <var>{{jsxref("Function")}}</var> +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>関数 ({{jsxref("Function")}}) で、 CSS トランジションの完了を示す {{event("transitionend")}} イベントが <code><var>target</var></code> 上で発生した場合に呼び出されるものです。対象となるオブジェクトは HTML 要素 ({{domxref("HTMLElement")}})、文書 ({{domxref("Document")}})、ウィンドウ ({{domxref("Window")}}) です。この関数は単一の引数、発生したイベントを記述する {{domxref("TransitionEvent")}} を単一の引数として受け取ります。イベントの {{domxref("TransitionEvent.elapsedTime")}} プロパティの値は、 {{cssxref("transition-duration")}} の値と同じでなければなりません。</p> + +<div class="note"> +<p><code>elapsedTime</code> には、トランジション効果が始まる前の時間は含まれていません。つまり、 {{cssxref("transition-delay")}} の値は、待ち時間が終了してアニメーションが始まるまでは 0 である <code>elapsedTime</code> の値に影響しません。</p> +</div> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、{{event("transitionrun")}} イベントと {{event("transitionend")}} イベントを使用して、トランジションの開始と終了を検出し、トランジション中にテキスト更新が発生するようにしています。これは、アニメーションやその他のエフェクトを起動して、反応を連鎖させるために使用することもできます。</p> + +<h3 id="HTML" name="HTML">HTML</h3> + +<p>これは単純に {{HTMLElement("div")}} を作成するだけで、以下の CSS でスタイルを変更して、ボックスの大きさを変更したり色を変更したりします。</p> + +<pre class="brush: html; notranslate"><div class="box"></div> +</pre> + +<h3 id="CSS" name="CSS">CSS</h3> + +<p>以下の CSS は、ボックスのスタイルを設定し、ボックスの色と大きさを変化させ、マウスカーソルがボックスの上に乗っている間にボックスが回転するようなトランジション効果を適用しています。</p> + +<pre class="brush: css; highlight:[13,14] notranslate">.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); +} +</pre> + +<h3 id="JavaScript" name="JavaScript">JavaScript</h3> + +<p>次に、トランジションの開始時と終了時にボックスのテキストコンテンツを変更するためにイベントハンドラ－を設定します。</p> + +<pre class="brush: js notranslate">let box = document.querySelector(".box"); +box.ontransitionrun = function(event) { + box.innerHTML = "Zooming..."; +} +box.ontransitionend = function(event) { + box.innerHTML = "Done!"; +} +</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>結果のコンテンツは次のようになります。</p> + +<p>{{EmbedLiveSample('Example', 600, 280)}}</p> + +<p>マウスカーソルをボックスの上に置いてから、マウスを移動させるとどうなるかに注目してください。</p> + +<h2 id="Specification" name="Specification">仕様書</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('CSS3 Transitions','#dom-globaleventhandlers-ontransitionend','ontransitionend')}}</td> + <td>{{Spec2('CSS3 Transitions')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.ontransitionend")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>このハンドラーを起動する {{event("transitionend")}} イベント</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>トランジションが開始したときに発生する {{event("transitionrun")}} イベント</li> +</ul> 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 +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><strong><code>onscroll</code></strong> は {{domxref("GlobalEventHandlers")}} ミックスインのプロパティで、 <code>wheel</code> イベントを処理する{{domxref("EventHandler", "イベントハンドラー")}}です。</p> + +<p><code>wheel</code> イベントは、ユーザーがマウス (または他のポインティングデバイス) のホイールを回転させたときに発生します。</p> + +<div class="blockIndicator note"> +<p><strong>メモ:</strong> <code>onwheel</code> を {{domxref("GlobalEventHandlers.onscroll", "onscroll")}} と混同しないようにしてください。 <code>onwheel</code> は一般的なホイールの回転を扱うのに対し、 <code>onscroll</code> はオブジェクトの内容のスクロールを扱います。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><em>target</em>.onwheel = <em>functionRef</em>; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code><var>functionRef</var></code> は関数名または<a href="/ja/docs/Web/JavaScript/Reference/Operators/function">関数式</a>です。この関数は引数として一つだけ、 {{domxref("WheelEvent")}} オブジェクトを受け取ります。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例では、マウス (または他のポインティングデバイス) のホイールを使用して、要素を拡大縮小する方法を示します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><div>マウスホイールで拡大縮小します。</div></pre> + +<h3 id="CSS">CSS</h3> + +<pre class="brush: 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; +}</pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">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;</pre> + +<h3 id="Result" name="Result">結果</h3> + +<p>{{EmbedLiveSample("Examples", 700, 400)}}</p> + +<h2 id="Specifications" name="Specifications">仕様書</h2> + +<table class="spectable standard-table"> + <thead> + <tr> + <th scope="col">仕様書</th> + <th scope="col">状態</th> + <th scope="col">備考</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('HTML WHATWG','webappapis.html#handler-onwheel','onwheel')}}</td> + <td>{{Spec2('HTML WHATWG')}}</td> + <td></td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<div class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</div> + +<p>{{Compat("api.GlobalEventHandlers.onwheel")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Document/wheel_event">Document: <code>wheel</code> イベント</a></li> + <li><a href="/ja/docs/Web/API/Element/wheel_event">Element: <code>wheel</code> イベント</a></li> +</ul> |