From 33058f2b292b3a581333bdfb21b8f671898c5060 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:40:17 -0500 Subject: initial commit --- files/ja/web/api/event/bubbles/index.html | 90 ++++++++++ files/ja/web/api/event/button/index.html | 59 ++++++ files/ja/web/api/event/cancelable/index.html | 89 +++++++++ files/ja/web/api/event/cancelbubble/index.html | 89 +++++++++ files/ja/web/api/event/createevent/index.html | 31 ++++ files/ja/web/api/event/currenttarget/index.html | 105 +++++++++++ files/ja/web/api/event/defaultprevented/index.html | 88 +++++++++ files/ja/web/api/event/event/index.html | 78 ++++++++ files/ja/web/api/event/index.html | 200 +++++++++++++++++++++ files/ja/web/api/event/initevent/index.html | 51 ++++++ files/ja/web/api/event/preventdefault/index.html | 166 +++++++++++++++++ .../api/event/stopimmediatepropagation/index.html | 95 ++++++++++ files/ja/web/api/event/stoppropagation/index.html | 73 ++++++++ files/ja/web/api/event/target/index.html | 105 +++++++++++ files/ja/web/api/event/timestamp/index.html | 141 +++++++++++++++ files/ja/web/api/event/type/index.html | 95 ++++++++++ 16 files changed, 1555 insertions(+) create mode 100644 files/ja/web/api/event/bubbles/index.html create mode 100644 files/ja/web/api/event/button/index.html create mode 100644 files/ja/web/api/event/cancelable/index.html create mode 100644 files/ja/web/api/event/cancelbubble/index.html create mode 100644 files/ja/web/api/event/createevent/index.html create mode 100644 files/ja/web/api/event/currenttarget/index.html create mode 100644 files/ja/web/api/event/defaultprevented/index.html create mode 100644 files/ja/web/api/event/event/index.html create mode 100644 files/ja/web/api/event/index.html create mode 100644 files/ja/web/api/event/initevent/index.html create mode 100644 files/ja/web/api/event/preventdefault/index.html create mode 100644 files/ja/web/api/event/stopimmediatepropagation/index.html create mode 100644 files/ja/web/api/event/stoppropagation/index.html create mode 100644 files/ja/web/api/event/target/index.html create mode 100644 files/ja/web/api/event/timestamp/index.html create mode 100644 files/ja/web/api/event/type/index.html (limited to 'files/ja/web/api/event') 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 +--- +
{{ ApiRef("DOM") }}
+ +

bubbles は {{domxref("Event")}} インターフェイスの読み取り専用プロパティで、イベントが DOM をバブリングするかしないかを示します。

+ +
+

メモ: バブリングについての詳細は、イベントのバブリングとキャプチャを参照してください。

+
+ +

構文

+ +
var doesItBubble = event.bubbles;
+ +

値

+ +

bool はtrue か falseであり、イベントがバブリングするものかどうかを示しています。

+ +

例

+ +
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);
+}
+
+ +
+

メモ: 一部のイベントだけがバブリングします。バブリングするイベントでは、このプロパティが true に設定されています。イベントがバブリングするかどうかを確認するためにこのプロパティを使用することができます。

+
+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-event-bubbles', 'Event.bubbles')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM2 Events', '#Events-Event-canBubble', 'Event.bubbles')}}{{ Spec2('DOM2 Events') }}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Event.bubbles")}}

+ +

関連情報

+ + 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 +--- +

{{ ApiRef() }}

+

Summary

+

イベントを発生させたマウスのボタンを示しています。

+

Syntax

+
var buttonCode = event.button;
+
+

state を変えたボタンを示す整数値を返します。

+ +

ボタンの順序はどのようにポインティングデバイスが設定されているかによります。

+

Example

+
<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>
+
+
+

Notes

+

マウスのクリックはしばしばUIによって横取りされるため、ある状況では普通のクリック（通常は左クリック）でないマウスのクリックを検出することが普通のクリックよりも難しいかもしれません。

+

