From 9d7d1272b1f9e0e8c2fc52c4e3c88d3923ca802c Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Sun, 24 Jul 2022 05:27:45 -0700 Subject: [PATCH 1/4] Update all remaining event pages to conform to new template --- .../api/element/compositionend_event/index.md | 44 +++++---- .../element/compositionstart_event/index.md | 44 +++++---- .../element/compositionupdate_event/index.md | 44 +++++---- .../api/element/contextmenu_event/index.md | 92 ++++++++++++++----- .../htmldetailselement/toggle_event/index.md | 42 +++------ .../htmlelement/beforeinput_event/index.md | 60 ++++++------ .../web/api/htmlelement/drag_event/index.md | 48 +++++----- .../api/htmlelement/dragend_event/index.md | 48 +++++----- .../api/htmlelement/dragenter_event/index.md | 48 +++++----- .../api/htmlelement/dragleave_event/index.md | 48 +++++----- .../api/htmlelement/dragover_event/index.md | 48 +++++----- .../api/htmlelement/dragstart_event/index.md | 48 +++++----- .../web/api/htmlelement/drop_event/index.md | 48 +++++----- .../htmlformelement/formdata_event/index.md | 46 +++++----- 14 files changed, 363 insertions(+), 345 deletions(-) diff --git a/files/en-us/web/api/element/compositionend_event/index.md b/files/en-us/web/api/element/compositionend_event/index.md index 8b8dac0a3a1d33c..8759fb86ba2da0c 100644 --- a/files/en-us/web/api/element/compositionend_event/index.md +++ b/files/en-us/web/api/element/compositionend_event/index.md @@ -13,26 +13,30 @@ The **`compositionend`** event is fired when a text composition system such as a For example, this event could be fired after a user finishes entering a Chinese character using a [Pinyin](https://en.wikipedia.org/wiki/Pinyin) IME. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{domxref("CompositionEvent")}}
Event handler propertyNone
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('compositionend', (event) => {}); + +oncompositionend = (event) => { }; +``` + +## Event type + +An {{domxref("CompositionEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("CompositionEvent")}} + +## Event properties + +_This interface also inherits properties of its parent, {{domxref("UIEvent")}}, and its ancestor — {{domxref("Event")}}._ + +- {{domxref("CompositionEvent.data")}} {{readonlyinline}} + - : Returns the characters generated by the input method that raised the event; its varies depending on the type of event that generated the `CompositionEvent` object. +- {{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}} + - : Returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with IME). ## Examples diff --git a/files/en-us/web/api/element/compositionstart_event/index.md b/files/en-us/web/api/element/compositionstart_event/index.md index 1175e4a54b3b67d..4a5642242163b05 100644 --- a/files/en-us/web/api/element/compositionstart_event/index.md +++ b/files/en-us/web/api/element/compositionstart_event/index.md @@ -16,26 +16,30 @@ The **`compositionstart`** event is fired when a text composition system such as For example, this event could be fired after a user starts entering a Chinese character using a [Pinyin](https://en.wikipedia.org/wiki/Pinyin) IME. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("CompositionEvent")}}
Event handler propertyNone
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('compositionstart', (event) => {}); + +oncompositionstart = (event) => { }; +``` + +## Event type + +An {{domxref("CompositionEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("CompositionEvent")}} + +## Event properties + +_This interface also inherits properties of its parent, {{domxref("UIEvent")}}, and its ancestor — {{domxref("Event")}}._ + +- {{domxref("CompositionEvent.data")}} {{readonlyinline}} + - : Returns the characters generated by the input method that raised the event; its varies depending on the type of event that generated the `CompositionEvent` object. +- {{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}} + - : Returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with IME). ## Examples diff --git a/files/en-us/web/api/element/compositionupdate_event/index.md b/files/en-us/web/api/element/compositionupdate_event/index.md index 6edef4c1643a472..e8af284b3428e82 100644 --- a/files/en-us/web/api/element/compositionupdate_event/index.md +++ b/files/en-us/web/api/element/compositionupdate_event/index.md @@ -13,26 +13,30 @@ The **`compositionupdate`** event is fired when a new character is received in t For example, this event could be fired while a user enters a Chinese character using a [Pinyin](https://en.wikipedia.org/wiki/Pinyin) IME. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{domxref("CompositionEvent")}}
Event handler propertyNone
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('compositionupdate', (event) => {}); + +oncompositionupdate = (event) => { }; +``` + +## Event type + +An {{domxref("CompositionEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("CompositionEvent")}} + +## Event properties + +_This interface also inherits properties of its parent, {{domxref("UIEvent")}}, and its ancestor — {{domxref("Event")}}._ + +- {{domxref("CompositionEvent.data")}} {{readonlyinline}} + - : Returns the characters generated by the input method that raised the event; its varies depending on the type of event that generated the `CompositionEvent` object. +- {{domxref("CompositionEvent.locale")}} {{readonlyinline}} {{deprecated_inline}} + - : Returns the locale of current input method (for example, the keyboard layout locale if the composition is associated with IME). ## Examples diff --git a/files/en-us/web/api/element/contextmenu_event/index.md b/files/en-us/web/api/element/contextmenu_event/index.md index 36bf3823d22793f..3aa5b220a9a61bc 100644 --- a/files/en-us/web/api/element/contextmenu_event/index.md +++ b/files/en-us/web/api/element/contextmenu_event/index.md @@ -27,28 +27,76 @@ In the latter case, the context menu is displayed at the bottom left of the focu Any right-click event that is not disabled (by calling the event's {{domxref("Event.preventDefault", "preventDefault()")}} method) will result in a `contextmenu` event being fired at the targeted element. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{DOMxRef("MouseEvent")}}
Event handler property - {{domxref("GlobalEventHandlers.oncontextmenu", "oncontextmenu")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('contextmenu', (event) => {}); + +oncontextmenu = (event) => { }; +``` + +## Event type + +An {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("MouseEvent")}} + +## Event properties + +_This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}._ + +- {{domxref("MouseEvent.altKey")}} {{readonlyinline}} + - : Returns `true` if the alt key was down when the mouse event was fired. +- {{domxref("MouseEvent.button")}} {{readonlyinline}} + - : The button number that was pressed (if applicable) when the mouse event was fired. +- {{domxref("MouseEvent.buttons")}} {{readonlyinline}} + - : The buttons being pressed (if any) when the mouse event was fired. +- {{domxref("MouseEvent.clientX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer in local (DOM content) coordinates. +- {{domxref("MouseEvent.clientY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer in local (DOM content) coordinates. +- {{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}} + - : Returns `true` if the control key was down when the mouse event was fired. +- {{domxref("MouseEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}} + - : Returns the horizontal coordinate of the event relative to the current layer. +- {{domxref("MouseEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}} + - : Returns the vertical coordinate of the event relative to the current layer. +- {{domxref("MouseEvent.metaKey")}} {{readonlyinline}} + - : Returns `true` if the meta key was down when the mouse event was fired. +- {{domxref("MouseEvent.movementX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event. +- {{domxref("MouseEvent.movementY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event. +- {{domxref("MouseEvent.offsetX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. +- {{domxref("MouseEvent.offsetY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. +- {{domxref("MouseEvent.pageX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the whole document. +- {{domxref("MouseEvent.pageY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the whole document. +- {{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}} + - : The secondary target for the event, if there is one. +- {{domxref("MouseEvent.screenX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer in global (screen) coordinates. +- {{domxref("MouseEvent.screenY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer in global (screen) coordinates. +- {{domxref("MouseEvent.shiftKey")}} {{readonlyinline}} + - : Returns `true` if the shift key was down when the mouse event was fired. +- {{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{deprecated_inline}} {{readonlyinline}} + - : The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between `0.0` (minimum pressure) and `1.0` (maximum pressure). + Instead of using this deprecated (and non-standard) property, you should use {{domxref("PointerEvent")}} and look at its {{domxref("PointerEvent.pressure", "pressure")}} property. +- {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}} + - : The type of device that generated the event (one of the `MOZ_SOURCE_*` constants). + This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). +- {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}} + - : The amount of pressure applied when clicking. +- {{domxref("MouseEvent.x")}} {{readonlyinline}} + - : Alias for {{domxref("MouseEvent.clientX")}}. +- {{domxref("MouseEvent.y")}} {{readonlyinline}} + - : Alias for {{domxref("MouseEvent.clientY")}}. ## Examples diff --git a/files/en-us/web/api/htmldetailselement/toggle_event/index.md b/files/en-us/web/api/htmldetailselement/toggle_event/index.md index 73c74c09e296ac1..205ed1a542dc995 100644 --- a/files/en-us/web/api/htmldetailselement/toggle_event/index.md +++ b/files/en-us/web/api/htmldetailselement/toggle_event/index.md @@ -14,33 +14,21 @@ browser-compat: api.HTMLDetailsElement.toggle_event The **`toggle`** event fires when the `open`/`closed` state of a {{HtmlElement("details")}} element is toggled. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{DOMxRef("Event")}}
Event handler propertyNone
Default Action - Toggles the open state of the - {{HtmlElement("details")}} element. -
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('toggle', (event) => {}); + +ontoggle = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlelement/beforeinput_event/index.md b/files/en-us/web/api/htmlelement/beforeinput_event/index.md index 68bd33d7656ae13..3d774ea7db54bdd 100644 --- a/files/en-us/web/api/htmlelement/beforeinput_event/index.md +++ b/files/en-us/web/api/htmlelement/beforeinput_event/index.md @@ -20,38 +20,34 @@ This allows web apps to override text edit behavior before the browser modifies In the case of `contenteditable` and `designMode`, the event target is the **editing host**. If these properties apply to multiple elements, the editing host is the nearest ancestor element whose parent isn't editable. - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{DOMxRef("InputEvent")}}
Event handler propertyNone
Sync / AsyncSync
ComposedYes
Default ActionUpdate the DOM element
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('beforeinput', (event) => {}); + +onbeforeinput = (event) => { }; +``` + +## Event type + +An {{domxref("InputEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("InputEvent")}} + +## Event properties + +_This interface inherits properties from its parents, {{DOMxRef("UIEvent")}} and {{DOMxRef("Event")}}._ + +- {{DOMxRef("InputEvent.data")}} {{ReadOnlyInline}} + - : Returns a string with the inserted characters. This may be an empty string if the change doesn't insert text (such as when deleting characters, for example). +- {{DOMxRef("InputEvent.dataTransfer")}} {{ReadOnlyInline}} + - : Returns a {{DOMxRef("DataTransfer")}} object containing information about richtext or plaintext data being added to or removed from editable content. +- {{DOMxRef("InputEvent.inputType")}} {{ReadOnlyInline}} + - : Returns the type of change for editable content such as, for example, inserting, deleting, or formatting text. See the property page for a complete list of input types. +- {{DOMxRef("InputEvent.isComposing")}} {{ReadOnlyInline}} + - : Returns a {{JSxRef("Boolean")}} value indicating if the event is fired after {{domxref("Element/compositionstart_event", "compositionstart")}} and before {{domxref("Element/compositionend_event", "compositionend")}}. ## Examples diff --git a/files/en-us/web/api/htmlelement/drag_event/index.md b/files/en-us/web/api/htmlelement/drag_event/index.md index 4c212ed64d70fdf..20863f6e7c314b1 100644 --- a/files/en-us/web/api/htmlelement/drag_event/index.md +++ b/files/en-us/web/api/htmlelement/drag_event/index.md @@ -18,32 +18,28 @@ browser-compat: api.HTMLElement.drag_event The `drag` event is fired every few hundred milliseconds as an element or text selection is being dragged by the user. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Default actionContinue the drag & drop operation.
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondrag", "ondrag")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('drag', (event) => {}); + +ondrag = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/htmlelement/dragend_event/index.md b/files/en-us/web/api/htmlelement/dragend_event/index.md index edda8ac706d0dc9..6240bae1fec5d7f 100644 --- a/files/en-us/web/api/htmlelement/dragend_event/index.md +++ b/files/en-us/web/api/htmlelement/dragend_event/index.md @@ -18,32 +18,28 @@ browser-compat: api.HTMLElement.dragend_event The `dragend` event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key). - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Default actionVaries
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondragend", "ondragend")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('dragend', (event) => {}); + +ondragend = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/htmlelement/dragenter_event/index.md b/files/en-us/web/api/htmlelement/dragenter_event/index.md index b4c455055a657e0..f0626cf19ba6e4d 100644 --- a/files/en-us/web/api/htmlelement/dragenter_event/index.md +++ b/files/en-us/web/api/htmlelement/dragenter_event/index.md @@ -20,32 +20,28 @@ The `dragenter` event is fired when a dragged element or text selection enters a The target object is the _immediate user selection_ (the element directly indicated by the user as the drop target), or the {{HTMLElement("body")}} element. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Default actionReject immediate user selection as potential target element.
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondragenter", "ondragenter")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('dragenter', (event) => {}); + +ondragenter = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/htmlelement/dragleave_event/index.md b/files/en-us/web/api/htmlelement/dragleave_event/index.md index 238f5d11e33dafb..2986bdadd0f99a0 100644 --- a/files/en-us/web/api/htmlelement/dragleave_event/index.md +++ b/files/en-us/web/api/htmlelement/dragleave_event/index.md @@ -18,32 +18,28 @@ browser-compat: api.HTMLElement.dragleave_event The `dragleave` event is fired when a dragged element or text selection leaves a valid drop target. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Default actionNone.
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondragleave", "ondragleave")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('dragleave', (event) => {}); + +ondragleave = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/htmlelement/dragover_event/index.md b/files/en-us/web/api/htmlelement/dragover_event/index.md index 912a3a2b905011f..df2513b9aa83a77 100644 --- a/files/en-us/web/api/htmlelement/dragover_event/index.md +++ b/files/en-us/web/api/htmlelement/dragover_event/index.md @@ -19,32 +19,28 @@ The `dragover` event is fired when an element or text selection is being dragged The event is fired on the drop target(s). - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Default actionReset the current drag operation to "none".
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondragover", "ondragover")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('dragover', (event) => {}); + +ondragover = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/htmlelement/dragstart_event/index.md b/files/en-us/web/api/htmlelement/dragstart_event/index.md index b4e71fc3853fd22..d510ad87857ef17 100644 --- a/files/en-us/web/api/htmlelement/dragstart_event/index.md +++ b/files/en-us/web/api/htmlelement/dragstart_event/index.md @@ -13,32 +13,28 @@ browser-compat: api.HTMLElement.dragstart_event The `dragstart` event is fired when the user starts dragging an element or text selection. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Default actionInitiate the drag-and-drop operation.
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('dragstart', (event) => {}); + +ondragstart = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/htmlelement/drop_event/index.md b/files/en-us/web/api/htmlelement/drop_event/index.md index 4cc0d25070b4bf6..310f80151eb8191 100644 --- a/files/en-us/web/api/htmlelement/drop_event/index.md +++ b/files/en-us/web/api/htmlelement/drop_event/index.md @@ -16,32 +16,28 @@ browser-compat: api.HTMLElement.drop_event The **`drop`** event is fired when an element or text selection is dropped on a valid drop target. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Default actionVaries
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondrop", "ondrop")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('drop', (event) => {}); + +ondrop = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/htmlformelement/formdata_event/index.md b/files/en-us/web/api/htmlformelement/formdata_event/index.md index c23aeb499896001..5d999a638cb45ed 100644 --- a/files/en-us/web/api/htmlformelement/formdata_event/index.md +++ b/files/en-us/web/api/htmlformelement/formdata_event/index.md @@ -13,28 +13,30 @@ browser-compat: api.HTMLFormElement.formdata_event The **`formdata`** event fires after the entry list representing the form's data is constructed. This happens when the form is submitted, but can also be triggered by the invocation of a {{domxref("FormData.FormData", "FormData()")}} constructor. -## General info - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{DOMxRef("FormDataEvent")}}
Event handler property{{domxref("GlobalEventHandlers.onformdata")}}
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('formdata', (event) => {}); + +onformdata = (event) => { }; +``` + +## Event type + +An {{domxref("FormDataEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("FormDataEvent")}} + +## Event properties + +_Inherits properties from its parent interface, {{domxref("Event")}}._ + +- {{domxref("FormDataEvent.formData")}} + - : Contains the {{domxref("FormData")}} object representing the data contained in the form when the event was fired. ## Examples From 82e85b417e765dc7f35e29a47fe87586127e5327 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Sun, 24 Jul 2022 19:11:09 -0700 Subject: [PATCH 2/4] Convert more event pages --- .../document/domcontentloaded_event/index.md | 37 ++++---- .../web/api/document/drag_event/index.md | 48 +++++----- .../web/api/document/dragend_event/index.md | 50 +++++------ .../web/api/document/dragenter_event/index.md | 48 +++++----- .../web/api/document/dragleave_event/index.md | 50 +++++------ .../web/api/document/dragover_event/index.md | 48 +++++----- .../web/api/document/dragstart_event/index.md | 50 +++++------ .../web/api/document/drop_event/index.md | 48 +++++----- .../beforescriptexecute_event/index.md | 33 +++---- .../en-us/web/api/element/copy_event/index.md | 37 ++++---- .../en-us/web/api/element/cut_event/index.md | 37 ++++---- .../api/element/dommousescroll_event/index.md | 37 ++++---- .../web/api/element/error_event/index.md | 37 ++++---- .../web/api/element/focusin_event/index.md | 54 +++++------- .../web/api/element/focusout_event/index.md | 52 +++++------ .../api/element/gesturestart_event/index.md | 44 +++++----- .../mozmousepixelscroll_event/index.md | 33 ++++--- .../web/api/element/paste_event/index.md | 37 ++++---- .../element/transitionstart_event/index.md | 50 ++++++----- .../webkitmouseforcechanged_event/index.md | 88 +++++++++++++++---- .../element/webkitmouseforceup_event/index.md | 88 +++++++++++++++---- .../webkitmouseforcewillbegin_event/index.md | 88 +++++++++++++++---- .../api/htmlelement/dragleave_event/index.md | 2 + .../htmlinputelement/search_event/index.md | 43 ++++----- .../api/htmlmediaelement/abort_event/index.md | 37 ++++---- .../api/htmlmediaelement/error_event/index.md | 37 ++++---- .../htmlmediaelement/progress_event/index.md | 35 ++++---- .../ratechange_event/index.md | 43 ++++----- .../htmlmediaelement/seeked_event/index.md | 43 ++++----- .../htmlmediaelement/seeking_event/index.md | 43 ++++----- .../htmlmediaelement/stalled_event/index.md | 43 ++++----- .../htmlmediaelement/suspend_event/index.md | 43 ++++----- .../timeupdate_event/index.md | 43 ++++----- .../volumechange_event/index.md | 43 ++++----- .../htmlmediaelement/waiting_event/index.md | 43 ++++----- .../htmlslotelement/slotchange_event/index.md | 37 ++++---- .../web/api/svgelement/error_event/index.md | 41 ++++----- .../web/api/svgelement/load_event/index.md | 41 ++++----- .../svggraphicselement/copy_event/index.md | 39 ++++---- .../api/svggraphicselement/cut_event/index.md | 37 ++++---- .../svggraphicselement/paste_event/index.md | 39 ++++---- .../en-us/web/api/window/copy_event/index.md | 37 ++++---- files/en-us/web/api/window/cut_event/index.md | 37 ++++---- .../window/domcontentloaded_event/index.md | 37 ++++---- .../en-us/web/api/window/load_event/index.md | 37 ++++---- .../en-us/web/api/window/paste_event/index.md | 37 ++++---- 46 files changed, 951 insertions(+), 1060 deletions(-) diff --git a/files/en-us/web/api/document/domcontentloaded_event/index.md b/files/en-us/web/api/document/domcontentloaded_event/index.md index 4039e245e78285d..72698ec11f730ef 100644 --- a/files/en-us/web/api/document/domcontentloaded_event/index.md +++ b/files/en-us/web/api/document/domcontentloaded_event/index.md @@ -14,31 +14,26 @@ browser-compat: api.Document.DOMContentLoaded_event The **`DOMContentLoaded`** event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{domxref("Event")}}
Event handler propertyNone
- A different event, {{domxref("Window/load_event", "load")}}, should be used only to detect a fully-loaded page. It is a common mistake to use `load` where `DOMContentLoaded` would be more appropriate. Synchronous JavaScript pauses parsing of the DOM. If you want the DOM to get parsed as fast as possible after the user has requested the page, you can make your [JavaScript asynchronous](/en-US/docs/Web/API/XMLHttpRequest/Synchronous_and_Asynchronous_Requests) and [optimize loading of stylesheets](https://developers.google.com/speed/docs/insights/OptimizeCSSDelivery). If loaded as usual, stylesheets slow down DOM parsing as they're loaded in parallel, "stealing" traffic from the main HTML document. +This event is not cancelable. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('DOMContentLoaded', (event) => {}); + +onDOMContentLoaded = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. + ## Polyfill The following code ports the functionality of the `DOMContentLoaded` event all the way back to IE6+, with a fallback to `window.onload` that works everywhere. diff --git a/files/en-us/web/api/document/drag_event/index.md b/files/en-us/web/api/document/drag_event/index.md index 68df8976fb2a06b..4dc137a634cc3f4 100644 --- a/files/en-us/web/api/document/drag_event/index.md +++ b/files/en-us/web/api/document/drag_event/index.md @@ -18,32 +18,28 @@ browser-compat: api.Document.drag_event The `drag` event is fired every few hundred milliseconds as an element or text selection is being dragged by the user. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Default actionContinue the drag & drop operation.
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondrag", "ondrag")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('drag', (event) => {}); + +ondrag = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/document/dragend_event/index.md b/files/en-us/web/api/document/dragend_event/index.md index 74f497a1ade459f..82ea1d86f7bd2d0 100644 --- a/files/en-us/web/api/document/dragend_event/index.md +++ b/files/en-us/web/api/document/dragend_event/index.md @@ -18,32 +18,30 @@ browser-compat: api.Document.dragend_event The `dragend` event is fired when a drag operation is being ended (by releasing a mouse button or hitting the escape key). - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Default actionVaries
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondragend", "ondragend")}} -
+This event is not cancelable. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('dragend', (event) => {}); + +ondragend = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/document/dragenter_event/index.md b/files/en-us/web/api/document/dragenter_event/index.md index 432ec3f89bd0e8e..7f716de1c43f6ef 100644 --- a/files/en-us/web/api/document/dragenter_event/index.md +++ b/files/en-us/web/api/document/dragenter_event/index.md @@ -20,32 +20,28 @@ The `dragenter` event is fired when a dragged element or text selection enters a The target object is the _immediate user selection_ (the element directly indicated by the user as the drop target), or the {{HTMLElement("body")}} element. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Default actionReject immediate user selection as potential target element.
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondragenter", "ondragenter")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('dragenter', (event) => {}); + +ondragenter = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/document/dragleave_event/index.md b/files/en-us/web/api/document/dragleave_event/index.md index 980a155d5dfd05e..8742f120afe3beb 100644 --- a/files/en-us/web/api/document/dragleave_event/index.md +++ b/files/en-us/web/api/document/dragleave_event/index.md @@ -18,32 +18,30 @@ browser-compat: api.Document.dragleave_event The `dragleave` event is fired when a dragged element or text selection leaves a valid drop target. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Default actionNone.
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondragleave", "ondragleave")}} -
+This event is not cancelable. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('dragleave', (event) => {}); + +ondragleave = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/document/dragover_event/index.md b/files/en-us/web/api/document/dragover_event/index.md index 059508289002e59..ef3d773955491c9 100644 --- a/files/en-us/web/api/document/dragover_event/index.md +++ b/files/en-us/web/api/document/dragover_event/index.md @@ -19,32 +19,28 @@ The `dragover` event is fired when an element or text selection is being dragged The event is fired on the drop target(s). - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Default actionReset the current drag operation to "none".
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondragover", "ondragover")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('dragover', (event) => {}); + +ondragover = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/document/dragstart_event/index.md b/files/en-us/web/api/document/dragstart_event/index.md index 842cfbdfd21e87c..4c74604edc811e1 100644 --- a/files/en-us/web/api/document/dragstart_event/index.md +++ b/files/en-us/web/api/document/dragstart_event/index.md @@ -13,32 +13,30 @@ browser-compat: api.Document.dragstart_event The `dragstart` event is fired when the user starts dragging an element or text selection. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Default actionInitiate the drag-and-drop operation.
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}} -
+This event is not cancelable. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('dragstart', (event) => {}); + +ondragstart = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/document/drop_event/index.md b/files/en-us/web/api/document/drop_event/index.md index 5cf548aafd542e1..3b63c75bb7c7dd4 100644 --- a/files/en-us/web/api/document/drop_event/index.md +++ b/files/en-us/web/api/document/drop_event/index.md @@ -16,32 +16,28 @@ browser-compat: api.Document.drop_event The **`drop`** event is fired when an element or text selection is dropped on a valid drop target. - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Default actionVaries
Interface{{domxref("DragEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ondrop", "ondrop")}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('drop', (event) => {}); + +ondrop = (event) => { }; +``` + +## Event type + +An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("DragEvent")}} + +## Event properties + +_In addition to the properties listed below, properties from the parent interface, {{domxref("Event")}}, are available._ + +- {{domxref('DragEvent.dataTransfer')}} {{readonlyInline}} + - : The data that is transferred during a drag and drop interaction. ## Examples diff --git a/files/en-us/web/api/element/beforescriptexecute_event/index.md b/files/en-us/web/api/element/beforescriptexecute_event/index.md index a6eb6c6301ba21e..649317c5a3d8049 100644 --- a/files/en-us/web/api/element/beforescriptexecute_event/index.md +++ b/files/en-us/web/api/element/beforescriptexecute_event/index.md @@ -16,26 +16,19 @@ The **`beforescriptexecute`** event is fired when a script is about to be execut It is a proprietary event specific to Gecko (Firefox). - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("Event")}}
Event handler propertyNone
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('NameOfTheEvent', (event) => {}); + +onNameOfTheEvent = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Specifications diff --git a/files/en-us/web/api/element/copy_event/index.md b/files/en-us/web/api/element/copy_event/index.md index 92d68d56095794e..6904a643ea42701 100644 --- a/files/en-us/web/api/element/copy_event/index.md +++ b/files/en-us/web/api/element/copy_event/index.md @@ -15,27 +15,6 @@ browser-compat: api.Element.copy_event The **`copy`** event fires when the user initiates a copy action through the browser's user interface. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("ClipboardEvent")}}
Event handler property{{domxref("HTMLElement/oncopy", "oncopy")}}
- The event's default action is to copy the selection (if any) to the clipboard. A handler for this event can _modify_ the clipboard contents by calling {{domxref("DataTransfer.setData", "setData(format, data)")}} on the event's {{domxref("ClipboardEvent.clipboardData")}} property, and cancelling the event's default action using {{domxref("Event/preventDefault", "event.preventDefault()")}}. @@ -44,6 +23,22 @@ However, the handler cannot _read_ the clipboard data. It's possible to construct and dispatch a [synthetic](/en-US/docs/Web/Events/Creating_and_triggering_events) `copy` event, but this will not affect the system clipboard. +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('copy', (event) => { }); + +oncopy = (event) => { }; +``` + +## Event type + +A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("ClipboardEvent")}} + ## Examples ### Live example diff --git a/files/en-us/web/api/element/cut_event/index.md b/files/en-us/web/api/element/cut_event/index.md index 98f86019fe27631..caffbe508c440b8 100644 --- a/files/en-us/web/api/element/cut_event/index.md +++ b/files/en-us/web/api/element/cut_event/index.md @@ -18,27 +18,6 @@ The **`cut`** event is fired when the user has initiated a "cut" action through If the user attempts a cut action on uneditable content, the `cut` event still fires but the event object contains no data. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("ClipboardEvent")}}
Event handler property{{domxref("HTMLElement/oncut", "oncut")}}
- The event's default action is to copy the current selection (if any) to the system clipboard and remove it from the document. A handler for this event can _modify_ the clipboard contents by calling {{domxref("DataTransfer.setData", "setData(format, data)")}} on the event's {{domxref("ClipboardEvent.clipboardData")}} property, and cancelling the default action using {{domxref("Event/preventDefault", "event.preventDefault()")}}. @@ -49,6 +28,22 @@ The handler cannot _read_ the clipboard data. It's possible to construct and dispatch a [synthetic](/en-US/docs/Web/Events/Creating_and_triggering_events) `cut` event, but this will not affect the system clipboard or the document's contents. +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('cut', (event) => { }); + +oncut = (event) => { }; +``` + +## Event type + +A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("ClipboardEvent")}} + ## Examples ### Live example diff --git a/files/en-us/web/api/element/dommousescroll_event/index.md b/files/en-us/web/api/element/dommousescroll_event/index.md index 41c326544fa1a89..d4e7b7accc9d23e 100644 --- a/files/en-us/web/api/element/dommousescroll_event/index.md +++ b/files/en-us/web/api/element/dommousescroll_event/index.md @@ -24,32 +24,29 @@ browser-compat: api.Element.DOMMouseScroll_event The DOM `DOMMouseScroll` event is fired asynchronously when mouse wheel or similar device is operated and the accumulated scroll amount is over 1 line or 1 page since last event. It's represented by the {{ domxref("MouseScrollEvent") }} interface. This event was only implemented by Firefox. You should instead use the standard {{domxref("Element.wheel_event", "wheel")}} event. - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface - {{domxref("MouseScrollEvent")}} {{deprecated_inline}} -
- If you want to prevent the default action of mouse wheel events, it's not enough to handle only this event on Gecko because If scroll amount by a native mouse wheel event is less than 1 line (or less than 1 page when the system setting is by page scroll), other mouse wheel events may be fired without this event. On Gecko 17 (Firefox 17) or later, you need to call `preventDefault()` of `wheel` events which must be fired for every native event. Use the standardized {{domxref("Element/wheel_event","wheel")}} event if available. -## Properties +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('DOMMouseScroll', (event) => {}); + +onDOMMouseScroll = (event) => { }; +``` + +## Event type + +An {{domxref("MouseWheelEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("MouseWheelEvent")}} + +## Event properties The event has only one additional property beyond standard events. diff --git a/files/en-us/web/api/element/error_event/index.md b/files/en-us/web/api/element/error_event/index.md index 3936f27559c8f3a..529e32562e86ee9 100644 --- a/files/en-us/web/api/element/error_event/index.md +++ b/files/en-us/web/api/element/error_event/index.md @@ -22,31 +22,24 @@ browser-compat: api.Element.error_event The `error` event is fired on an {{domxref("Element")}} object when a resource failed to load, or can't be used. For example, if a script has an execution error or an image can't be found or is invalid. - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("Event")}} or {{domxref("UIEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/onerror", "onerror")}} -
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('error', (event) => {}); + +onerror = (event) => { }; +``` + +## Event type The event object is a {{domxref("UIEvent")}} instance if it was generated from a user interface element, or an {{domxref("Event")}} instance otherwise. +{{InheritanceDiagram("UIEvent")}} + ## Examples ### Live example diff --git a/files/en-us/web/api/element/focusin_event/index.md b/files/en-us/web/api/element/focusin_event/index.md index 0010640ef91809c..7db67d0cf93cf8f 100644 --- a/files/en-us/web/api/element/focusin_event/index.md +++ b/files/en-us/web/api/element/focusin_event/index.md @@ -18,36 +18,30 @@ The **`focusin`** event fires when an element is about to receive focus. The mai The opposite of `focusin` is {{domxref("Element/focusout_event", "focusout")}}. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{DOMxRef("FocusEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/onfocusin", "onfocusin")}} -
Sync / AsyncSync
ComposedYes
+This event is not cancelable. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('focusin', (event) => {}); + +onfocusin = (event) => { }; +``` + +## Event type + +An {{domxref("FocusEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("FocusEvent")}} + +## Event properties + +_This interface also inherits properties from its parent {{domxref("UIEvent")}}, and indirectly from {{domxref("Event")}}_. + +- {{domxref("FocusEvent.relatedTarget")}} + - : An {{domxref("EventTarget")}} representing a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set to `null` for security reasons. ## Examples diff --git a/files/en-us/web/api/element/focusout_event/index.md b/files/en-us/web/api/element/focusout_event/index.md index 2ffdb238c90be37..0a0803c9e3a17a6 100644 --- a/files/en-us/web/api/element/focusout_event/index.md +++ b/files/en-us/web/api/element/focusout_event/index.md @@ -19,36 +19,28 @@ The **`focusout`** event fires when an element is about to lose focus. The main The opposite of `focusout` is {{domxref("Element/focusin_event", "focusin")}}. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{DOMxRef("FocusEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/onfocusout", "onfocusout")}} -
Sync / AsyncSync
ComposedYes
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('focusout', (event) => {}); + +onfocusout = (event) => { }; +``` + +## Event type + +An {{domxref("FocusEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("FocusEvent")}} + +## Event properties + +_This interface also inherits properties from its parent {{domxref("UIEvent")}}, and indirectly from {{domxref("Event")}}_. + +- {{domxref("FocusEvent.relatedTarget")}} + - : An {{domxref("EventTarget")}} representing a secondary target for this event. In some cases (such as when tabbing in or out a page), this property may be set to `null` for security reasons. ## Examples diff --git a/files/en-us/web/api/element/gesturestart_event/index.md b/files/en-us/web/api/element/gesturestart_event/index.md index 83a9e08854a11c6..f091ee2710e2c0e 100644 --- a/files/en-us/web/api/element/gesturestart_event/index.md +++ b/files/en-us/web/api/element/gesturestart_event/index.md @@ -14,26 +14,30 @@ The **`gesturestart`** event is fired when multiple fingers contact the touch su It is a proprietary event specific to WebKit. - - - - - - - - - - - - - - - - - - - -
BubblesUnknown
CancelableUnknown
Interface{{domxref("GestureEvent")}}
Event handler propertyUnknown
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('NameOfTheEvent', (event) => {}); + +onNameOfTheEvent = (event) => { }; +``` + +## Event type + +An {{domxref("GestureEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("GestureEvent")}} + +## Event properties + +_This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}._ + +- {{domxref("GestureEvent.rotation")}} {{readonlyinline}} + - : Change in rotation (in degrees) since the event's beginning. Positive values indicate clockwise rotation; negative values indicate counterclockwise rotation. Initial value: `0.0` +- {{domxref("GestureEvent.scale")}} {{readonlyinline}} + - : Distance between two digits since the event's beginning. Expressed as a floating-point multiple of the initial distance between the digits at the beginning of the gesture. Values below 1.0 indicate an inward pinch (zoom out). Values above 1.0 indicate an outward unpinch (zoom in). Initial value: `1.0` ## Specifications diff --git a/files/en-us/web/api/element/mozmousepixelscroll_event/index.md b/files/en-us/web/api/element/mozmousepixelscroll_event/index.md index 5c01fcdfa987ab7..abef5bae50d15e1 100644 --- a/files/en-us/web/api/element/mozmousepixelscroll_event/index.md +++ b/files/en-us/web/api/element/mozmousepixelscroll_event/index.md @@ -23,24 +23,21 @@ The Firefox-only, _non-standard_, and _obsolete_ **`MozMousePixelScroll`** event > **Note:** Do not use this non-standard and obsolete event. Instead, you should always use the standard {{domxref("Element.wheel_event", "wheel")}} event. - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface - {{domxref("MouseScrollEvent")}} {{Deprecated_inline}} -
+## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('MozMousePixelScroll', (event) => {}); + +onMozMousePixelScroll = (event) => { }; +``` + +## Event type + +An {{domxref("MouseWheelEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("MouseWheelEvent")}} ## Getting the distance scrolled diff --git a/files/en-us/web/api/element/paste_event/index.md b/files/en-us/web/api/element/paste_event/index.md index 3c57ea3bc6dea00..2781c77738fb965 100644 --- a/files/en-us/web/api/element/paste_event/index.md +++ b/files/en-us/web/api/element/paste_event/index.md @@ -13,27 +13,6 @@ browser-compat: api.Element.paste_event The **`paste`** event is fired when the user has initiated a "paste" action through the browser's user interface. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("ClipboardEvent")}}
Event handler property{{domxref("HTMLElement/onpaste", "onpaste")}}
- If the cursor is in an editable context (for example, in a {{HTMLElement("textarea")}} or an element with [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute set to `true`) then the default action is to insert the contents of the clipboard into the document at the cursor position. A handler for this event can access the clipboard contents by calling {{domxref("DataTransfer/getData", "getData()")}} on the event's `clipboardData` property. @@ -42,6 +21,22 @@ To override the default behavior (for example to insert some different data or a It's possible to construct and dispatch a [synthetic](/en-US/docs/Web/Events/Creating_and_triggering_events) `paste` event, but this will not affect the document's contents. +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('paste', (event) => { }); + +onpaste = (event) => { }; +``` + +## Event type + +A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("ClipboardEvent")}} + ## Examples ### Live example diff --git a/files/en-us/web/api/element/transitionstart_event/index.md b/files/en-us/web/api/element/transitionstart_event/index.md index 005db1943dbc45b..6955cba1c190093 100644 --- a/files/en-us/web/api/element/transitionstart_event/index.md +++ b/files/en-us/web/api/element/transitionstart_event/index.md @@ -16,28 +16,34 @@ page-type: web-api-event The **`transitionstart`** event is fired when a [CSS transition](/en-US/docs/Web/CSS/CSS_Transitions/Using_CSS_transitions) has actually started, i.e., after any {{cssxref("transition-delay")}} has ended. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{domxref("TransitionEvent")}}
Event handler property - {{domxref("GlobalEventHandlers/ontransitionstart", "ontransitionstart")}} -
+This event is not cancelable. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('transitionstart', (event) => {}); + +ontransitionstart = (event) => { }; +``` + +## Event type + +An {{domxref("TransitionEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("TransitionEvent")}} + +## Event properties + +_Also inherits properties from its parent {{domxref("Event")}}_. + +- {{domxref("TransitionEvent.propertyName")}} {{readonlyInline}} + - : A string containing the name CSS property associated with the transition. +- {{domxref("TransitionEvent.elapsedTime")}} {{readonlyInline}} + - : A `float` giving the amount of time the transition has been running, in seconds, when this event fired. This value is not affected by the {{cssxref("transition-delay")}} property. +- {{domxref("TransitionEvent.pseudoElement")}} {{readonlyInline}} + - : A string, starting with `::`, containing the name of the [pseudo-element](/en-US/docs/Web/CSS/Pseudo-elements) the animation runs on. If the transition doesn't run on a pseudo-element but on the element, an empty string: `''`. ## Examples diff --git a/files/en-us/web/api/element/webkitmouseforcechanged_event/index.md b/files/en-us/web/api/element/webkitmouseforcechanged_event/index.md index eed90819e6b470b..c8f0d069735ee83 100644 --- a/files/en-us/web/api/element/webkitmouseforcechanged_event/index.md +++ b/files/en-us/web/api/element/webkitmouseforcechanged_event/index.md @@ -24,27 +24,81 @@ browser-compat: api.Element.webkitmouseforcechanged_event The non-standard **`webkitmouseforcechanged`** event is fired by Safari each time the amount of pressure changes on the trackpad/touchscreen. - - - - - - - - - - - - - - - -
BubblesUnknown
CancelableUnknown
Interface{{domxref("MouseEvent")}}
- **`webkitmouseforcechanged`** is a proprietary, WebKit-specific event introduced by Apple to support their [Force Touch events](/en-US/docs/Web/API/Force_Touch_events) feature. This event first fires after the {{domxref("Element/mousedown_event", "mousedown")}} event and stops firing before the {{domxref("Element/mouseup_event", "mouseup")}} event. +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('webkitmouseforcechanged', (event) => {}); + +onwebkitmouseforcechanged = (event) => { }; +``` + +## Event type + +An {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("MouseEvent")}} + +## Event properties + +_This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}._ + +- {{domxref("MouseEvent.altKey")}} {{readonlyinline}} + - : Returns `true` if the alt key was down when the mouse event was fired. +- {{domxref("MouseEvent.button")}} {{readonlyinline}} + - : The button number that was pressed (if applicable) when the mouse event was fired. +- {{domxref("MouseEvent.buttons")}} {{readonlyinline}} + - : The buttons being pressed (if any) when the mouse event was fired. +- {{domxref("MouseEvent.clientX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer in local (DOM content) coordinates. +- {{domxref("MouseEvent.clientY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer in local (DOM content) coordinates. +- {{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}} + - : Returns `true` if the control key was down when the mouse event was fired. +- {{domxref("MouseEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}} + - : Returns the horizontal coordinate of the event relative to the current layer. +- {{domxref("MouseEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}} + - : Returns the vertical coordinate of the event relative to the current layer. +- {{domxref("MouseEvent.metaKey")}} {{readonlyinline}} + - : Returns `true` if the meta key was down when the mouse event was fired. +- {{domxref("MouseEvent.movementX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event. +- {{domxref("MouseEvent.movementY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event. +- {{domxref("MouseEvent.offsetX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. +- {{domxref("MouseEvent.offsetY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. +- {{domxref("MouseEvent.pageX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the whole document. +- {{domxref("MouseEvent.pageY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the whole document. +- {{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}} + - : The secondary target for the event, if there is one. +- {{domxref("MouseEvent.screenX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer in global (screen) coordinates. +- {{domxref("MouseEvent.screenY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer in global (screen) coordinates. +- {{domxref("MouseEvent.shiftKey")}} {{readonlyinline}} + - : Returns `true` if the shift key was down when the mouse event was fired. +- {{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{deprecated_inline}} {{readonlyinline}} + - : The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between `0.0` (minimum pressure) and `1.0` (maximum pressure). + Instead of using this deprecated (and non-standard) property, you should use {{domxref("PointerEvent")}} and look at its {{domxref("PointerEvent.pressure", "pressure")}} property. +- {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}} + - : The type of device that generated the event (one of the `MOZ_SOURCE_*` constants). + This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). +- {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}} + - : The amount of pressure applied when clicking. +- {{domxref("MouseEvent.x")}} {{readonlyinline}} + - : Alias for {{domxref("MouseEvent.clientX")}}. +- {{domxref("MouseEvent.y")}} {{readonlyinline}} + - : Alias for {{domxref("MouseEvent.clientY")}}. + ## Specifications _Not part of any specification._ Apple has [a description at the Mac Developer Library](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html). diff --git a/files/en-us/web/api/element/webkitmouseforceup_event/index.md b/files/en-us/web/api/element/webkitmouseforceup_event/index.md index 407f14489bd65dc..bcc30da6ceb4152 100644 --- a/files/en-us/web/api/element/webkitmouseforceup_event/index.md +++ b/files/en-us/web/api/element/webkitmouseforceup_event/index.md @@ -26,25 +26,79 @@ browser-compat: api.Element.webkitmouseforceup_event The non-standard **`webkitmouseforceup`** event is fired by Safari at an {{domxref("Element")}} some time after the {{event("webkitmouseforcedown")}} event, when pressure on the button has been reduced sufficiently to end the "force click". - - - - - - - - - - - - - - - -
BubblesUnknown
CancelableUnknown
Interface{{domxref("MouseEvent")}}
- **`webkitmouseforceup`** is a proprietary, WebKit-specific event. It is part of the [Force Touch events](/en-US/docs/Web/API/Force_Touch_events) feature. +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('webkitmouseforceup', (event) => {}); + +onwebkitmouseforceup = (event) => { }; +``` + +## Event type + +An {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("MouseEvent")}} + +## Event properties + +_This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}._ + +- {{domxref("MouseEvent.altKey")}} {{readonlyinline}} + - : Returns `true` if the alt key was down when the mouse event was fired. +- {{domxref("MouseEvent.button")}} {{readonlyinline}} + - : The button number that was pressed (if applicable) when the mouse event was fired. +- {{domxref("MouseEvent.buttons")}} {{readonlyinline}} + - : The buttons being pressed (if any) when the mouse event was fired. +- {{domxref("MouseEvent.clientX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer in local (DOM content) coordinates. +- {{domxref("MouseEvent.clientY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer in local (DOM content) coordinates. +- {{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}} + - : Returns `true` if the control key was down when the mouse event was fired. +- {{domxref("MouseEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}} + - : Returns the horizontal coordinate of the event relative to the current layer. +- {{domxref("MouseEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}} + - : Returns the vertical coordinate of the event relative to the current layer. +- {{domxref("MouseEvent.metaKey")}} {{readonlyinline}} + - : Returns `true` if the meta key was down when the mouse event was fired. +- {{domxref("MouseEvent.movementX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event. +- {{domxref("MouseEvent.movementY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event. +- {{domxref("MouseEvent.offsetX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. +- {{domxref("MouseEvent.offsetY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. +- {{domxref("MouseEvent.pageX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the whole document. +- {{domxref("MouseEvent.pageY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the whole document. +- {{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}} + - : The secondary target for the event, if there is one. +- {{domxref("MouseEvent.screenX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer in global (screen) coordinates. +- {{domxref("MouseEvent.screenY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer in global (screen) coordinates. +- {{domxref("MouseEvent.shiftKey")}} {{readonlyinline}} + - : Returns `true` if the shift key was down when the mouse event was fired. +- {{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{deprecated_inline}} {{readonlyinline}} + - : The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between `0.0` (minimum pressure) and `1.0` (maximum pressure). + Instead of using this deprecated (and non-standard) property, you should use {{domxref("PointerEvent")}} and look at its {{domxref("PointerEvent.pressure", "pressure")}} property. +- {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}} + - : The type of device that generated the event (one of the `MOZ_SOURCE_*` constants). + This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). +- {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}} + - : The amount of pressure applied when clicking. +- {{domxref("MouseEvent.x")}} {{readonlyinline}} + - : Alias for {{domxref("MouseEvent.clientX")}}. +- {{domxref("MouseEvent.y")}} {{readonlyinline}} + - : Alias for {{domxref("MouseEvent.clientY")}}. + ## Specifications _Not part of any specification._ Apple has [a description at the Mac Developer Library](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html). diff --git a/files/en-us/web/api/element/webkitmouseforcewillbegin_event/index.md b/files/en-us/web/api/element/webkitmouseforcewillbegin_event/index.md index 00d810bc7893dc6..e685060b0b41d7e 100644 --- a/files/en-us/web/api/element/webkitmouseforcewillbegin_event/index.md +++ b/files/en-us/web/api/element/webkitmouseforcewillbegin_event/index.md @@ -28,25 +28,79 @@ This offers the opportunity to tell the system not to trigger any default Force To instruct macOS not to engage any default Force Touch actions if the user apply enough pressure to activate a Force Touch event, call {{domxref("Event.preventDefault", "preventDefault()")}} on the `webkitmouseforcewillbegin` event object. - - - - - - - - - - - - - - - -
BubblesUnknown
CancelableUnknown
Interface{{domxref("MouseEvent")}}
- **`webkitmouseforcewillbegin`** is a proprietary, WebKit-specific event. It is part of the [Force Touch events](/en-US/docs/Web/API/Force_Touch_events) feature. +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('webkitmouseforceup', (event) => {}); + +onwebkitmouseforceup = (event) => { }; +``` + +## Event type + +An {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("MouseEvent")}} + +## Event properties + +_This interface also inherits properties of its parents, {{domxref("UIEvent")}} and {{domxref("Event")}}._ + +- {{domxref("MouseEvent.altKey")}} {{readonlyinline}} + - : Returns `true` if the alt key was down when the mouse event was fired. +- {{domxref("MouseEvent.button")}} {{readonlyinline}} + - : The button number that was pressed (if applicable) when the mouse event was fired. +- {{domxref("MouseEvent.buttons")}} {{readonlyinline}} + - : The buttons being pressed (if any) when the mouse event was fired. +- {{domxref("MouseEvent.clientX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer in local (DOM content) coordinates. +- {{domxref("MouseEvent.clientY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer in local (DOM content) coordinates. +- {{domxref("MouseEvent.ctrlKey")}} {{readonlyinline}} + - : Returns `true` if the control key was down when the mouse event was fired. +- {{domxref("MouseEvent.layerX")}} {{Non-standard_inline}} {{readonlyinline}} + - : Returns the horizontal coordinate of the event relative to the current layer. +- {{domxref("MouseEvent.layerY")}} {{Non-standard_inline}} {{readonlyinline}} + - : Returns the vertical coordinate of the event relative to the current layer. +- {{domxref("MouseEvent.metaKey")}} {{readonlyinline}} + - : Returns `true` if the meta key was down when the mouse event was fired. +- {{domxref("MouseEvent.movementX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event. +- {{domxref("MouseEvent.movementY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the position of the last {{domxref("Element/mousemove_event", "mousemove")}} event. +- {{domxref("MouseEvent.offsetX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the position of the padding edge of the target node. +- {{domxref("MouseEvent.offsetY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the position of the padding edge of the target node. +- {{domxref("MouseEvent.pageX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer relative to the whole document. +- {{domxref("MouseEvent.pageY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer relative to the whole document. +- {{domxref("MouseEvent.relatedTarget")}} {{readonlyinline}} + - : The secondary target for the event, if there is one. +- {{domxref("MouseEvent.screenX")}} {{readonlyinline}} + - : The X coordinate of the mouse pointer in global (screen) coordinates. +- {{domxref("MouseEvent.screenY")}} {{readonlyinline}} + - : The Y coordinate of the mouse pointer in global (screen) coordinates. +- {{domxref("MouseEvent.shiftKey")}} {{readonlyinline}} + - : Returns `true` if the shift key was down when the mouse event was fired. +- {{domxref("MouseEvent.mozPressure")}} {{non-standard_inline()}} {{deprecated_inline}} {{readonlyinline}} + - : The amount of pressure applied to a touch or tablet device when generating the event; this value ranges between `0.0` (minimum pressure) and `1.0` (maximum pressure). + Instead of using this deprecated (and non-standard) property, you should use {{domxref("PointerEvent")}} and look at its {{domxref("PointerEvent.pressure", "pressure")}} property. +- {{domxref("MouseEvent.mozInputSource")}} {{non-standard_inline()}} {{readonlyinline}} + - : The type of device that generated the event (one of the `MOZ_SOURCE_*` constants). + This lets you, for example, determine whether a mouse event was generated by an actual mouse or by a touch event (which might affect the degree of accuracy with which you interpret the coordinates associated with the event). +- {{domxref("MouseEvent.webkitForce")}} {{non-standard_inline()}} {{readonlyinline}} + - : The amount of pressure applied when clicking. +- {{domxref("MouseEvent.x")}} {{readonlyinline}} + - : Alias for {{domxref("MouseEvent.clientX")}}. +- {{domxref("MouseEvent.y")}} {{readonlyinline}} + - : Alias for {{domxref("MouseEvent.clientY")}}. + ## Specifications _Not part of any specification._ Apple has [a description at the Mac Developer Library](https://developer.apple.com/library/archive/documentation/AppleApplications/Conceptual/SafariJSProgTopics/RespondingtoForceTouchEventsfromJavaScript.html). diff --git a/files/en-us/web/api/htmlelement/dragleave_event/index.md b/files/en-us/web/api/htmlelement/dragleave_event/index.md index 2986bdadd0f99a0..f36a41817ecb0ed 100644 --- a/files/en-us/web/api/htmlelement/dragleave_event/index.md +++ b/files/en-us/web/api/htmlelement/dragleave_event/index.md @@ -18,6 +18,8 @@ browser-compat: api.HTMLElement.dragleave_event The `dragleave` event is fired when a dragged element or text selection leaves a valid drop target. +This event is not cancelable. + ## Syntax Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. diff --git a/files/en-us/web/api/htmlinputelement/search_event/index.md b/files/en-us/web/api/htmlinputelement/search_event/index.md index 217004b9688685a..3b40ed77cf4cf4d 100644 --- a/files/en-us/web/api/htmlinputelement/search_event/index.md +++ b/files/en-us/web/api/htmlinputelement/search_event/index.md @@ -16,37 +16,26 @@ browser-compat: api.HTMLInputElement.search_event The **`search`** event is fired when a search is initiated using an {{HTMLElement("input")}} element of `type="search"`. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{domxref("Event")}}
Event handler property - onsearch -
- There are several ways a search can be initiated, such as by pressing Enter while the {{HTMLElement("input")}} is focused, or, if the [`incremental`](/en-US/docs/Web/HTML/Element/input#incremental) attribute is present, after a UA-defined timeout elapses since the most recent keystroke (with new keystrokes resetting the timeout so the firing of the event is debounced). Current UA implementations of `` have an additional control to clear the field. Using this control also fires the `search` event. In that case the `value` of the {{HTMLElement("input")}} element will be the empty string. +This event is not cancelable. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('search', (event) => {}); + +onsearch = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. + ## Examples ```js diff --git a/files/en-us/web/api/htmlmediaelement/abort_event/index.md b/files/en-us/web/api/htmlmediaelement/abort_event/index.md index bc44836f3c50666..07194cfee4a47bf 100644 --- a/files/en-us/web/api/htmlmediaelement/abort_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/abort_event/index.md @@ -15,28 +15,21 @@ browser-compat: api.HTMLMediaElement.abort_event The **`abort`** event is fired when the resource was not fully loaded, but not as the result of an error. - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("Event")}}
Event handler property - {{domxref("GlobalEventHandlers/onabort", "onabort")}} -
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('abort', (event) => {}); + +onabort = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlmediaelement/error_event/index.md b/files/en-us/web/api/htmlmediaelement/error_event/index.md index 4270d00fbf45084..b462dc8e6c46094 100644 --- a/files/en-us/web/api/htmlmediaelement/error_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/error_event/index.md @@ -15,28 +15,21 @@ browser-compat: api.HTMLMediaElement.error_event The **`error`** event is fired when the resource could not be loaded due to an error (for example, a network connectivity problem). - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("Event")}}
Event handler property - {{domxref("GlobalEventHandlers/onerror", "onerror")}} -
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('error', (event) => {}); + +onerror = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlmediaelement/progress_event/index.md b/files/en-us/web/api/htmlmediaelement/progress_event/index.md index e1827bf9f05314b..a1a4fa50114d043 100644 --- a/files/en-us/web/api/htmlmediaelement/progress_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/progress_event/index.md @@ -15,26 +15,21 @@ browser-compat: api.HTMLMediaElement.progress_event The **`progress`** event is fired periodically as the browser loads a resource. - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("Event")}}
Event handler propertyonprogress
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('progress', (event) => {}); + +onprogress = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlmediaelement/ratechange_event/index.md b/files/en-us/web/api/htmlmediaelement/ratechange_event/index.md index 5acc8df6116f806..a31c2abf5c744bf 100644 --- a/files/en-us/web/api/htmlmediaelement/ratechange_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/ratechange_event/index.md @@ -15,34 +15,21 @@ browser-compat: api.HTMLMediaElement.ratechange_event The `ratechange` event is fired when the playback rate has changed. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{DOMxRef("Event")}}
TargetElement
Default ActionNone
Event handler property{{domxref("GlobalEventHandlers.onratechange")}}
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('ratechange', (event) => {}); + +onratechange = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlmediaelement/seeked_event/index.md b/files/en-us/web/api/htmlmediaelement/seeked_event/index.md index ccce7ce82af0a52..eeb4103f45c3f9d 100644 --- a/files/en-us/web/api/htmlmediaelement/seeked_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/seeked_event/index.md @@ -15,34 +15,21 @@ browser-compat: api.HTMLMediaElement.seeked_event The `seeked` event is fired when a seek operation completed, the current playback position has changed, and the Boolean `seeking` attribute is changed to `false`. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{DOMxRef("Event")}}
TargetElement
Default ActionNone
Event handler property{{domxref("GlobalEventHandlers.onseeked")}}
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('seeked', (event) => {}); + +onseeked = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlmediaelement/seeking_event/index.md b/files/en-us/web/api/htmlmediaelement/seeking_event/index.md index 8c9c7b23a8a562c..2432d3eb2807f23 100644 --- a/files/en-us/web/api/htmlmediaelement/seeking_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/seeking_event/index.md @@ -15,34 +15,21 @@ browser-compat: api.HTMLMediaElement.seeking_event The `seeking` event is fired when a seek operation starts, meaning the Boolean `seeking` attribute has changed to `true` and the media is seeking a new position. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{DOMxRef("Event")}}
TargetElement
Default ActionNone
Event handler property{{domxref("GlobalEventHandlers.onseeking")}}
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('seeking', (event) => {}); + +onseeking = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlmediaelement/stalled_event/index.md b/files/en-us/web/api/htmlmediaelement/stalled_event/index.md index c0d241d32c088d3..74e6236d8968d8a 100644 --- a/files/en-us/web/api/htmlmediaelement/stalled_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/stalled_event/index.md @@ -15,34 +15,21 @@ browser-compat: api.HTMLMediaElement.stalled_event The `stalled` event is fired when the user agent is trying to fetch media data, but data is unexpectedly not forthcoming. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{DOMxRef("Event")}}
TargetElement
Default ActionNone
Event handler property{{domxref("GlobalEventHandlers.onstalled")}}
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('stalled', (event) => {}); + +onstalled = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlmediaelement/suspend_event/index.md b/files/en-us/web/api/htmlmediaelement/suspend_event/index.md index 906c90959d3c8b7..822c6495d968872 100644 --- a/files/en-us/web/api/htmlmediaelement/suspend_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/suspend_event/index.md @@ -15,34 +15,21 @@ browser-compat: api.HTMLMediaElement.suspend_event The `suspend` event is fired when media data loading has been suspended. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{DOMxRef("Event")}}
TargetElement
Default ActionNone
Event handler property{{domxref("GlobalEventHandlers.onsuspend")}}
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('suspend', (event) => {}); + +onsuspend = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlmediaelement/timeupdate_event/index.md b/files/en-us/web/api/htmlmediaelement/timeupdate_event/index.md index 384a8d98979cad1..41d3b3646e94cff 100644 --- a/files/en-us/web/api/htmlmediaelement/timeupdate_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/timeupdate_event/index.md @@ -16,34 +16,21 @@ The `timeupdate` event is fired when the time indicated by the `currentTime` att The event frequency is dependent on the system load, but will be thrown between about 4Hz and 66Hz (assuming the event handlers don't take longer than 250ms to run). User agents are encouraged to vary the frequency of the event based on the system load and the average cost of processing the event each time, so that the UI updates are not any more frequent than the user agent can comfortably handle while decoding the video. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{DOMxRef("Event")}}
TargetElement
Default ActionNone
Event handler property{{domxref("GlobalEventHandlers.ontimeupdate")}}
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('timeupdate', (event) => {}); + +ontimeupdate = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlmediaelement/volumechange_event/index.md b/files/en-us/web/api/htmlmediaelement/volumechange_event/index.md index d2887835740c30e..f10d2b9a20ad95a 100644 --- a/files/en-us/web/api/htmlmediaelement/volumechange_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/volumechange_event/index.md @@ -16,34 +16,21 @@ browser-compat: api.HTMLMediaElement.volumechange_event The `volumechange` event is fired when the volume has changed. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{DOMxRef("Event")}}
TargetElement
Default ActionNone
Event handler property{{domxref("GlobalEventHandlers.onvolumechange")}}
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('volumechange', (event) => {}); + +onvolumechange = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlmediaelement/waiting_event/index.md b/files/en-us/web/api/htmlmediaelement/waiting_event/index.md index 8e1accaefa3309a..b4a35788e8d64fb 100644 --- a/files/en-us/web/api/htmlmediaelement/waiting_event/index.md +++ b/files/en-us/web/api/htmlmediaelement/waiting_event/index.md @@ -15,34 +15,21 @@ browser-compat: api.HTMLMediaElement.waiting_event The `waiting` event is fired when playback has stopped because of a temporary lack of data. - - - - - - - - - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{DOMxRef("Event")}}
TargetElement
Default ActionNone
Event handler property{{domxref("GlobalEventHandlers.onwaiting")}}
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('waiting', (event) => {}); + +onwaiting = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/htmlslotelement/slotchange_event/index.md b/files/en-us/web/api/htmlslotelement/slotchange_event/index.md index 72c55ceaf849d76..d9238e88ac32003 100644 --- a/files/en-us/web/api/htmlslotelement/slotchange_event/index.md +++ b/files/en-us/web/api/htmlslotelement/slotchange_event/index.md @@ -17,29 +17,24 @@ The **`slotchange`** event is fired on an {{DOMxRef("HTMLSlotElement")}} instanc > **Note:** the `slotchange` event doesn't fire if the children of a slotted node change — only if you change (e.g. add or delete) the actual nodes themselves. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{DOMxRef("Event")}}
Event handler propertyNone
- In order to trigger a **slotchange** event, one has to set or remove the `slot` attribute. +This event is not cancelable. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('slotchange', (event) => {}); + +onslotchange = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. + ## Examples ```js diff --git a/files/en-us/web/api/svgelement/error_event/index.md b/files/en-us/web/api/svgelement/error_event/index.md index 14471cb25b40092..2ffcc62513a2a7a 100644 --- a/files/en-us/web/api/svgelement/error_event/index.md +++ b/files/en-us/web/api/svgelement/error_event/index.md @@ -16,32 +16,21 @@ The `error` event is fired when an SVG element does not load properly or when an This basically implements the standard `error` DOM event. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{domxref("SVGEvent")}}
Event handler property - onerror -
+This event is not cancelable. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('error', (event) => {}); + +onerror = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/svgelement/load_event/index.md b/files/en-us/web/api/svgelement/load_event/index.md index 67d5c07668f9f81..cbf26b833fb6e61 100644 --- a/files/en-us/web/api/svgelement/load_event/index.md +++ b/files/en-us/web/api/svgelement/load_event/index.md @@ -14,32 +14,21 @@ browser-compat: api.SVGElement.load_event The `load` event fires on an `SVGElement` when it is loaded in the browser, e.g. in the DOM in the case of an embedded ``. It is basically the same as the standard `load` DOM event. - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("SVGEvent")}}
Event handler property - onload -
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('load', (event) => {}); + +onload = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/svggraphicselement/copy_event/index.md b/files/en-us/web/api/svggraphicselement/copy_event/index.md index 0532fea31f265e7..2bd089237f31bae 100644 --- a/files/en-us/web/api/svggraphicselement/copy_event/index.md +++ b/files/en-us/web/api/svggraphicselement/copy_event/index.md @@ -14,29 +14,6 @@ browser-compat: api.Element.copy_event The **`copy`** event fires on {{domxref("SVGGraphicsElement", "SVGGraphicsElements")}} when the user initiates a copy action through the browser's user interface. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("ClipboardEvent")}}
Event handler property - {{domxref("SVGGraphicsElement/oncopy", "oncopy")}} -
- The event's default action is to copy the selection (if any) to the clipboard. A handler for this event can _modify_ the clipboard contents by calling {{domxref("DataTransfer.setData", "setData(format, data)")}} on the event's {{domxref("ClipboardEvent.clipboardData")}} property, and cancelling the event's default action using [`event.preventDefault()`](/en-US/docs/Web/API/Event/preventDefault). @@ -45,6 +22,22 @@ However, the handler cannot _read_ the clipboard data. It's possible to construct and dispatch a [synthetic](/en-US/docs/Web/Events/Creating_and_triggering_events) `copy` event, but this will not affect the system clipboard. +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('copy', (event) => { }); + +oncopy = (event) => { }; +``` + +## Event type + +A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("ClipboardEvent")}} + ## Example ### HTML diff --git a/files/en-us/web/api/svggraphicselement/cut_event/index.md b/files/en-us/web/api/svggraphicselement/cut_event/index.md index d120f67867988c0..c3415d188f9a348 100644 --- a/files/en-us/web/api/svggraphicselement/cut_event/index.md +++ b/files/en-us/web/api/svggraphicselement/cut_event/index.md @@ -17,27 +17,6 @@ The **`cut`** event is fired on an {{domxref("SVGGraphicsElement")}} when the us If the user attempts a cut action on uneditable content, the `cut` event still fires but the event object contains no data. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("ClipboardEvent")}}
Event handler property{{domxref("SVGGraphicsElement/oncut", "oncut")}}
- The event's default action is to copy the current selection (if any) to the system clipboard and remove it from the document. A handler for this event can _modify_ the clipboard contents by calling [`setData(format, data)`](/en-US/docs/Web/API/DataTransfer/setData) on the event's [`ClipboardEvent.clipboardData`](/en-US/docs/Web/API/ClipboardEvent/clipboardData) property, and cancelling the default action using [`event.preventDefault()`](/en-US/docs/Web/API/Event/preventDefault). @@ -48,6 +27,22 @@ The handler cannot _read_ the clipboard data. It's possible to construct and dispatch a [synthetic](/en-US/docs/Web/Events/Creating_and_triggering_events) `cut` event, but this will not affect the system clipboard or the document's contents. +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('cut', (event) => { }); + +oncut = (event) => { }; +``` + +## Event type + +A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("ClipboardEvent")}} + ## Specifications {{Specifications}} diff --git a/files/en-us/web/api/svggraphicselement/paste_event/index.md b/files/en-us/web/api/svggraphicselement/paste_event/index.md index 82d98d618c67778..4780ee51f01be4b 100644 --- a/files/en-us/web/api/svggraphicselement/paste_event/index.md +++ b/files/en-us/web/api/svggraphicselement/paste_event/index.md @@ -14,29 +14,6 @@ browser-compat: api.Element.paste_event The **`paste`** event is fired on an {{domxref("SVGGraphicsElement")}} when the user has initiated a "paste" action through the browser's user interface. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("ClipboardEvent")}}
Event handler property - {{domxref("SVGGraphicsElement/onpaste", "onpaste")}} -
- If the cursor is in an editable context (for example, in a {{HTMLElement("textarea")}} or an element with [`contenteditable`](/en-US/docs/Web/HTML/Global_attributes/contenteditable) attribute set to `true`) then the default action is to insert the contents of the clipboard into the document at the cursor position. A handler for this event can access the clipboard contents by calling {{domxref("DataTransfer/getData", "getData()")}} on the event's `clipboardData` property. @@ -45,6 +22,22 @@ To override the default behavior (for example to insert some different data or a It's possible to construct and dispatch a [synthetic](/en-US/docs/Web/Events/Creating_and_triggering_events) `paste` event, but this will not affect the document's contents. +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('paste', (event) => { }); + +onpaste = (event) => { }; +``` + +## Event type + +A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("ClipboardEvent")}} + ## Example ### HTML diff --git a/files/en-us/web/api/window/copy_event/index.md b/files/en-us/web/api/window/copy_event/index.md index 85469787ee7053c..e9d7fd96c9354e6 100644 --- a/files/en-us/web/api/window/copy_event/index.md +++ b/files/en-us/web/api/window/copy_event/index.md @@ -16,29 +16,24 @@ browser-compat: api.Element.copy_event The **`copy`** event fires when the user initiates a copy action through the browser's user interface. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("ClipboardEvent")}}
Event handler property{{domxref("HTMLElement/oncopy", "oncopy")}}
- The original target for this event is the {{domxref("Element")}} that was the intended target of the copy action. You can listen for this event on the {{domxref("Window")}} interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the [Element: copy event](/en-US/docs/Web/API/Element/copy_event). +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('copy', (event) => { }); + +oncopy = (event) => { }; +``` + +## Event type + +A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("ClipboardEvent")}} + ## Examples ```js diff --git a/files/en-us/web/api/window/cut_event/index.md b/files/en-us/web/api/window/cut_event/index.md index 0cf44701f4bd1c5..648a489ff0d8064 100644 --- a/files/en-us/web/api/window/cut_event/index.md +++ b/files/en-us/web/api/window/cut_event/index.md @@ -16,29 +16,24 @@ browser-compat: api.Element.cut_event The **`cut`** event is fired when the user has initiated a "cut" action through the browser's user interface. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("ClipboardEvent")}}
Event handler property{{domxref("HTMLElement/oncut", "oncut")}}
- The original target for this event is the {{domxref("Element")}} that was the intended target of the cut action. You can listen for this event on the {{domxref("Window")}} interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the [Element: cut event](/en-US/docs/Web/API/Element/cut_event). +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('cut', (event) => { }); + +oncut = (event) => { }; +``` + +## Event type + +A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("ClipboardEvent")}} + ## Examples ```js diff --git a/files/en-us/web/api/window/domcontentloaded_event/index.md b/files/en-us/web/api/window/domcontentloaded_event/index.md index f9cbeff495f3e76..745ad797e28fa2e 100644 --- a/files/en-us/web/api/window/domcontentloaded_event/index.md +++ b/files/en-us/web/api/window/domcontentloaded_event/index.md @@ -14,31 +14,26 @@ browser-compat: api.Window.DOMContentLoaded_event The **`DOMContentLoaded`** event fires when the initial HTML document has been completely loaded and parsed, without waiting for stylesheets, images, and subframes to finish loading. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableNo
Interface{{domxref("Event")}}
Event handler propertyNone
- The original target for this event is the {{domxref("Document")}} that has loaded. You can listen for this event on the `Window` interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the Document: {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}} event. A different event, {{domxref("Window/load_event", "load")}}, should be used only to detect a fully-loaded page. It is a common mistake to use `load` where `DOMContentLoaded` would be more appropriate. +This event is not cancelable. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('DOMContentLoaded', (event) => {}); + +onDOMContentLoaded = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. + ## Examples ### Basic usage diff --git a/files/en-us/web/api/window/load_event/index.md b/files/en-us/web/api/window/load_event/index.md index 0b0901e9ef1e284..1d32f53fe4f0eb9 100644 --- a/files/en-us/web/api/window/load_event/index.md +++ b/files/en-us/web/api/window/load_event/index.md @@ -14,28 +14,21 @@ browser-compat: api.Window.load_event The **`load`** event is fired when the whole page has loaded, including all dependent resources such as stylesheets and images. This is in contrast to {{domxref("Document/DOMContentLoaded_event", "DOMContentLoaded")}}, which is fired as soon as the page DOM has been loaded, without waiting for resources to finish loading. - - - - - - - - - - - - - - - - - - - -
BubblesNo
CancelableNo
Interface{{domxref("Event")}}
Event handler property - {{domxref("GlobalEventHandlers/onload", "onload")}} -
+This event is not cancelable and does not bubble. + +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('load', (event) => {}); + +onload = (event) => { }; +``` + +## Event type + +A generic {{domxref("Event")}}. ## Examples diff --git a/files/en-us/web/api/window/paste_event/index.md b/files/en-us/web/api/window/paste_event/index.md index 94b4c32bc04fd17..6a88e8b00ef1161 100644 --- a/files/en-us/web/api/window/paste_event/index.md +++ b/files/en-us/web/api/window/paste_event/index.md @@ -15,29 +15,24 @@ browser-compat: api.Element.paste_event The **`paste`** event is fired when the user has initiated a "paste" action through the browser's user interface. - - - - - - - - - - - - - - - - - - - -
BubblesYes
CancelableYes
Interface{{domxref("ClipboardEvent")}}
Event handler property{{domxref("HTMLElement/onpaste", "onpaste")}}
- The original target for this event is the {{domxref("Element")}} that was the intended target of the paste action. You can listen for this event on the {{domxref("Window")}} interface to handle it in the capture or bubbling phases. For full details on this event please see the page on the [Element: paste event](/en-US/docs/Web/API/Element/paste_event). +## Syntax + +Use the event name in methods like {{domxref("EventTarget.addEventListener", "addEventListener()")}}, or set an event handler property. + +```js +addEventListener('paste', (event) => { }); + +onpaste = (event) => { }; +``` + +## Event type + +A {{domxref("ClipboardEvent")}}. Inherits from {{domxref("Event")}}. + +{{InheritanceDiagram("ClipboardEvent")}} + ## Examples ```js From b915d92144008032ed8fc0e145959102010fa011 Mon Sep 17 00:00:00 2001 From: "Queen Vinyl Da.i'gyu-Kazotetsu" Date: Mon, 25 Jul 2022 04:03:29 -0700 Subject: [PATCH 3/4] Apply suggestions from code review Co-authored-by: Jean-Yves Perrier --- files/en-us/web/api/document/dragend_event/index.md | 2 +- files/en-us/web/api/document/dragenter_event/index.md | 2 +- files/en-us/web/api/document/dragleave_event/index.md | 2 +- files/en-us/web/api/document/dragover_event/index.md | 2 +- files/en-us/web/api/document/dragstart_event/index.md | 2 +- files/en-us/web/api/document/drop_event/index.md | 2 +- files/en-us/web/api/element/compositionend_event/index.md | 2 +- files/en-us/web/api/element/compositionstart_event/index.md | 2 +- files/en-us/web/api/element/compositionupdate_event/index.md | 2 +- files/en-us/web/api/element/contextmenu_event/index.md | 2 +- files/en-us/web/api/element/dommousescroll_event/index.md | 2 +- files/en-us/web/api/element/focusin_event/index.md | 2 +- files/en-us/web/api/element/focusout_event/index.md | 2 +- files/en-us/web/api/element/gesturestart_event/index.md | 2 +- files/en-us/web/api/element/mozmousepixelscroll_event/index.md | 2 +- files/en-us/web/api/element/transitionstart_event/index.md | 2 +- .../web/api/element/webkitmouseforcechanged_event/index.md | 2 +- files/en-us/web/api/element/webkitmouseforceup_event/index.md | 2 +- .../web/api/element/webkitmouseforcewillbegin_event/index.md | 2 +- files/en-us/web/api/htmlelement/dragend_event/index.md | 2 +- files/en-us/web/api/htmlelement/dragenter_event/index.md | 2 +- files/en-us/web/api/htmlelement/dragleave_event/index.md | 2 +- files/en-us/web/api/htmlelement/dragover_event/index.md | 2 +- files/en-us/web/api/htmlelement/dragstart_event/index.md | 2 +- files/en-us/web/api/htmlelement/drop_event/index.md | 2 +- files/en-us/web/api/htmlformelement/formdata_event/index.md | 2 +- 26 files changed, 26 insertions(+), 26 deletions(-) diff --git a/files/en-us/web/api/document/dragend_event/index.md b/files/en-us/web/api/document/dragend_event/index.md index 82ea1d86f7bd2d0..e4fa679e1273020 100644 --- a/files/en-us/web/api/document/dragend_event/index.md +++ b/files/en-us/web/api/document/dragend_event/index.md @@ -32,7 +32,7 @@ ondragend = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/document/dragenter_event/index.md b/files/en-us/web/api/document/dragenter_event/index.md index 7f716de1c43f6ef..f66cf92b31fb10c 100644 --- a/files/en-us/web/api/document/dragenter_event/index.md +++ b/files/en-us/web/api/document/dragenter_event/index.md @@ -32,7 +32,7 @@ ondragenter = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/document/dragleave_event/index.md b/files/en-us/web/api/document/dragleave_event/index.md index 8742f120afe3beb..12b83f45a377c89 100644 --- a/files/en-us/web/api/document/dragleave_event/index.md +++ b/files/en-us/web/api/document/dragleave_event/index.md @@ -32,7 +32,7 @@ ondragleave = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/document/dragover_event/index.md b/files/en-us/web/api/document/dragover_event/index.md index ef3d773955491c9..0f3b0ab658234a2 100644 --- a/files/en-us/web/api/document/dragover_event/index.md +++ b/files/en-us/web/api/document/dragover_event/index.md @@ -31,7 +31,7 @@ ondragover = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/document/dragstart_event/index.md b/files/en-us/web/api/document/dragstart_event/index.md index 4c74604edc811e1..a52474b3484b1d5 100644 --- a/files/en-us/web/api/document/dragstart_event/index.md +++ b/files/en-us/web/api/document/dragstart_event/index.md @@ -27,7 +27,7 @@ ondragstart = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/document/drop_event/index.md b/files/en-us/web/api/document/drop_event/index.md index 3b63c75bb7c7dd4..200bdbc18de35a3 100644 --- a/files/en-us/web/api/document/drop_event/index.md +++ b/files/en-us/web/api/document/drop_event/index.md @@ -28,7 +28,7 @@ ondrop = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/element/compositionend_event/index.md b/files/en-us/web/api/element/compositionend_event/index.md index 8759fb86ba2da0c..d6d058d59cf9990 100644 --- a/files/en-us/web/api/element/compositionend_event/index.md +++ b/files/en-us/web/api/element/compositionend_event/index.md @@ -25,7 +25,7 @@ oncompositionend = (event) => { }; ## Event type -An {{domxref("CompositionEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("CompositionEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("CompositionEvent")}} diff --git a/files/en-us/web/api/element/compositionstart_event/index.md b/files/en-us/web/api/element/compositionstart_event/index.md index 4a5642242163b05..6fc01525f1f3014 100644 --- a/files/en-us/web/api/element/compositionstart_event/index.md +++ b/files/en-us/web/api/element/compositionstart_event/index.md @@ -28,7 +28,7 @@ oncompositionstart = (event) => { }; ## Event type -An {{domxref("CompositionEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("CompositionEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("CompositionEvent")}} diff --git a/files/en-us/web/api/element/compositionupdate_event/index.md b/files/en-us/web/api/element/compositionupdate_event/index.md index e8af284b3428e82..f1550d4506a1520 100644 --- a/files/en-us/web/api/element/compositionupdate_event/index.md +++ b/files/en-us/web/api/element/compositionupdate_event/index.md @@ -25,7 +25,7 @@ oncompositionupdate = (event) => { }; ## Event type -An {{domxref("CompositionEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("CompositionEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("CompositionEvent")}} diff --git a/files/en-us/web/api/element/contextmenu_event/index.md b/files/en-us/web/api/element/contextmenu_event/index.md index 3aa5b220a9a61bc..a75f9a732701bd7 100644 --- a/files/en-us/web/api/element/contextmenu_event/index.md +++ b/files/en-us/web/api/element/contextmenu_event/index.md @@ -39,7 +39,7 @@ oncontextmenu = (event) => { }; ## Event type -An {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("MouseEvent")}} diff --git a/files/en-us/web/api/element/dommousescroll_event/index.md b/files/en-us/web/api/element/dommousescroll_event/index.md index d4e7b7accc9d23e..98ea56548b93462 100644 --- a/files/en-us/web/api/element/dommousescroll_event/index.md +++ b/files/en-us/web/api/element/dommousescroll_event/index.md @@ -42,7 +42,7 @@ onDOMMouseScroll = (event) => { }; ## Event type -An {{domxref("MouseWheelEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("MouseWheelEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("MouseWheelEvent")}} diff --git a/files/en-us/web/api/element/focusin_event/index.md b/files/en-us/web/api/element/focusin_event/index.md index 7db67d0cf93cf8f..0cc7cca106941a1 100644 --- a/files/en-us/web/api/element/focusin_event/index.md +++ b/files/en-us/web/api/element/focusin_event/index.md @@ -32,7 +32,7 @@ onfocusin = (event) => { }; ## Event type -An {{domxref("FocusEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("FocusEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("FocusEvent")}} diff --git a/files/en-us/web/api/element/focusout_event/index.md b/files/en-us/web/api/element/focusout_event/index.md index 0a0803c9e3a17a6..f3b025fd1da88cf 100644 --- a/files/en-us/web/api/element/focusout_event/index.md +++ b/files/en-us/web/api/element/focusout_event/index.md @@ -31,7 +31,7 @@ onfocusout = (event) => { }; ## Event type -An {{domxref("FocusEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("FocusEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("FocusEvent")}} diff --git a/files/en-us/web/api/element/gesturestart_event/index.md b/files/en-us/web/api/element/gesturestart_event/index.md index f091ee2710e2c0e..4c0900bfc26bb5f 100644 --- a/files/en-us/web/api/element/gesturestart_event/index.md +++ b/files/en-us/web/api/element/gesturestart_event/index.md @@ -26,7 +26,7 @@ onNameOfTheEvent = (event) => { }; ## Event type -An {{domxref("GestureEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("GestureEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("GestureEvent")}} diff --git a/files/en-us/web/api/element/mozmousepixelscroll_event/index.md b/files/en-us/web/api/element/mozmousepixelscroll_event/index.md index abef5bae50d15e1..6d8392ee815f800 100644 --- a/files/en-us/web/api/element/mozmousepixelscroll_event/index.md +++ b/files/en-us/web/api/element/mozmousepixelscroll_event/index.md @@ -35,7 +35,7 @@ onMozMousePixelScroll = (event) => { }; ## Event type -An {{domxref("MouseWheelEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("MouseWheelEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("MouseWheelEvent")}} diff --git a/files/en-us/web/api/element/transitionstart_event/index.md b/files/en-us/web/api/element/transitionstart_event/index.md index 6955cba1c190093..a04f9ac9a0689ee 100644 --- a/files/en-us/web/api/element/transitionstart_event/index.md +++ b/files/en-us/web/api/element/transitionstart_event/index.md @@ -30,7 +30,7 @@ ontransitionstart = (event) => { }; ## Event type -An {{domxref("TransitionEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("TransitionEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("TransitionEvent")}} diff --git a/files/en-us/web/api/element/webkitmouseforcechanged_event/index.md b/files/en-us/web/api/element/webkitmouseforcechanged_event/index.md index c8f0d069735ee83..d1843f81b974d12 100644 --- a/files/en-us/web/api/element/webkitmouseforcechanged_event/index.md +++ b/files/en-us/web/api/element/webkitmouseforcechanged_event/index.md @@ -40,7 +40,7 @@ onwebkitmouseforcechanged = (event) => { }; ## Event type -An {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("MouseEvent")}} diff --git a/files/en-us/web/api/element/webkitmouseforceup_event/index.md b/files/en-us/web/api/element/webkitmouseforceup_event/index.md index bcc30da6ceb4152..c3451e743897798 100644 --- a/files/en-us/web/api/element/webkitmouseforceup_event/index.md +++ b/files/en-us/web/api/element/webkitmouseforceup_event/index.md @@ -40,7 +40,7 @@ onwebkitmouseforceup = (event) => { }; ## Event type -An {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("MouseEvent")}} diff --git a/files/en-us/web/api/element/webkitmouseforcewillbegin_event/index.md b/files/en-us/web/api/element/webkitmouseforcewillbegin_event/index.md index e685060b0b41d7e..2ce66c6dd1bba6c 100644 --- a/files/en-us/web/api/element/webkitmouseforcewillbegin_event/index.md +++ b/files/en-us/web/api/element/webkitmouseforcewillbegin_event/index.md @@ -42,7 +42,7 @@ onwebkitmouseforceup = (event) => { }; ## Event type -An {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("MouseEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("MouseEvent")}} diff --git a/files/en-us/web/api/htmlelement/dragend_event/index.md b/files/en-us/web/api/htmlelement/dragend_event/index.md index 6240bae1fec5d7f..c6d57d0d5b48ec8 100644 --- a/files/en-us/web/api/htmlelement/dragend_event/index.md +++ b/files/en-us/web/api/htmlelement/dragend_event/index.md @@ -30,7 +30,7 @@ ondragend = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/htmlelement/dragenter_event/index.md b/files/en-us/web/api/htmlelement/dragenter_event/index.md index f0626cf19ba6e4d..3adc49eb083c3e1 100644 --- a/files/en-us/web/api/htmlelement/dragenter_event/index.md +++ b/files/en-us/web/api/htmlelement/dragenter_event/index.md @@ -32,7 +32,7 @@ ondragenter = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/htmlelement/dragleave_event/index.md b/files/en-us/web/api/htmlelement/dragleave_event/index.md index f36a41817ecb0ed..1c3ac1d60fc18f0 100644 --- a/files/en-us/web/api/htmlelement/dragleave_event/index.md +++ b/files/en-us/web/api/htmlelement/dragleave_event/index.md @@ -32,7 +32,7 @@ ondragleave = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/htmlelement/dragover_event/index.md b/files/en-us/web/api/htmlelement/dragover_event/index.md index df2513b9aa83a77..36a913aa9f1d8e6 100644 --- a/files/en-us/web/api/htmlelement/dragover_event/index.md +++ b/files/en-us/web/api/htmlelement/dragover_event/index.md @@ -31,7 +31,7 @@ ondragover = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/htmlelement/dragstart_event/index.md b/files/en-us/web/api/htmlelement/dragstart_event/index.md index d510ad87857ef17..c273b3dabdf7f6f 100644 --- a/files/en-us/web/api/htmlelement/dragstart_event/index.md +++ b/files/en-us/web/api/htmlelement/dragstart_event/index.md @@ -25,7 +25,7 @@ ondragstart = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/htmlelement/drop_event/index.md b/files/en-us/web/api/htmlelement/drop_event/index.md index 310f80151eb8191..0472c5ae7269365 100644 --- a/files/en-us/web/api/htmlelement/drop_event/index.md +++ b/files/en-us/web/api/htmlelement/drop_event/index.md @@ -28,7 +28,7 @@ ondrop = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}} diff --git a/files/en-us/web/api/htmlformelement/formdata_event/index.md b/files/en-us/web/api/htmlformelement/formdata_event/index.md index 5d999a638cb45ed..4ae36fe320ece88 100644 --- a/files/en-us/web/api/htmlformelement/formdata_event/index.md +++ b/files/en-us/web/api/htmlformelement/formdata_event/index.md @@ -27,7 +27,7 @@ onformdata = (event) => { }; ## Event type -An {{domxref("FormDataEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("FormDataEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("FormDataEvent")}} From 55cb9f6bb8c6650633977517107b099f99972f30 Mon Sep 17 00:00:00 2001 From: Jean-Yves Perrier Date: Mon, 25 Jul 2022 15:18:07 +0200 Subject: [PATCH 4/4] Update files/en-us/web/api/document/drag_event/index.md --- files/en-us/web/api/document/drag_event/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/api/document/drag_event/index.md b/files/en-us/web/api/document/drag_event/index.md index 4dc137a634cc3f4..7b008d34a14eacb 100644 --- a/files/en-us/web/api/document/drag_event/index.md +++ b/files/en-us/web/api/document/drag_event/index.md @@ -30,7 +30,7 @@ ondrag = (event) => { }; ## Event type -An {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. +A {{domxref("DragEvent")}}. Inherits from {{domxref("Event")}}. {{InheritanceDiagram("DragEvent")}}