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/event | |
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/event')
-rw-r--r-- | files/ja/web/api/event/bubbles/index.html | 90 | ||||
-rw-r--r-- | files/ja/web/api/event/button/index.html | 59 | ||||
-rw-r--r-- | files/ja/web/api/event/cancelable/index.html | 89 | ||||
-rw-r--r-- | files/ja/web/api/event/cancelbubble/index.html | 89 | ||||
-rw-r--r-- | files/ja/web/api/event/createevent/index.html | 31 | ||||
-rw-r--r-- | files/ja/web/api/event/currenttarget/index.html | 105 | ||||
-rw-r--r-- | files/ja/web/api/event/defaultprevented/index.html | 88 | ||||
-rw-r--r-- | files/ja/web/api/event/event/index.html | 78 | ||||
-rw-r--r-- | files/ja/web/api/event/index.html | 200 | ||||
-rw-r--r-- | files/ja/web/api/event/initevent/index.html | 51 | ||||
-rw-r--r-- | files/ja/web/api/event/preventdefault/index.html | 166 | ||||
-rw-r--r-- | files/ja/web/api/event/stopimmediatepropagation/index.html | 95 | ||||
-rw-r--r-- | files/ja/web/api/event/stoppropagation/index.html | 73 | ||||
-rw-r--r-- | files/ja/web/api/event/target/index.html | 105 | ||||
-rw-r--r-- | files/ja/web/api/event/timestamp/index.html | 141 | ||||
-rw-r--r-- | files/ja/web/api/event/type/index.html | 95 |
16 files changed, 1555 insertions, 0 deletions
diff --git a/files/ja/web/api/event/bubbles/index.html b/files/ja/web/api/event/bubbles/index.html new file mode 100644 index 0000000000..1bf129ebc6 --- /dev/null +++ b/files/ja/web/api/event/bubbles/index.html @@ -0,0 +1,90 @@ +--- +title: Event.bubbles +slug: Web/API/Event/bubbles +tags: + - API + - Bubbling + - DOM + - DOM Events + - Event + - Event Handling + - Propagation + - Property + - Read-only + - Reference + - bubbles + - プロパティ + - 読取専用 +translation_of: Web/API/Event/bubbles +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><code><strong>bubbles</strong></code> は {{domxref("Event")}} インターフェイスの読み取り専用プロパティで、イベントが DOM をバブリングするかしないかを示します。</p> + +<div class="note"> +<p><strong>メモ</strong>: バブリングについての詳細は、<a href="/ja/docs/Learn/JavaScript/Building_blocks/Events#Event_bubbling_and_capture">イベントのバブリングとキャプチャ</a>を参照してください。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="brush: js">var <em>doesItBubble</em> = <em>event</em>.bubbles;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p><code>bool</code> は<code>true</code> か <code>false</code>であり、イベントがバブリングするものかどうかを示しています。</p> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">function handleInput(e) { + // Checks whether the event bubbles and ... + if (!e.bubbles) { + // ... passes the event along if does not + passItOn(e); + } + + // Already bubbling + doOutput(e); +} +</pre> + +<div class="note"> +<p><strong>メモ</strong>: 一部のイベントだけがバブリングします。バブリングするイベントでは、このプロパティが <code>true</code> に設定されています。イベントがバブリングするかどうかを確認するためにこのプロパティを使用することができます。</p> +</div> + +<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('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}</td> + <td>{{ Spec2('DOM2 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.Event.bubbles")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Event.stopPropagation", "stopPropagation()")}} はイベントのバブリングを停止します</li> + <li>{{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} は同じイベントが DOM 内の同じ水準で他のリスナーを呼び出すことを抑止します</li> + <li>{{domxref("Event.preventDefault", "preventDefault()")}} は拡散を続けることを許可しますが、ブラウザーがイベントを扱うためのリスナーがない既定のアクションを実行することを許可しません</li> +</ul> diff --git a/files/ja/web/api/event/button/index.html b/files/ja/web/api/event/button/index.html new file mode 100644 index 0000000000..985b67c783 --- /dev/null +++ b/files/ja/web/api/event/button/index.html @@ -0,0 +1,59 @@ +--- +title: event.button +slug: Web/API/Event/button +tags: + - DOM + - Gecko + - Gecko DOM Reference +translation_of: Web/API/MouseEvent/button +--- +<p>{{ ApiRef() }}</p> +<h3 id="Summary" name="Summary">Summary</h3> +<p>イベントを発生させたマウスのボタンを示しています。</p> +<h3 id="Syntax" name="Syntax">Syntax</h3> +<pre>var buttonCode = event.button; +</pre> +<p>state を変えたボタンを示す整数値を返します。</p> +<ul> + <li>0 は普通の'クリック'であり、通常は左クリック</li> + <li>1 は中ボタンであり、通常はホイールのクリック</li> + <li>2 は右ボタンであり、通常は右クリック</li> +</ul> +<p>ボタンの順序はどのようにポインティングデバイスが設定されているかによります。</p> +<h3 id="Example" name="Example">Example</h3> +<pre><script type="text/javascript"> + +function whichButton(e) +{ + // Handle different event models + var e = e || window.event; + var btnCode; + + if ('object' == typeof e){ + btnCode = e.button; + + switch (btnCode){ + case 0 : alert('Left button clicked'); + break; + case 1 : alert('Middle button clicked'); + break; + case 2 : alert('Right button clicked'); + break; + default : alert('Unexpected code: ' + btnCode); + } + } +} + +</script> + +<p onclick="whichButton(event);">Click with mouse...</p> + +</pre> +<h3 id="Notes" name="Notes">Notes</h3> +<p>マウスのクリックはしばしばUIによって横取りされるため、ある状況では普通のクリック(通常は左クリック)でないマウスのクリックを検出することが普通のクリックよりも難しいかもしれません。</p> +<p>ユーザーはポインティングデバイスのボタンの設定を変更する可能性があり、たといこのイベントの button プロパティが 0 であったとしても、それは物理的にポインティングデバイスの最も左に存在するボタンによるものではないかもしれません。しかし、そんな場合にも、標準的なボタン配置における左クリックと同様の動作をするべきであるとされています。</p> +<h3 id="Specification" name="Specification">Specification</h3> +<p>DOM 2 Events Specification: <a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-MouseEvent-button">button</a></p> +<div class="noinclude"> + </div> +<p>{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}</p> diff --git a/files/ja/web/api/event/cancelable/index.html b/files/ja/web/api/event/cancelable/index.html new file mode 100644 index 0000000000..6364c6a28b --- /dev/null +++ b/files/ja/web/api/event/cancelable/index.html @@ -0,0 +1,89 @@ +--- +title: Event.cancelable +slug: Web/API/Event/cancelable +tags: + - API + - DOM + - DOM Reference + - Event + - Property + - Read-only + - Reference + - イベント + - プロパティ + - 読み取り専用 +translation_of: Web/API/Event/cancelable +--- +<div>{{ ApiRef("DOM") }}</div> + +<p><span class="seoSummary">The <strong><dfn><code>cancelable</code></dfn></strong> は {{domxref("Event")}} インターフェイスの読み取り専用プロパティで、イベントがキャンセル可能かどうか、イベントが発生しないように抑止することができるかを示します。</span>イベントがキャンセルでき<em>ない</em>場合、 <code>cancelable</code> プロパティは <code>false</code> となり、イベントが発生することをイベントリスナーが抑止することができないことを示します。</p> + +<p>複数の種類のイベントを扱うイベントリスナーは、 {{domxref("event.preventDefault", "preventDefault()")}} メソッドを呼び出す前に <code>cancelable</code> をチェックしたほうが良いかもしれません。</p> + +<p>ブラウザーネイティブのイベントのうち、キャンセル可能なもののほとんどは、ユーザーのページとの対話の結果から発生したものです。 {{domxref("Element/click_event", "click")}}, {{domxref("Document/scroll_event", "scroll")}}, {{domxref("Window/beforeunload_event", "beforeunload")}} の各イベントをキャンセルすると、それぞれユーザーが何かをクリックすること、ページをスクロールすること、他のページに移動することをそれぞれ抑止することができます。</p> + +<p>その他の JavaScript によって作成された<a href="/ja/docs/Web/API/Event/Event">カスタムイベント</a>は、作成時にキャンセル可能であるかどうかを制御します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox"><var>bool</var> = <em>event</em>.cancelable; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>結果は {{domxref("Boolean")}} で、イベントがキャンセル可能であれば <code>true</code> です。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>例えば、ブラウザーベンダーは {{domxref("Document/wheel_event", "wheel")}} イベントが、<a href="https://github.com/WICG/interventions/issues/33" rel="external">最初にリスナーが呼び出されたとき</a>のみキャンセル可能にしようと提案しています。 — その後の <code>wheel</code> イベントはキャンセルできません。</p> + +<pre class="brush:js">function preventScrollWheel(event) { + if (typeof event.cancelable !== 'boolean' || event.cancelable) { + // The event can be canceled, so we do so. + event.preventDefault(); + } else { + // The event cannot be canceled, so it is not safe + // to call preventDefault() on it. + console.warn(`The following event couldn't be canceled:`); + console.dir(event); + } +} + +document.addEventListener('wheel', preventScrollWheel); +</pre> + +<h2 id="Notes" name="Notes">メモ</h2> + +<p>イベントがキャンセル可能か不可能かは、イベントが初期化されたときに決定されます。</p> + +<p>イベントをキャンセルするには、イベントの {{domxref("event.preventDefault", "preventDefault()")}} メソッドを呼び出してください。これはイベントに関連付けられた既定の動作を実行する実装を維持します。</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('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}}</td> + <td>{{ Spec2('DOM2 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.Event.cancelable")}}</p> diff --git a/files/ja/web/api/event/cancelbubble/index.html b/files/ja/web/api/event/cancelbubble/index.html new file mode 100644 index 0000000000..98d484871a --- /dev/null +++ b/files/ja/web/api/event/cancelbubble/index.html @@ -0,0 +1,89 @@ +--- +title: Event.cancelBubble +slug: Web/API/Event/cancelBubble +translation_of: Web/API/Event/cancelBubble +--- +<p>{{APIRef("DOM Events")}}</p> + +<p>The <code><strong>Event.cancelBubble</strong></code> property は過去の経緯上、{{domxref("Event.stopPropagation()")}}の別名です。トリガーとしたevent handlerから終了する前に、これに<code>true</code>に設定すると、発生イベントを親要素に伝播(propagation)させません。</p> + +<h2 id="Syntax" name="Syntax">文法</h2> + +<pre class="syntaxbox">event.cancelBubble = <em>bool;</em> +<em>var bool</em> = event.cancelBubble;</pre> + +<h2 id="使用例">使用例</h2> + +<pre>elem.onclick = function(e) { + // do cool things here + e.cancelBubble = true; +}</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('DOM WHATWG', '#dom-event-cancelbubble', 'cancellBubble')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ_互換性">ブラウザ 互換性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>特徴</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>特徴</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop(53)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Firefox 52以前で、このpropertyは{{domxref("UIEvent")}} interfaceで定義されていました。 さらなる詳細はこちら {{bug(1298970)}}を見てください。</p> diff --git a/files/ja/web/api/event/createevent/index.html b/files/ja/web/api/event/createevent/index.html new file mode 100644 index 0000000000..8830d518ef --- /dev/null +++ b/files/ja/web/api/event/createevent/index.html @@ -0,0 +1,31 @@ +--- +title: Event.createEvent() +slug: Web/API/Event/createEvent +translation_of: Web/API/Document/createEvent +--- +<p>{{APIRef("DOM")}}</p> + +<p>新規イベントを生成します。生成されたイベントは初期化処理が必須です。</p> + +<h3 id="構文">構文</h3> + +<pre><code>document.createEvent(type) </code></pre> + +<dl> + <dt><code>type</code></dt> + <dd>生成するイベントタイプ名</dd> +</dl> + +<p>このメソッドは指定されたイベントタイプの新規DOM {{ domxref("Event") }} オブジェクトを返り値として返します。</p> + +<p>オブジェクトには初期化処理が必須です。</p> + +<h3 id="例">例</h3> + +<pre>var newEvent = document.createEvent("UIEvents");</pre> + +<h3 id="仕様書">仕様書</h3> + +<ul> + <li><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document" title="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-document">DOM Level 2 Events</a></li> +</ul> diff --git a/files/ja/web/api/event/currenttarget/index.html b/files/ja/web/api/event/currenttarget/index.html new file mode 100644 index 0000000000..a74320b4a8 --- /dev/null +++ b/files/ja/web/api/event/currenttarget/index.html @@ -0,0 +1,105 @@ +--- +title: Event.currentTarget +slug: Web/API/Event/currentTarget +tags: + - API + - DOM + - Gecko + - NeedsBrowserCompatibility + - Property +translation_of: Web/API/Event/currentTarget +--- +<p>{{APIRef("DOM")}}</p> + +<p>イベントは DOM を横断するので、イベントの現在のターゲットを識別します。イベントが発生した要素を特定する <code>event.target</code> とは対照的に、常にイベントハンドラがアタッチされた要素を参照します。</p> + +<h2 id="例">例</h2> + +<p><code>event.currentTarget</code> は、同じイベントハンドラを複数の要素にアタッチしているときに使用すると興味深いです。</p> + +<pre class="brush: js">function hide(e){ + e.currentTarget.style.visibility = "hidden"; + // この関数がイベントハンドラとして使用されるとき: this === e.currentTarget +} + +var ps = document.getElementsByTagName('p'); + +for(var i = 0; i < ps.length; i++){ + ps[i].addEventListener('click', hide, false); +} + +// 周辺をクリックすると段落が消えます。 +</pre> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様</th> + <th>状態</th> + <th>コメント</th> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザ実装状況">ブラウザ実装状況</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Internet Explorer 6 から 8 では、イベントモデルが異なります。イベントリスナは非標準の <code>element.attachEvent</code> メソッドでアタッチされます。このモデルでは、<code>event.currentTarget</code> と同等の機能はなく、<code>this</code> はグローバルオブジェクトです。<code>event.currentTarget</code> 機能をエミュレートするための 1 つの解決策は、ハンドラを最初の引数として要素とともに <code>Function.prototype.call</code> を使用するハンドラを呼び出す関数でラップすることです。この方法であれば、 <code>this</code> は予想通りの値になります。</p> + +<h2 id="関連項目">関連項目</h2> + +<p><a href="/ja/docs/Web/API/Event/Comparison_of_Event_Targets">Comparison of Event Targets</a></p> diff --git a/files/ja/web/api/event/defaultprevented/index.html b/files/ja/web/api/event/defaultprevented/index.html new file mode 100644 index 0000000000..8601cb0457 --- /dev/null +++ b/files/ja/web/api/event/defaultprevented/index.html @@ -0,0 +1,88 @@ +--- +title: Event.defaultPrevented +slug: Web/API/Event/defaultPrevented +tags: + - API + - DOM + - Event + - Property + - Read-only + - プロパティ + - 読取専用 +translation_of: Web/API/Event/defaultPrevented +--- +<div>{{ APIRef("DOM") }}</div> + +<p><code><strong>defaultPrevented</strong></code> は {{domxref("Event")}} インターフェイスの読み取り専用プロパティで、 {{jsxref("Boolean")}} で {{ domxref("Event.preventDefault()") }} の呼び出しがイベントをキャンセルしたかどうかを示す値を返します。</p> + +<div class="note"><strong>メモ:</strong> 標準外かつ非推奨の <code>getPreventDefault()</code> メソッドの代わりに、これを使用してください (see {{ bug(691151) }})。</div> + +<h2 id="構文">構文</h2> + +<pre class="brush: js">var <em>defaultWasPrevented</em> = <em>event</em>.defaultPrevented;</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{jsxref("Boolean")}} で、 <code>true</code> は既定の{{glossary("user agent", "ユーザーエージェント")}}の操作が抑制されたことを、 <code>false</code> はそうではないことを表しています。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は2つの {{htmlElement("a")}} 要素のリンクを訪れる試みをログ出力します。 JavaScript は2番目のリンクの動作を抑制するために使用しています。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html"><p><a id="link1" href="#link1">Visit link 1</a></p> +<p><a id="link2" href="#link2">Try to visit link 2</a> (you can't)</p> +<p id="log"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js">function stopLink(event) { + event.preventDefault(); +} + +function logClick(event) { + const log = document.getElementById('log'); + + if (event.target.tagName === 'A') { + if (event.defaultPrevented) { + log.innerText = 'Sorry, but you cannot visit this link!\n' + log.innerText; + } + else { + log.innerText = 'Visiting link...\n' + log.innerText; + } + } +} + +const a = document.getElementById('link2'); +a.addEventListener('click', stopLink); +document.addEventListener('click', logClick);</pre> + +<h3 id="結果">結果</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('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}</td> + <td>{{ Spec2('DOM 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.Event.defaultPrevented")}}</p> diff --git a/files/ja/web/api/event/event/index.html b/files/ja/web/api/event/event/index.html new file mode 100644 index 0000000000..d8a91ef093 --- /dev/null +++ b/files/ja/web/api/event/event/index.html @@ -0,0 +1,78 @@ +--- +title: Event() +slug: Web/API/Event/Event +tags: + - API + - Constructor + - DOM + - Event + - Reference + - コンストラクター +translation_of: Web/API/Event/Event +--- +<div>{{APIRef("DOM")}}</div> + +<p><code><strong>Event()</strong></code> コンストラクターは、新しい {{domxref("Event")}} を生成します。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">new Event(<var>typeArg</var>[, <var>eventInit</var>]);</pre> + +<h3 id="Values" name="Values">値</h3> + +<dl> + <dt><code><var>typeArg</var></code></dt> + <dd>{{domxref("DOMString")}} で、イベントの名前を表します。</dd> + <dt><code><var>eventInit</var></code> {{optional_inline}}</dt> + <dd><code>EventInit</code> 辞書で、以下のフィールドを持ちます。 + <ul> + <li><code>bubbles</code>: {{jsxref("Boolean")}} で、イベントがバブリングするかどうかを示します。既定値は <code>false</code> です。</li> + <li><code>cancelable</code>: {{jsxref("Boolean")}} で、イベントがキャンセル可能かどうかを示します。既定値は <code>false</code> です。</li> + <li><code>composed</code>: {{jsxref("Boolean")}} で、イベントがシャドウルートの外のリスナーに伝わるかどうかを示します (詳しくは {{domxref("Event.composed")}} を参照してください)。既定値は <code>false</code> です。</li> + </ul> + </dd> +</dl> + +<h2 id="Example" name="Example">例</h2> + +<pre class="brush: js">// create a look event that bubbles up and cannot be canceled + +var evt = new Event("look", {"bubbles":true, "cancelable":false}); +document.dispatchEvent(evt); + +// event can be dispatched from any element, not only the document +myDiv.dispatchEvent(evt); +</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('DOM WHATWG','#dom-event-event','Event()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの互換性</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Event.Event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{domxref("Event")}}</li> + <li>{{domxref("EventTarget.dispatchEvent()")}}</li> + <li><a href="/ja/docs/Web/Guide/Events/Creating_and_triggering_events">イベントの作成とトリガー</a></li> +</ul> diff --git a/files/ja/web/api/event/index.html b/files/ja/web/api/event/index.html new file mode 100644 index 0000000000..6004f9a3f6 --- /dev/null +++ b/files/ja/web/api/event/index.html @@ -0,0 +1,200 @@ +--- +title: Event +slug: Web/API/Event +tags: + - API + - DOM + - Event + - Interface + - Reference + - UI + - インターフェイス +translation_of: Web/API/Event +--- +<p>{{APIRef("DOM")}}</p> + +<p><code><strong>Event</strong></code> インターフェイスは、DOM で発生するイベントを表します。ユーザーによって発生するイベント (マウスやキーボードのイベント) もありますし、API によって発生するイベント (アニメーションの実行が完了したことを示すイベントや、動画再生が一時停止したイベントなど) もあります。さまざまな型のイベントがあり、一部のイベントは基底の <code>Event</code> インターフェイスを基にした他のインターフェイスを使用します。<code>Event</code> 自体は、すべてのイベントで共通のプロパティやメソッドを持ちます。</p> + +<h2 id="Introduction" name="Introduction"><code>Event</code> を基にしたインターフェイス</h2> + +<p>以下のリストは <code>Event</code> インターフェイスを基にしたインターフェイスの一覧であり、 MDN API リファレンスの各ドキュメントにリンクしています。すべてのイベントインターフェイスは、名称の末尾が "Event" であることに留意してください。</p> + +<div class="index"> +<ul> + <li>{{domxref("AnimationEvent")}}</li> + <li>{{domxref("AudioProcessingEvent")}}</li> + <li>{{domxref("BeforeInputEvent")}}</li> + <li>{{domxref("BeforeUnloadEvent")}}</li> + <li>{{domxref("BlobEvent")}}</li> + <li>{{domxref("ClipboardEvent")}}</li> + <li>{{domxref("CloseEvent")}}</li> + <li>{{domxref("CompositionEvent")}}</li> + <li>{{domxref("CSSFontFaceLoadEvent")}}</li> + <li>{{domxref("CustomEvent")}}</li> + <li>{{domxref("DeviceLightEvent")}}</li> + <li>{{domxref("DeviceMotionEvent")}}</li> + <li>{{domxref("DeviceOrientationEvent")}}</li> + <li>{{domxref("DeviceProximityEvent")}}</li> + <li>{{domxref("DOMTransactionEvent")}}</li> + <li>{{domxref("DragEvent")}}</li> + <li>{{domxref("EditingBeforeInputEvent")}}</li> + <li>{{domxref("ErrorEvent")}}</li> + <li>{{domxref("FetchEvent")}}</li> + <li>{{domxref("FocusEvent")}}</li> + <li>{{domxref("GamepadEvent")}}</li> + <li>{{domxref("HashChangeEvent")}}</li> + <li>{{domxref("IDBVersionChangeEvent")}}</li> + <li>{{domxref("InputEvent")}}</li> + <li>{{domxref("KeyboardEvent")}}</li> + <li>{{domxref("MediaStreamEvent")}}</li> + <li>{{domxref("MessageEvent")}}</li> + <li>{{domxref("MouseEvent")}}</li> + <li>{{domxref("MutationEvent")}}</li> + <li>{{domxref("OfflineAudioCompletionEvent")}}</li> + <li>{{domxref("PageTransitionEvent")}}</li> + <li>{{domxref("PaymentRequestUpdateEvent")}}</li> + <li>{{domxref("PointerEvent")}}</li> + <li>{{domxref("PopStateEvent")}}</li> + <li>{{domxref("ProgressEvent")}}</li> + <li>{{domxref("RelatedEvent")}}</li> + <li>{{domxref("RTCDataChannelEvent")}}</li> + <li>{{domxref("RTCIdentityErrorEvent")}}</li> + <li>{{domxref("RTCIdentityEvent")}}</li> + <li>{{domxref("RTCPeerConnectionIceEvent")}}</li> + <li>{{domxref("SensorEvent")}}</li> + <li>{{domxref("StorageEvent")}}</li> + <li>{{domxref("SVGEvent")}}</li> + <li>{{domxref("SVGZoomEvent")}}</li> + <li>{{domxref("TimeEvent")}}</li> + <li>{{domxref("TouchEvent")}}</li> + <li>{{domxref("TrackEvent")}}</li> + <li>{{domxref("TransitionEvent")}}</li> + <li>{{domxref("UIEvent")}}</li> + <li>{{domxref("UserProximityEvent")}}</li> + <li>{{domxref("WebGLContextEvent")}}</li> + <li>{{domxref("WheelEvent")}}</li> +</ul> +</div> + +<h2 id="Constructor" name="Constructor">コンストラクター</h2> + +<dl> + <dt>{{domxref("Event.Event", "Event()")}}</dt> + <dd><code>Event</code> オブジェクトを生成して、呼び出し元に返します。</dd> +</dl> + +<h2 id="Properties" name="Properties">プロパティ</h2> + +<dl> + <dt>{{domxref("Event.bubbles")}} {{readonlyinline}}</dt> + <dd>イベントが DOM を通して浮上 (bubble up) するかを示す boolean 値です。</dd> + <dt>{{domxref("Event.cancelBubble")}}</dt> + <dd>{{domxref("Event.stopPropagation()")}} の歴史的な別名です。イベントハンドラーから戻る前に値 <code>true</code> を設定すると、イベントの伝播を抑制します。</dd> + <dt>{{domxref("Event.cancelable")}} {{readonlyinline}}</dt> + <dd>イベントがキャンセル可能かを示す boolean 値です。</dd> + <dt>{{domxref("Event.composed")}} {{ReadOnlyInline}}</dt> + <dd>shadow DOM と 通常の DOM の間の境界を越えてイベントが伝播できるかをを示す Boolean 値です。</dd> + <dt>{{domxref("Event.currentTarget")}} {{readonlyinline}}</dt> + <dd>イベントが現在登録されているターゲットへの参照。これは、現在イベントの送信先として予定されているオブジェクトです。これは<em>リターゲティング</em>によって、途中で変更できます。</dd> + <dt>{{domxref("Event.deepPath")}} {{non-standard_inline}}</dt> + <dd>イベントの伝播で通り抜けた DOM {{domxref("Node")}} の {{jsxref("Array")}} です。</dd> + <dt>{{domxref("Event.defaultPrevented")}} {{readonlyinline}}</dt> + <dd>{{domxref("event.preventDefault()")}} がイベントで呼ばれたかどうかを示します。</dd> + <dt>{{domxref("Event.eventPhase")}} {{readonlyinline}}</dt> + <dd>イベントの流れのうちどの段階が処理されているかを示します。</dd> + <dt>{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>イベントの明確な最初のターゲット (Mozilla 特有)。</dd> + <dt>{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}</dt> + <dd>イベントの再ターゲット前の最初のターゲット (Mozilla 特有)。</dd> + <dt>{{domxref("Event.returnValue")}}</dt> + <dd>Internet Explorer によって導入された歴史的なプロパティで、既存のサイトが動作し続けることを保証するために結果的に DOM 仕様書に導入されたものです。理想的には、 {{domxref("Event.preventDefault()")}} および {{domxref("Event.defaultPrevented")}} を代わりに使用してみるべきですが、選択次第では <code>returnValue</code> を使用することができます。</dd> + <dt>{{domxref("Event.srcElement")}} {{non-standard_inline}}</dt> + <dd>{{domxref("Event.target")}} の、(古いバージョンの Microsoft Internet Explorer 由来の) 標準外の別名であり、ウェブの互換性の目的で一部の他のブラウザーでも対応が始められています。</dd> + <dt>{{domxref("Event.target")}} {{readonlyinline}}</dt> + <dd>イベントが最初に送出されたターゲットへの参照。</dd> + <dt>{{domxref("Event.timeStamp")}} {{readonlyinline}}</dt> + <dd>イベントが生成された時刻をミリ秒単位で示します。仕様書ではこの値をエポックから経過した時間としていますが、実際のブラウザの定義は異なります。また、値を {{domxref("DOMHighResTimeStamp")}} に変更する作業が進行中です。</dd> + <dt>{{domxref("Event.type")}} {{readonlyinline}}</dt> + <dd>イベントの名前 (大文字小文字を区別しません)。</dd> + <dt>{{domxref("Event.isTrusted")}} {{readonlyinline}}</dt> + <dd>イベントがブラウザーによって開始されたか (たとえばユーザークリックの後)、または、スクリプトによって開始されたか (<a href="/ja/docs/DOM/event.initEvent">event.initEvent</a> のようなイベントを作るメソッドの使用) どうかを示します。</dd> +</dl> + +<h3 id="Obsolete_properties" name="Obsolete_properties">廃止されたプロパティ</h3> + +<dl> + <dt>{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}</dt> + <dd>{{jsxref("Boolean")}} で、指定されたイベントが標準 DOM の中のシャドウルートを通してバブルするかどうかを示します。このプロパティは {{domxref("Event.composed", "composed")}} に改名されました。</dd> +</dl> + +<h2 id="Methods" name="Methods">メソッド</h2> + +<dl> + <dt>{{domxref("Event.createEvent()")}} {{deprecated_inline}}</dt> + <dd> + <p>新しいイベントを作成し、これはその後で <code>initEvent()</code> メソッドを呼び出すことで初期化する必要があります。</p> + </dd> + <dt>{{domxref("Event.composedPath()")}}</dt> + <dd>(リスナーが呼び出されるオブジェクトへの) イベントのパスを返します。これはシャドウルートが {{domxref("ShadowRoot.mode")}} が閉じた状態で作成されたシャドウツリーのノードを含みません。</dd> +</dl> + +<dl> + <dt>{{domxref("Event.initEvent()")}} {{deprecated_inline}}</dt> + <dd>生成されたイベントの値を初期化します。イベントがすでにディスパッチされている場合は、何も行いません。</dd> + <dt>{{domxref("Event.preventDefault()")}}</dt> + <dd>イベントをキャンセルします (キャンセル可能な場合のみ)。</dd> + <dt>{{domxref("Event.stopImmediatePropagation()")}}</dt> + <dd>この特定のイベントのために、他のいかなるリスナーも呼び出されません。同じ要素に付けられたリスナーも、後で横断される(たとえばキャプチャー段階の) 要素に付けられたリスナーも呼び出されません。</dd> + <dt>{{domxref("Event.stopPropagation()")}}</dt> + <dd>これ以上イベントが 伝播 (propagation) するのを停止します。</dd> +</dl> + +<h3 id="Obsolete_methods" name="Obsolete_methods">廃止されたメソッド</h3> + +<dl> + <dt>{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}</dt> + <dd>標準外です。{{domxref("Event.defaultPrevented")}} の値を返します。代わりに {{domxref("Event.defaultPrevented")}} を使用してください。</dd> + <dt>{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>イベントが 浮上 (bubble up) しないようにします。廃止されたので、代わりに {{domxref("event.stopPropagation")}} を使ってください。</dd> + <dt>{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}</dt> + <dd>廃止されたので、{{domxref("event.stopPropagation")}} を使ってください。</dd> +</dl> + +<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('DOM WHATWG', '#interface-event', 'Event')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザーの対応</h2> + +<p class="hidden">このページの互換性一覧表は構造化データから生成されています。データに協力していただけるのであれば、 <a class="external" href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a> をチェックアウトしてプルリクエストを送信してください。</p> + +<p>{{Compat("api.Event")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>利用できるイベントのタイプ: <a href="/ja/docs/Web/Reference/Events">イベントリファレンス</a></li> + <li><a href="/ja/docs/Web/API/Event/Comparison_of_Event_Targets">イベントターゲットの比較</a> (target vs currentTarget vs relatedTarget vs originalTarget)</li> + <li><a href="/ja/docs/Web/Guide/DOM/Events/Creating_and_triggering_events">カスタムイベントの作成と発火</a></li> + <li>Firefox アドオン開発者向け: + <ul> + <li><a href="/ja/docs/Listening_to_events_in_Firefox_extensions">Listening to events in Firefox extensions</a></li> + <li><a href="/ja/docs/Listening_to_events_on_all_tabs">Listening to events on all tabs</a></li> + </ul> + </li> +</ul> diff --git a/files/ja/web/api/event/initevent/index.html b/files/ja/web/api/event/initevent/index.html new file mode 100644 index 0000000000..30c357e677 --- /dev/null +++ b/files/ja/web/api/event/initevent/index.html @@ -0,0 +1,51 @@ +--- +title: event.initEvent +slug: Web/API/Event/initEvent +tags: + - DOM + - Gecko +translation_of: Web/API/Event/initEvent +--- +<p>{{ ApiRef() }}{{deprecated_header}}</p> + +<h3 id=".E6.A6.82.E8.A6.81" name=".E6.A6.82.E8.A6.81">概要</h3> + +<p><code>initEvent</code> メソッドは <a href="ja/DOM/document.createEvent">document.createEvent</a> によって作成された <a href="ja/DOM/event">event</a> の値を初期化するために使われます。</p> + +<div class="note"> +<p><strong>このメソッドは廃止されているため、使用しないでください。</strong></p> + +代わりに、{{domxref("Event.Event", "Event()")}}のような特定のイベントコンストラクターを使用します。 <a href="/ja/docs/Web/Guide/Events/Creating_and_triggering_events">イベントの作成と起動</a>のページに、これらの使用方法の詳細が記載されています。 +</div> + +<h3 id=".E6.A7.8B.E6.96.87" name=".E6.A7.8B.E6.96.87">構文</h3> + +<pre class="eval"><em>event</em>.initEvent(<em>type</em>,<em>bubbles</em>,<em>cancelable</em>) +</pre> + +<dl> + <dt><code>type</code></dt> + <dd>イベントの種類。</dd> + <dt><code>bubbles</code></dt> + <dd>イベントチェーンを通じてイベントを浮上させるかどうかを示す真偽値 (<a href="bubbles">bubbles</a> 参照)。</dd> + <dt><code>cancelable</code></dt> + <dd>イベントがキャンセル可能かどうかを示す真偽値 (<a href="cancelable">cancelable</a> 参照)。</dd> +</dl> + +<h3 id=".E4.BE.8B" name=".E4.BE.8B">例</h3> + +<pre class="eval">// 浮上し、キャンセル不可能なクリックイベントを作成 +event.initEvent("click", true, false); +</pre> + +<h3 id=".E6.B3.A8.E6.84.8F.E7.82.B9" name=".E6.B3.A8.E6.84.8F.E7.82.B9">注意点</h3> + +<p>この方法で初期化されるイベントは、<a href="ja/DOM/document.createEvent">document.createEvent</a> メソッドで作成されたものでなければなりません。<code>initEvent</code> によるイベントの設定は、イベントを <a href="ja/DOM/element.dispatchEvent">割り当てる</a> 前に呼び出す必要があります。</p> + +<h3 id=".E4.BB.95.E6.A7.98.E6.9B.B8" name=".E4.BB.95.E6.A7.98.E6.9B.B8">仕様書</h3> + +<p><a class="external" href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-Event-initEvent">DOM Level 2 Events: Event.initEvent</a></p> + +<div class="noinclude"></div> + +<p>{{ languages( { "en": "en/DOM/event.initEvent", "es": "es/DOM/event.initEvent", "fr": "fr/DOM/event.initEvent", "pl": "pl/DOM/event.initEvent" } ) }}</p> diff --git a/files/ja/web/api/event/preventdefault/index.html b/files/ja/web/api/event/preventdefault/index.html new file mode 100644 index 0000000000..55a6ecff32 --- /dev/null +++ b/files/ja/web/api/event/preventdefault/index.html @@ -0,0 +1,166 @@ +--- +title: Event.preventDefault() +slug: Web/API/Event/preventDefault +tags: + - API + - DOM + - Event + - Method + - Reference + - イベント + - メソッド +translation_of: Web/API/Event/preventDefault +--- +<div>{{apiref("DOM")}}</div> + +<p><span class="seoSummary">{{domxref("Event")}} インターフェースの <strong><code>preventDefault()</code></strong> メソッドは、{{Glossary("user agent", "ユーザーエージェント")}}に、イベントが明示的に処理されない場合にその既定のアクションを通常どおりに行うべきではないことを伝えます。</span>このイベントは通常、イベントリスナーの1つが {{domxref("Event.stopPropagation", "stopPropagation()")}} または {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} を呼び出し、いずれかが一度に伝播を終了しない限り、伝播し続けます。</p> + +<p>以下にある通り、<code><strong>preventDefault()</strong></code> をキャンセル不可のイベントのために呼び出すと、例えば {{domxref("EventTarget.dispatchEvent()")}} を<code>cancelable: true</code> の指定なく呼び出した場合、効果がありません。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>event</em>.preventDefault(); +</pre> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="Blocking_default_click_handling" name="Blocking_default_click_handling">既定のクリック処理のブロック</h3> + +<p>チェックボックスのクリック時、既定の動作ではチェックボックスが切り替わります。この既定の動作を止める方法を以下に示します。</p> + +<h4 id="JavaScript">JavaScript</h4> + +<pre class="brush: js notranslate">document.querySelector("#id-checkbox").addEventListener("click", function(event) { + document.getElementById("output-box").innerHTML += "Sorry! <code>preventDefault()</code> won't let you check this!<br>"; + event.preventDefault(); +}, false);</pre> + +<h4 id="HTML">HTML</h4> + +<pre class="brush: html notranslate"><p>Please click on the checkbox control.</p> + +<form> + <label for="id-checkbox">Checkbox:</label> + <input type="checkbox" id="id-checkbox"/> +</form> + +<div id="output-box"></div></pre> + +<h4 id="Result" name="Result">結果</h4> + +<p>{{EmbedLiveSample("Blocking_default_click_handling")}}</p> + +<h3 id="Stopping_keystrokes_from_reaching_an_edit_field" name="Stopping_keystrokes_from_reaching_an_edit_field">キーストロークが編集フィールドに到達するのを止める</h3> + +<p>次の例は無効なテキスト入力が入力フィールドに到達するのを <code>preventDefault()</code> で止める方法を示しています。今日では、<a href="/ja/docs/Learn/HTML/Forms/Form_validation">ネイティブの HTML フォーム検証</a>を代わりに使用する必要があります。</p> + +<h4 id="HTML_2">HTML</h4> + +<p>こちらがフォームです。</p> + +<pre class="brush: html notranslate"><div class="container"> + <p>Please enter your name using lowercase letters only.</p> + + <form> + <input type="text" id="my-textbox"> + </form> +</div></pre> + +<h4 id="CSS">CSS</h4> + +<p>ユーザが無効なキーを押したときに描画する警告ボックスには、CSS を少し使用します。</p> + +<pre class="brush: css notranslate">.warning { + border: 2px solid #f39389; + border-radius: 2px; + padding: 10px; + position: absolute; + background-color: #fbd8d4; + color: #3b3c40; +}</pre> + +<h4 id="JavaScript_2">JavaScript</h4> + +<p>そして、こちらがその仕事を行う JavaScript コードです。まず、{{domxref("Element/keypress_event", "keypress")}} イベントを待ち受けします。</p> + +<pre class="brush: js notranslate">var myTextbox = document.getElementById('my-textbox'); +myTextbox.addEventListener('keypress', checkName, false); +</pre> + +<p><code>checkName()</code> 関数は押されたキーを調べ、それを許可するかどうかを決定します。</p> + +<pre class="brush: js notranslate">function checkName(evt) { + var charCode = evt.charCode; + if (charCode != 0) { + if (charCode < 97 || charCode > 122) { + evt.preventDefault(); + displayWarning( + "Please use lowercase letters only." + + "\n" + "charCode: " + charCode + "\n" + ); + } + } +} +</pre> + +<p><code>displayWarning()</code> 関数は問題の通知を表示します。これはエレガントな機能ではありませんが、この例の目的のために仕事をしています:</p> + +<pre class="brush: js notranslate">var warningTimeout; +var warningBox = document.createElement("div"); +warningBox.className = "warning"; + +function displayWarning(msg) { + warningBox.innerHTML = msg; + + if (document.body.contains(warningBox)) { + window.clearTimeout(warningTimeout); + } else { + // insert warningBox after myTextbox + myTextbox.parentNode.insertBefore(warningBox, myTextbox.nextSibling); + } + + warningTimeout = window.setTimeout(function() { + warningBox.parentNode.removeChild(warningBox); + warningTimeout = -1; + }, 2000); +}</pre> + +<h4 id="結果">結果</h4> + +<p>{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}</p> + +<h2 id="Notes" name="Notes">注記</h2> + +<p>イベントフローのいずれかの段階でイベントをキャンセルする途中で <code>preventDefault()</code> を呼び出すと、通常はブラウザの実装によって処理される既定のアクションが動作しなくなり、結果としてイベントが発生しなくなります。</p> + +<p>イベントがキャンセル可能かどうかは {{domxref("event.cancelable")}} を使って確認できます。キャンセル不可能なイベントに対して <code>preventDefault()</code> を呼び出しても効果はありません。</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('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}</td> + <td>{{ Spec2('DOM2 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.Event.preventDefault")}}</p> diff --git a/files/ja/web/api/event/stopimmediatepropagation/index.html b/files/ja/web/api/event/stopimmediatepropagation/index.html new file mode 100644 index 0000000000..e7aebaff2b --- /dev/null +++ b/files/ja/web/api/event/stopimmediatepropagation/index.html @@ -0,0 +1,95 @@ +--- +title: Event.stopImmediatePropagation() +slug: Web/API/Event/stopImmediatePropagation +translation_of: Web/API/Event/stopImmediatePropagation +--- +<div>{{APIRef("DOM")}}</div> + +<p>同じイベントを受け取る他のリスナーの呼び出しを防ぎます。</p> + +<h2 id="構文">構文</h2> + +<pre class="eval"><em>event</em>.stopImmediatePropagation(); +</pre> + +<h2 id="注記">注記</h2> + +<p>複数のリスナーが同じ種類のイベントの同じ要素に追加されていた場合、リスナーは追加された順に順番に呼び出されます。けれど、呼び出しの途中で <code>event.stopImmediatePropagation()</code> が呼ばれた場合には、残りのリスナーは呼ばれなくなります。</p> + +<h2 id="仕様">仕様</h2> + +<table class="standard-table"> + <thead> + <tr> + <th scope="col">Specification</th> + <th scope="col">Status</th> + <th scope="col">Comment</th> + </tr> + </thead> + <tbody> + <tr> + <td>{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td> + <td>{{Spec2('DOM WHATWG')}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName('DOM4', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}</td> + <td>{{Spec2('DOM4')}}</td> + <td>Initial definition</td> + </tr> + </tbody> +</table> + +<h2 id="ブラウザー互換性">ブラウザー互換性</h2> + +<p>{{CompatibilityTable}}</p> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatChrome("6.0")}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatGeckoDesktop("10.0")}}</td> + <td>{{CompatIE(9.0)}}</td> + <td>{{CompatOpera("15.0")}}</td> + <td>{{CompatSafari("5.0")}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>Feature</th> + <th>Android</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + </tr> + <tr> + <td>Basic support</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> diff --git a/files/ja/web/api/event/stoppropagation/index.html b/files/ja/web/api/event/stoppropagation/index.html new file mode 100644 index 0000000000..65db268179 --- /dev/null +++ b/files/ja/web/api/event/stoppropagation/index.html @@ -0,0 +1,73 @@ +--- +title: Event.stopPropagation() +slug: Web/API/Event/stopPropagation +tags: + - API + - DOM + - Event + - Method + - Propagation + - Reference + - actions + - default + - stopPropagation +translation_of: Web/API/Event/stopPropagation +--- +<div>{{APIRef("DOM")}}</div> + +<p><strong><code>stopPropagation()</code></strong>は {{domxref("Event")}} インターフェイスのメソッドで、現在のイベントのキャプチャリングまたはバブリングの過程におけるこれ以上の伝播を抑止します。ただし、デフォルトの動作の発生を防ぐことはできません。例えば、リンクのクリックはまだ処理されています。これらの動作を停止したい場合は、{{domxref("Event.preventDefault", "preventDefault()")}} メソッドを参照してください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><em>event</em>.stopPropagation();</pre> + +<h3 id="Parameters" name="Parameters">引数</h3> + +<p>なし</p> + +<h3 id="Return_value" name="Return_value">戻り値</h3> + +<p><code>undefined</code></p> + +<h2 id="Examples" name="Examples">例</h2> + +<p>このメソッドと DOM におけるイベントの伝播のより詳しい例については、<a href="/ja/docs/Web/API/Document_Object_Model/Examples#Example_5.3A_Event_Propagation">イベントの伝播の例 5</a> を参照してください</p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様書</th> + <th>策定状況</th> + <th>コメント</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + + + +<p>{{Compat("api.Event.stopPropagation")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li><a href="http://www.w3.org/TR/DOM-Level-2-Events/events.html#Events-flow-capture">DOM specification</a> のイベントフローの説明を参照してください。(<a href="http://www.w3.org/TR/DOM-Level-3-Events/#event-flow">DOM Level 3 Events draft</a> には図解があります。)</li> +</ul> diff --git a/files/ja/web/api/event/target/index.html b/files/ja/web/api/event/target/index.html new file mode 100644 index 0000000000..d9f91fe452 --- /dev/null +++ b/files/ja/web/api/event/target/index.html @@ -0,0 +1,105 @@ +--- +title: Event.target +slug: Web/API/Event/target +tags: + - API + - DOM + - Event + - Property + - Reference + - delegation + - target +translation_of: Web/API/Event/target +--- +<p>{{ApiRef("DOM")}}</p> + +<p>イベントを発生させたオブジェクトへの参照です。 イベントハンドラーがバブリング、またはキャプチャフェーズの間に呼び出されたとき、{{domxref("event.currentTarget")}} とは異なります。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox">theTarget = event.target</pre> + +<h2 id="Example" name="Example">例</h2> + +<p><code>event.target</code> プロパティは、<strong>イベントデリゲーション</strong>を実装するために使用できます。</p> + +<pre><code>// リストを作ります +var ul = document.createElement('ul'); +document.body.appendChild(ul); + +var li1 = document.createElement('li'); +var li2 = document.createElement('li'); +ul.appendChild(li1); +ul.appendChild(li2); + +function hide(e){ + // e.target はクリックされた <li> 要素を参照します + // これはコンテキスト内の親 <ul> を参照する e.currentTarget とは異なります + e.target.style.visibility = 'hidden'; +} + +// リストにリスナーを接続します +// <li> がクリックされた時に発火します +ul.addEventListener('click', hide, false);</code> + +</pre> + +<p> </p> + +<h2 id="Specifications" name="Specifications">仕様</h2> + +<p> </p> + +<table class="standard-table"> + <tbody> + <tr> + <th>仕様</th> + <th>状態</th> + <th>コメント</th> + </tr> + <tr> + <td>{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-target", "Event.target")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td> </td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>初回定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<p> </p> + +<div class="hidden"> +<p>The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out <a href="https://github.com/mdn/browser-compat-data">https://github.com/mdn/browser-compat-data</a>and send us a pull request.</p> +</div> + +<p>{{Compat("api.Event.target")}}</p> + +<p> </p> + +<h2 id="Compatibility_notes" name="Compatibility_notes">互換性のための注記</h2> + +<p>IE 6-8 では、イベントモデルが異なります。イベントリスナーは、非標準の {{domxref('EventTarget.attachEvent')}} メソッドでアタッチされます。このモデルでは、イベントオブジェクトは <code>target</code> プロパティの代わりに、{{domxref('Event.srcElement')}} プロパティを持っており、意味的には <code>event.target</code> と同じです。</p> + +<pre class="brush: js">function hide(e) { + // IE6-8 をサポート + var target = e.target || e.srcElement; + target.style.visibility = 'hidden'; +} +</pre> + +<h2 id="See_also" name="See_also">関連項目</h2> + +<ul> + <li><a href="/ja/docs/Web/API/Event/Comparison_of_Event_Targets">イベントターゲットの比較</a></li> +</ul> diff --git a/files/ja/web/api/event/timestamp/index.html b/files/ja/web/api/event/timestamp/index.html new file mode 100644 index 0000000000..d11ebc1c9b --- /dev/null +++ b/files/ja/web/api/event/timestamp/index.html @@ -0,0 +1,141 @@ +--- +title: event.timeStamp +slug: Web/API/Event/timeStamp +tags: + - API + - DOM + - Event + - Property + - Reference + - timeStamp +translation_of: Web/API/Event/timeStamp +--- +<div>{{APIRef("DOM")}}</div> + +<p>イベントが発生した時刻 (ミリ秒単位) を表します。</p> + +<div class="note"> +<p><strong>注記:</strong> このプロパティは、イベントシステムが個々のイベント向けにサポートしている場合に限り動作します。</p> +</div> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate"><var>event</var>.timeStamp +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>この値は、現在のドキュメントの生成からイベントが作成された時点までの時間(ミリ秒単位)です。</p> + +<p>新しい実装では、5 マイクロ秒(0.005 ms = 0.005 ミリ秒)精度の {{domxref("DOMHighResTimeStamp")}} です。古い実装では、1 ミリ秒精度の {{domxref("DOMTimeStamp")}} です。</p> + +<h2 id="Example" name="Example">例</h2> + +<h3 id="HTML_content" name="HTML_content">HTML コンテンツ</h3> + +<pre class="brush: html notranslate"><p> + この iframe にフォーカスを設定していずれかのキーを押下すると、 + keypress イベントの現在のタイムスタンプを取得します。 +</p> +<p>タイムスタンプ: <span id="time">-</span></p></pre> + +<h3 id="JavaScript_content" name="JavaScript_content">JavaScript コンテンツ</h3> + +<pre class="brush: js notranslate">function getTime(event) { + var time = document.getElementById("time"); + time.firstChild.nodeValue = event.timeStamp; +} +document.body.addEventListener("keypress", getTime);</pre> + +<h3 id="Result" name="Result">表示結果</h3> + +<p>{{EmbedLiveSample("Example", "100%", 100)}}</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("DOM WHATWG", "#dom-event-timestamp", "Event.timeStamp")}}</td> + <td>{{Spec2("DOM WHATWG")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM4", "#dom-event-timestamp", "Event.timeStamp")}}</td> + <td>{{Spec2("DOM4")}}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName("DOM2 Events", "#Events-Event-timeStamp", "Event.timeStamp")}}</td> + <td>{{Spec2("DOM2 Events")}}</td> + <td>初期定義</td> + </tr> + </tbody> +</table> + +<h2 id="Browser_compatibility" name="Browser_compatibility">ブラウザー実装状況</h2> + +<div>{{CompatibilityTable}}</div> + +<div id="compat-desktop"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Chrome</th> + <th>Edge</th> + <th>Firefox (Gecko)</th> + <th>Internet Explorer</th> + <th>Opera</th> + <th>Safari (WebKit)</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatChrome(49.0)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatUnknown}}</td> + </tr> + </tbody> +</table> +</div> + +<div id="compat-mobile"> +<table class="compat-table"> + <tbody> + <tr> + <th>機能</th> + <th>Android</th> + <th>Android Webview</th> + <th>Edge</th> + <th>Firefox Mobile (Gecko)</th> + <th>IE Mobile</th> + <th>Opera Mobile</th> + <th>Safari Mobile</th> + <th>Android 版 Chrome</th> + </tr> + <tr> + <td>基本サポート</td> + <td>{{CompatNo}}</td> + <td>{{CompatChrome(49.0)}}<sup>[1]</sup></td> + <td>{{CompatVersionUnknown}}</td> + <td>{{CompatVersionUnknown}}<sup>[1]</sup></td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatUnknown}}</td> + <td>{{CompatChrome(49.0)}}</td> + </tr> + </tbody> +</table> +</div> + +<p>[1] Chrome 49 および Firefox 54 より、このプロパティが返す値はエポック時間 ({{domxref("DOMTimeStamp")}}) から高精度モノトニック時間 ({{domxref("DOMHighResTimeStamp")}}) に替わりました。</p> diff --git a/files/ja/web/api/event/type/index.html b/files/ja/web/api/event/type/index.html new file mode 100644 index 0000000000..256e19add2 --- /dev/null +++ b/files/ja/web/api/event/type/index.html @@ -0,0 +1,95 @@ +--- +title: Event.type +slug: Web/API/Event/type +tags: + - API + - DOM + - Event + - Property + - Read-only + - Reference + - プロパティ + - 読取専用 +translation_of: Web/API/Event/type +--- +<p>{{APIRef}}</p> + +<p><strong><code>type</code></strong> は {{domxref("Event")}} インターフェイスの読取専用プロパティで、イベントの種別を表す文字列を返します。イベントが構築されると設定され、この名前は <code>click</code>, <code>load</code>, <code>error</code> のような特定のイベントを参照するためによく使用されます。</p> + +<p>利用可能なイベント種別の一覧は、<a href="/ja/docs/Web/Events">イベントリファレンス</a>をご覧ください。</p> + +<h2 id="Syntax" name="Syntax">構文</h2> + +<pre class="syntaxbox notranslate">let eventType = <var>event</var>.type; +</pre> + +<h3 id="Value" name="Value">値</h3> + +<p>{{domxref("Event")}} の種別を表す {{domxref("DOMString")}}。</p> + +<h2 id="Example" name="Example">例</h2> + +<p>この例は、キーボードのキーを押すか、マウスボタンをクリックするとイベント種別をログに出力します。</p> + +<h3 id="HTML">HTML</h3> + +<pre class="brush: html notranslate"><p>キーを押すか、マウスをクリックしてください。</p> +<p id="log"></p></pre> + +<h3 id="JavaScript">JavaScript</h3> + +<pre class="brush: js notranslate">function getEventType(event) { + const log = document.getElementById('log'); + log.innerText = event.type + '\n' + log.innerText; +} + +// Keyboard events +document.addEventListener('keydown', getEventType, false); // first +document.addEventListener('keypress', getEventType, false); // second +document.addEventListener('keyup', getEventType, false); // third + +// Mouse events +document.addEventListener('mousedown', getEventType, false); // first +document.addEventListener('mouseup', getEventType, false); // second +document.addEventListener('click', getEventType, false); // third</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('DOM WHATWG', '#dom-event-type', 'Event.type')}}</td> + <td>{{ Spec2('DOM WHATWG') }}</td> + <td></td> + </tr> + <tr> + <td>{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}</td> + <td>{{ Spec2('DOM2 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.Event.type")}}</p> + +<h2 id="See_also" name="See_also">関連情報</h2> + +<ul> + <li>{{ domxref("EventTarget.addEventListener()") }}</li> + <li>{{ domxref("EventTarget.removeEventListener()") }}</li> +</ul> |