ユーザーはポインティングデバイスのボタンの設定を変更する可能性があり、たといこのイベントの button プロパティが 0 であったとしても、それは物理的にポインティングデバイスの最も左に存在するボタンによるものではないかもしれません。しかし、そんな場合にも、標準的なボタン配置における左クリックと同様の動作をするべきであるとされています。

+

Specification

+

DOM 2 Events Specification: button

+
+  
+

{{ languages( { "en": "en/DOM/event.button", "pl": "pl/DOM/event.button" } ) }}

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 +--- +
{{ ApiRef("DOM") }}
+ +

The cancelable は {{domxref("Event")}} インターフェイスの読み取り専用プロパティで、イベントがキャンセル可能かどうか、イベントが発生しないように抑止することができるかを示します。イベントがキャンセルできない場合、 cancelable プロパティは false となり、イベントが発生することをイベントリスナーが抑止することができないことを示します。

+ +

複数の種類のイベントを扱うイベントリスナーは、 {{domxref("event.preventDefault", "preventDefault()")}} メソッドを呼び出す前に cancelable をチェックしたほうが良いかもしれません。

+ +

ブラウザーネイティブのイベントのうち、キャンセル可能なもののほとんどは、ユーザーのページとの対話の結果から発生したものです。 {{domxref("Element/click_event", "click")}}, {{domxref("Document/scroll_event", "scroll")}}, {{domxref("Window/beforeunload_event", "beforeunload")}} の各イベントをキャンセルすると、それぞれユーザーが何かをクリックすること、ページをスクロールすること、他のページに移動することをそれぞれ抑止することができます。

+ +

その他の JavaScript によって作成されたカスタムイベントは、作成時にキャンセル可能であるかどうかを制御します。

+ +

構文

+ +
bool = event.cancelable;
+
+ +

値

+ +

結果は {{domxref("Boolean")}} で、イベントがキャンセル可能であれば true です。

+ +

例

+ +

例えば、ブラウザーベンダーは {{domxref("Document/wheel_event", "wheel")}} イベントが、最初にリスナーが呼び出されたときのみキャンセル可能にしようと提案しています。 — その後の wheel イベントはキャンセルできません。

+ +
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);
+
+ +

メモ

+ +

イベントがキャンセル可能か不可能かは、イベントが初期化されたときに決定されます。

+ +

イベントをキャンセルするには、イベントの {{domxref("event.preventDefault", "preventDefault()")}} メソッドを呼び出してください。これはイベントに関連付けられた既定の動作を実行する実装を維持します。

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-event-cancelable', 'Event.cancelable')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM2 Events', '#Events-Event-canCancel', 'Event.cancelable')}}{{ Spec2('DOM2 Events') }}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Event.cancelable")}}

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 +--- +

{{APIRef("DOM Events")}}

+ +

The Event.cancelBubble property は過去の経緯上、{{domxref("Event.stopPropagation()")}}の別名です。トリガーとしたevent handlerから終了する前に、これにtrueに設定すると、発生イベントを親要素に伝播(propagation)させません。

+ +

文法

+ +
event.cancelBubble = bool;
+var bool = event.cancelBubble;
+ +

使用例

+ +
elem.onclick = function(e) {
+ // do cool things here
+  e.cancelBubble = true;
+}
+ +

詳細情報

+ + + + + + + + + + + + + + +
詳細ステータス備考
{{SpecName('DOM WHATWG', '#dom-event-cancelbubble', 'cancellBubble')}}{{Spec2('DOM WHATWG')}} 
+ +

ブラウザ 互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
特徴ChromeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(53)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
特徴AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatVersionUnknown}}{{CompatGeckoDesktop(53)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}
+
+ +

[1] Firefox 52以前で、このpropertyは{{domxref("UIEvent")}} interfaceで定義されていました。 さらなる詳細はこちら {{bug(1298970)}}を見てください。

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 +--- +

{{APIRef("DOM")}}

+ +

新規イベントを生成します。生成されたイベントは初期化処理が必須です。

+ +

構文

+ +
document.createEvent(type)
+ +
+
type
+
生成するイベントタイプ名
+
+ +

このメソッドは指定されたイベントタイプの新規DOM {{ domxref("Event") }} オブジェクトを返り値として返します。

+ +

オブジェクトには初期化処理が必須です。

+ +

例

+ +
var newEvent = document.createEvent("UIEvents");
+ +

仕様書

+ + 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 +--- +

{{APIRef("DOM")}}

+ +

イベントは DOM を横断するので、イベントの現在のターゲットを識別します。イベントが発生した要素を特定する event.target とは対照的に、常にイベントハンドラがアタッチされた要素を参照します。

+ +

例

+ +

event.currentTarget は、同じイベントハンドラを複数の要素にアタッチしているときに使用すると興味深いです。

+ +
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);
+}
+
+// 周辺をクリックすると段落が消えます。
+
+ +

仕様

+ + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("DOM2 Events", "#Events-Event-currentTarget", "Event.currentTarget")}}{{Spec2("DOM2 Events")}}Initial definition
+ +

ブラウザ実装状況

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + +
機能ChromeFirefox (Gecko)Internet ExplorerOperaSafari
基本サポート{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + +
機能AndroidFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
基本サポート{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
+ +

[1] Internet Explorer 6 から 8 では、イベントモデルが異なります。イベントリスナは非標準の element.attachEvent メソッドでアタッチされます。このモデルでは、event.currentTarget と同等の機能はなく、this はグローバルオブジェクトです。event.currentTarget 機能をエミュレートするための 1 つの解決策は、ハンドラを最初の引数として要素とともに Function.prototype.call を使用するハンドラを呼び出す関数でラップすることです。この方法であれば、 this は予想通りの値になります。

+ +

関連項目

+ +

Comparison of Event Targets

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 +--- +
{{ APIRef("DOM") }}
+ +

defaultPrevented は {{domxref("Event")}} インターフェイスの読み取り専用プロパティで、 {{jsxref("Boolean")}} で {{ domxref("Event.preventDefault()") }} の呼び出しがイベントをキャンセルしたかどうかを示す値を返します。

+ +
メモ: 標準外かつ非推奨の getPreventDefault() メソッドの代わりに、これを使用してください (see {{ bug(691151) }})。
+ +

構文

+ +
var defaultWasPrevented = event.defaultPrevented;
+ +

値

+ +

{{jsxref("Boolean")}} で、 true は既定の{{glossary("user agent", "ユーザーエージェント")}}の操作が抑制されたことを、 false はそうではないことを表しています。

+ +

例

+ +

この例は2つの {{htmlElement("a")}} 要素のリンクを訪れる試みをログ出力します。 JavaScript は2番目のリンクの動作を抑制するために使用しています。

+ +

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>
+ +

JavaScript

+ +
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);
+ +

結果

+ +

{{EmbedLiveSample("Example")}}

+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-event-defaultprevented', 'Event.defaultPrevented()')}}{{ Spec2('DOM WHATWG') }}
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Event.defaultPrevented")}}

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 +--- +
{{APIRef("DOM")}}
+ +

Event() コンストラクターは、新しい {{domxref("Event")}} を生成します。

+ +

構文

+ +
new Event(typeArg[, eventInit]);
+ +

値

+ +
+
typeArg
+
{{domxref("DOMString")}} で、イベントの名前を表します。
+
eventInit {{optional_inline}}
+
EventInit 辞書で、以下のフィールドを持ちます。 +
    +
  • bubbles: {{jsxref("Boolean")}} で、イベントがバブリングするかどうかを示します。既定値は false です。
    • +
  • cancelable: {{jsxref("Boolean")}} で、イベントがキャンセル可能かどうかを示します。既定値は false です。
    • +
  • composed: {{jsxref("Boolean")}} で、イベントがシャドウルートの外のリスナーに伝わるかどうかを示します (詳しくは {{domxref("Event.composed")}} を参照してください)。既定値は false です。
    • +
+
+
+ +

例

+ +
// 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);
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG','#dom-event-event','Event()')}}{{Spec2('DOM WHATWG')}}初回定義
+ +

ブラウザーの互換性

+ + + +

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

+ +

関連情報

+ + 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 +--- +

{{APIRef("DOM")}}

+ +

Event インターフェイスは、DOM で発生するイベントを表します。ユーザーによって発生するイベント (マウスやキーボードのイベント) もありますし、API によって発生するイベント (アニメーションの実行が完了したことを示すイベントや、動画再生が一時停止したイベントなど) もあります。さまざまな型のイベントがあり、一部のイベントは基底の Event インターフェイスを基にした他のインターフェイスを使用します。Event 自体は、すべてのイベントで共通のプロパティやメソッドを持ちます。

+ +

Event を基にしたインターフェイス

+ +

以下のリストは Event インターフェイスを基にしたインターフェイスの一覧であり、 MDN API リファレンスの各ドキュメントにリンクしています。すべてのイベントインターフェイスは、名称の末尾が "Event" であることに留意してください。

+ +
+ +
+ +

コンストラクター

+ +
+
{{domxref("Event.Event", "Event()")}}
+
Event オブジェクトを生成して、呼び出し元に返します。
+
+ +

プロパティ

+ +
+
{{domxref("Event.bubbles")}} {{readonlyinline}}
+
イベントが DOM を通して浮上 (bubble up) するかを示す boolean 値です。
+
{{domxref("Event.cancelBubble")}}
+
{{domxref("Event.stopPropagation()")}} の歴史的な別名です。イベントハンドラーから戻る前に値 true を設定すると、イベントの伝播を抑制します。
+
{{domxref("Event.cancelable")}} {{readonlyinline}}
+
イベントがキャンセル可能かを示す boolean 値です。
+
{{domxref("Event.composed")}} {{ReadOnlyInline}}
+
shadow DOM と 通常の DOM の間の境界を越えてイベントが伝播できるかをを示す Boolean 値です。
+
{{domxref("Event.currentTarget")}} {{readonlyinline}}
+
イベントが現在登録されているターゲットへの参照。これは、現在イベントの送信先として予定されているオブジェクトです。これはリターゲティングによって、途中で変更できます。
+
{{domxref("Event.deepPath")}} {{non-standard_inline}}
+
イベントの伝播で通り抜けた DOM {{domxref("Node")}} の {{jsxref("Array")}} です。
+
{{domxref("Event.defaultPrevented")}} {{readonlyinline}}
+
{{domxref("event.preventDefault()")}} がイベントで呼ばれたかどうかを示します。
+
{{domxref("Event.eventPhase")}} {{readonlyinline}}
+
イベントの流れのうちどの段階が処理されているかを示します。
+
{{domxref("Event.explicitOriginalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
イベントの明確な最初のターゲット (Mozilla 特有)。
+
{{domxref("Event.originalTarget")}} {{non-standard_inline}} {{readonlyinline}}
+
イベントの再ターゲット前の最初のターゲット (Mozilla 特有)。
+
{{domxref("Event.returnValue")}}
+
Internet Explorer によって導入された歴史的なプロパティで、既存のサイトが動作し続けることを保証するために結果的に DOM 仕様書に導入されたものです。理想的には、 {{domxref("Event.preventDefault()")}} および {{domxref("Event.defaultPrevented")}} を代わりに使用してみるべきですが、選択次第では returnValue を使用することができます。
+
{{domxref("Event.srcElement")}} {{non-standard_inline}}
+
{{domxref("Event.target")}} の、(古いバージョンの Microsoft Internet Explorer 由来の) 標準外の別名であり、ウェブの互換性の目的で一部の他のブラウザーでも対応が始められています。
+
{{domxref("Event.target")}} {{readonlyinline}}
+
イベントが最初に送出されたターゲットへの参照。
+
{{domxref("Event.timeStamp")}} {{readonlyinline}}
+
イベントが生成された時刻をミリ秒単位で示します。仕様書ではこの値をエポックから経過した時間としていますが、実際のブラウザの定義は異なります。また、値を {{domxref("DOMHighResTimeStamp")}} に変更する作業が進行中です。
+
{{domxref("Event.type")}} {{readonlyinline}}
+
イベントの名前 (大文字小文字を区別しません)。
+
{{domxref("Event.isTrusted")}} {{readonlyinline}}
+
イベントがブラウザーによって開始されたか (たとえばユーザークリックの後)、または、スクリプトによって開始されたか (event.initEvent のようなイベントを作るメソッドの使用) どうかを示します。
+
+ +

廃止されたプロパティ

+ +
+
{{domxref("Event.scoped")}} {{readonlyinline}} {{obsolete_inline}}
+
{{jsxref("Boolean")}} で、指定されたイベントが標準 DOM の中のシャドウルートを通してバブルするかどうかを示します。このプロパティは {{domxref("Event.composed", "composed")}} に改名されました。
+
+ +

メソッド

+ +
+
{{domxref("Event.createEvent()")}} {{deprecated_inline}}
+
+

新しいイベントを作成し、これはその後で initEvent() メソッドを呼び出すことで初期化する必要があります。

+
+
{{domxref("Event.composedPath()")}}
+
(リスナーが呼び出されるオブジェクトへの) イベントのパスを返します。これはシャドウルートが {{domxref("ShadowRoot.mode")}} が閉じた状態で作成されたシャドウツリーのノードを含みません。
+
+ +
+
{{domxref("Event.initEvent()")}} {{deprecated_inline}}
+
生成されたイベントの値を初期化します。イベントがすでにディスパッチされている場合は、何も行いません。
+
{{domxref("Event.preventDefault()")}}
+
イベントをキャンセルします (キャンセル可能な場合のみ)。
+
{{domxref("Event.stopImmediatePropagation()")}}
+
この特定のイベントのために、他のいかなるリスナーも呼び出されません。同じ要素に付けられたリスナーも、後で横断される（たとえばキャプチャー段階の) 要素に付けられたリスナーも呼び出されません。
+
{{domxref("Event.stopPropagation()")}}
+
これ以上イベントが 伝播 (propagation) するのを停止します。
+
+ +

廃止されたメソッド

+ +
+
{{domxref("Event.getPreventDefault()")}} {{non-standard_inline}}
+
標準外です。{{domxref("Event.defaultPrevented")}} の値を返します。代わりに {{domxref("Event.defaultPrevented")}} を使用してください。
+
{{domxref("Event.preventBubble()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
イベントが 浮上 (bubble up) しないようにします。廃止されたので、代わりに {{domxref("event.stopPropagation")}} を使ってください。
+
{{domxref("Event.preventCapture()")}} {{non-standard_inline}} {{Obsolete_inline(24)}}
+
廃止されたので、{{domxref("event.stopPropagation")}} を使ってください。
+
+ +

仕様書

+ + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#interface-event', 'Event')}}{{Spec2('DOM WHATWG')}} 
+ +

ブラウザーの対応

+ + + +

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

+ +

関連情報

+ + 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 +--- +

{{ ApiRef() }}{{deprecated_header}}

+ +

概要

+ +

initEvent メソッドは document.createEvent によって作成された event の値を初期化するために使われます。

+ +
+

このメソッドは廃止されているため、使用しないでください。

+ +代わりに、{{domxref("Event.Event", "Event()")}}のような特定のイベントコンストラクターを使用します。 イベントの作成と起動のページに、これらの使用方法の詳細が記載されています。 +
+ +

構文

+ +
event.initEvent(type,bubbles,cancelable)
+
+ +
+
type
+
イベントの種類。
+
bubbles
+
イベントチェーンを通じてイベントを浮上させるかどうかを示す真偽値 (bubbles 参照)。
+
cancelable
+
イベントがキャンセル可能かどうかを示す真偽値 (cancelable 参照)。
+
+ +

例

+ +
// 浮上し、キャンセル不可能なクリックイベントを作成
+event.initEvent("click", true, false);
+
+ +

注意点

+ +

この方法で初期化されるイベントは、document.createEvent メソッドで作成されたものでなければなりません。initEvent によるイベントの設定は、イベントを 割り当てる 前に呼び出す必要があります。

+ +

仕様書

+ +

DOM Level 2 Events: Event.initEvent

+ +
+ +

{{ languages( { "en": "en/DOM/event.initEvent", "es": "es/DOM/event.initEvent", "fr": "fr/DOM/event.initEvent", "pl": "pl/DOM/event.initEvent" } ) }}

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 +--- +
{{apiref("DOM")}}
+ +

{{domxref("Event")}} インターフェースの preventDefault() メソッドは、{{Glossary("user agent", "ユーザーエージェント")}}に、イベントが明示的に処理されない場合にその既定のアクションを通常どおりに行うべきではないことを伝えます。このイベントは通常、イベントリスナーの1つが {{domxref("Event.stopPropagation", "stopPropagation()")}} または {{domxref("Event.stopImmediatePropagation", "stopImmediatePropagation()")}} を呼び出し、いずれかが一度に伝播を終了しない限り、伝播し続けます。

+ +

以下にある通り、preventDefault() をキャンセル不可のイベントのために呼び出すと、例えば {{domxref("EventTarget.dispatchEvent()")}} をcancelable: true の指定なく呼び出した場合、効果がありません。

+ +

構文

+ +
event.preventDefault();
+
+ +

例

+ +

既定のクリック処理のブロック

+ +

チェックボックスのクリック時、既定の動作ではチェックボックスが切り替わります。この既定の動作を止める方法を以下に示します。

+ +

JavaScript

+ +
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);
+ +

HTML

+ +
<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>
+ +

結果

+ +

{{EmbedLiveSample("Blocking_default_click_handling")}}

+ +

キーストロークが編集フィールドに到達するのを止める

+ +

次の例は無効なテキスト入力が入力フィールドに到達するのを preventDefault() で止める方法を示しています。今日では、ネイティブの HTML フォーム検証を代わりに使用する必要があります。

+ +

HTML

+ +

こちらがフォームです。

+ +
<div class="container">
+  <p>Please enter your name using lowercase letters only.</p>
+
+  <form>
+    <input type="text" id="my-textbox">
+  </form>
+</div>
+ +

CSS

+ +

ユーザが無効なキーを押したときに描画する警告ボックスには、CSS を少し使用します。

+ +
.warning {
+  border: 2px solid #f39389;
+  border-radius: 2px;
+  padding: 10px;
+  position: absolute;
+  background-color: #fbd8d4;
+  color: #3b3c40;
+}
+ +

JavaScript

+ +

そして、こちらがその仕事を行う JavaScript コードです。まず、{{domxref("Element/keypress_event", "keypress")}} イベントを待ち受けします。

+ +
var myTextbox = document.getElementById('my-textbox');
+myTextbox.addEventListener('keypress', checkName, false);
+
+ +

checkName() 関数は押されたキーを調べ、それを許可するかどうかを決定します。

+ +
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"
+      );
+    }
+  }
+}
+
+ +

displayWarning() 関数は問題の通知を表示します。これはエレガントな機能ではありませんが、この例の目的のために仕事をしています：

+ +
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);
+}
+ +

結果

+ +

{{ EmbedLiveSample('Stopping_keystrokes_from_reaching_an_edit_field', 600, 200) }}

+ +

注記

+ +

イベントフローのいずれかの段階でイベントをキャンセルする途中で preventDefault() を呼び出すと、通常はブラウザの実装によって処理される既定のアクションが動作しなくなり、結果としてイベントが発生しなくなります。

+ +

イベントがキャンセル可能かどうかは {{domxref("event.cancelable")}} を使って確認できます。キャンセル不可能なイベントに対して preventDefault() を呼び出しても効果はありません。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-event-preventdefault', 'Event.preventDefault()')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM2 Events', '#Events-Event-preventDefault', 'Event.preventDefault()')}}{{ Spec2('DOM2 Events') }}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Event.preventDefault")}}

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 +--- +
{{APIRef("DOM")}}
+ +

同じイベントを受け取る他のリスナーの呼び出しを防ぎます。

+ +

構文

+ +
event.stopImmediatePropagation();
+
+ +

注記

+ +

複数のリスナーが同じ種類のイベントの同じ要素に追加されていた場合、リスナーは追加された順に順番に呼び出されます。けれど、呼び出しの途中で event.stopImmediatePropagation() が呼ばれた場合には、残りのリスナーは呼ばれなくなります。

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + +
SpecificationStatusComment
{{SpecName('DOM WHATWG', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM WHATWG')}} 
{{SpecName('DOM4', '#dom-event-stopimmediatepropagation', 'Event.stopImmediatePropagation()')}}{{Spec2('DOM4')}}Initial definition
+ +

ブラウザー互換性

+ +

{{CompatibilityTable}}

+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari
Basic support{{CompatChrome("6.0")}}{{CompatVersionUnknown}}{{CompatGeckoDesktop("10.0")}}{{CompatIE(9.0)}}{{CompatOpera("15.0")}}{{CompatSafari("5.0")}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + +
FeatureAndroidEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari Mobile
Basic support{{CompatUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}
+
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 +--- +
{{APIRef("DOM")}}
+ +

stopPropagation()は {{domxref("Event")}} インターフェイスのメソッドで、現在のイベントのキャプチャリングまたはバブリングの過程におけるこれ以上の伝播を抑止します。ただし、デフォルトの動作の発生を防ぐことはできません。例えば、リンクのクリックはまだ処理されています。これらの動作を停止したい場合は、{{domxref("Event.preventDefault", "preventDefault()")}} メソッドを参照してください。

+ +

構文

+ +
event.stopPropagation();
+ +

引数

+ +

なし

+ +

戻り値

+ +

undefined

+ +

例

+ +

このメソッドと DOM におけるイベントの伝播のより詳しい例については、イベントの伝播の例 5 を参照してください

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("DOM WHATWG", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-stoppropagation", "Event.stopPropagation()")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-stopPropagation", "Event.stopPropagation()")}}{{Spec2("DOM2 Events")}}初期定義
+ +

ブラウザー実装状況

+ + + +

{{Compat("api.Event.stopPropagation")}}

+ +

関連情報

+ + 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 +--- +

{{ApiRef("DOM")}}

+ +

イベントを発生させたオブジェクトへの参照です。 イベントハンドラーがバブリング、またはキャプチャフェーズの間に呼び出されたとき、{{domxref("event.currentTarget")}} とは異なります。

+ +

構文

+ +
theTarget = event.target
+ +

例

+ +

event.target プロパティは、イベントデリゲーションを実装するために使用できます。

+ +
// リストを作ります
+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);
+
+
+ +

 

+ +

仕様

+ +

 

+ + + + + + + + + + + + + + + + + + + + + + + + +
仕様状態コメント
{{SpecName("DOM WHATWG", "#dom-event-target", "Event.target")}}{{Spec2("DOM WHATWG")}} 
{{SpecName("DOM4", "#dom-event-target", "Event.target")}}{{Spec2("DOM4")}} 
{{SpecName("DOM2 Events", "#Events-Event-target", "Event.target")}}{{Spec2("DOM2 Events")}}初回定義
+ +

ブラウザー実装状況

+ +

 

+ + + +

{{Compat("api.Event.target")}}

+ +

 

+ +

互換性のための注記

+ +

IE 6-8 では、イベントモデルが異なります。イベントリスナーは、非標準の {{domxref('EventTarget.attachEvent')}} メソッドでアタッチされます。このモデルでは、イベントオブジェクトは target プロパティの代わりに、{{domxref('Event.srcElement')}} プロパティを持っており、意味的には event.target と同じです。

+ +
function hide(e) {
+  // IE6-8 をサポート
+  var target = e.target || e.srcElement;
+  target.style.visibility = 'hidden';
+}
+
+ +

関連項目

+ + 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 +--- +
{{APIRef("DOM")}}
+ +

イベントが発生した時刻 (ミリ秒単位) を表します。

+ +
+

注記: このプロパティは、イベントシステムが個々のイベント向けにサポートしている場合に限り動作します。

+
+ +

構文

+ +
event.timeStamp
+
+ +

値

+ +

この値は、現在のドキュメントの生成からイベントが作成された時点までの時間（ミリ秒単位）です。

+ +

新しい実装では、5 マイクロ秒（0.005 ms = 0.005 ミリ秒）精度の {{domxref("DOMHighResTimeStamp")}} です。古い実装では、1 ミリ秒精度の {{domxref("DOMTimeStamp")}} です。

+ +

例

+ +

HTML コンテンツ

+ +
<p>
+  この iframe にフォーカスを設定していずれかのキーを押下すると、
+  keypress イベントの現在のタイムスタンプを取得します。
+</p>
+<p>タイムスタンプ: <span id="time">-</span></p>
+ +

JavaScript コンテンツ

+ +
function getTime(event) {
+  var time = document.getElementById("time");
+  time.firstChild.nodeValue = event.timeStamp;
+}
+document.body.addEventListener("keypress", getTime);
+ +

表示結果

+ +

{{EmbedLiveSample("Example", "100%", 100)}}

+ +

仕様

+ + + + + + + + + + + + + + + + + + + + + + + + + + +
仕様書策定状況コメント
{{SpecName("DOM WHATWG", "#dom-event-timestamp", "Event.timeStamp")}}{{Spec2("DOM WHATWG")}}
{{SpecName("DOM4", "#dom-event-timestamp", "Event.timeStamp")}}{{Spec2("DOM4")}}
{{SpecName("DOM2 Events", "#Events-Event-timeStamp", "Event.timeStamp")}}{{Spec2("DOM2 Events")}}初期定義
+ +

ブラウザー実装状況

+ +
{{CompatibilityTable}}
+ +
+ + + + + + + + + + + + + + + + + + + + + +
機能ChromeEdgeFirefox (Gecko)Internet ExplorerOperaSafari (WebKit)
基本サポート{{CompatChrome(49.0)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}{{CompatUnknown}}
+
+ +
+ + + + + + + + + + + + + + + + + + + + + + + + + +
機能AndroidAndroid WebviewEdgeFirefox Mobile (Gecko)IE MobileOpera MobileSafari MobileAndroid 版 Chrome
基本サポート{{CompatNo}}{{CompatChrome(49.0)}}[1]{{CompatVersionUnknown}}{{CompatVersionUnknown}}[1]{{CompatUnknown}}{{CompatUnknown}}{{CompatUnknown}}{{CompatChrome(49.0)}}
+
+ +

[1] Chrome 49 および Firefox 54 より、このプロパティが返す値はエポック時間 ({{domxref("DOMTimeStamp")}}) から高精度モノトニック時間 ({{domxref("DOMHighResTimeStamp")}}) に替わりました。

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 +--- +

{{APIRef}}

+ +

type は {{domxref("Event")}} インターフェイスの読取専用プロパティで、イベントの種別を表す文字列を返します。イベントが構築されると設定され、この名前は click, load, error のような特定のイベントを参照するためによく使用されます。

+ +

利用可能なイベント種別の一覧は、イベントリファレンスをご覧ください。

+ +

構文

+ +
let eventType = event.type;
+
+ +

値

+ +

{{domxref("Event")}} の種別を表す {{domxref("DOMString")}}。

+ +

例

+ +

この例は、キーボードのキーを押すか、マウスボタンをクリックするとイベント種別をログに出力します。

+ +

HTML

+ +
<p>キーを押すか、マウスをクリックしてください。</p>
+<p id="log"></p>
+ +

JavaScript

+ +
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
+ +

結果

+ +

{{EmbedLiveSample('Example')}}

+ +

仕様書

+ + + + + + + + + + + + + + + + + + + + + +
仕様書状態備考
{{SpecName('DOM WHATWG', '#dom-event-type', 'Event.type')}}{{ Spec2('DOM WHATWG') }}
{{SpecName('DOM2 Events', '#Events-Event-type', 'Event.type')}}{{ Spec2('DOM2 Events') }}初回定義
+ +

ブラウザーの互換性

+ + + +

{{Compat("api.Event.type")}}

+ +

関連情報

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