Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Update some remaining event pages to conform to new template #18732

Merged
merged 4 commits into from
Jul 25, 2022
Merged

Update some remaining event pages to conform to new template #18732

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9d7d127
Update all remaining event pages to conform to new template
queengooborg Jul 24, 2022
82e85b4
Convert more event pages
queengooborg Jul 25, 2022
b915d92
Apply suggestions from code review
queengooborg Jul 25, 2022
55cb9f6
Update files/en-us/web/api/document/drag_event/index.md
teoli2003 Jul 25, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
37 changes: 16 additions & 21 deletions files/en-us/web/api/document/domcontentloaded_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("Event")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>None</td>
</tr>
</tbody>
</table>

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.
Expand Down
48 changes: 22 additions & 26 deletions files/en-us/web/api/document/drag_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Default action</th>
<td>Continue the drag &#x26; drop operation.</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("DragEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{domxref("GlobalEventHandlers/ondrag", "ondrag")}}
</td>
</tr>
</tbody>
</table>
## 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

A {{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

Expand Down
50 changes: 24 additions & 26 deletions files/en-us/web/api/document/dragend_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Default action</th>
<td>Varies</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("DragEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{domxref("GlobalEventHandlers/ondragend", "ondragend")}}
</td>
</tr>
</tbody>
</table>
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

A {{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

Expand Down
48 changes: 22 additions & 26 deletions files/en-us/web/api/document/dragenter_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Default action</th>
<td>Reject immediate user selection as potential target element.</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("DragEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{domxref("GlobalEventHandlers/ondragenter", "ondragenter")}}
</td>
</tr>
</tbody>
</table>
## 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

A {{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

Expand Down
50 changes: 24 additions & 26 deletions files/en-us/web/api/document/dragleave_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>No</td>
</tr>
<tr>
<th scope="row">Default action</th>
<td>None.</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("DragEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{domxref("GlobalEventHandlers/ondragleave", "ondragleave")}}
</td>
</tr>
</tbody>
</table>
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

A {{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

Expand Down
48 changes: 22 additions & 26 deletions files/en-us/web/api/document/dragover_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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).

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Default action</th>
<td>Reset the current drag operation to "none".</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("DragEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{domxref("GlobalEventHandlers/ondragover", "ondragover")}}
</td>
</tr>
</tbody>
</table>
## 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

A {{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

Expand Down
50 changes: 24 additions & 26 deletions files/en-us/web/api/document/dragstart_event/index.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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.

<table class="properties">
<tbody>
<tr>
<th scope="row">Bubbles</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Cancelable</th>
<td>Yes</td>
</tr>
<tr>
<th scope="row">Default action</th>
<td>Initiate the drag-and-drop operation.</td>
</tr>
<tr>
<th scope="row">Interface</th>
<td>{{domxref("DragEvent")}}</td>
</tr>
<tr>
<th scope="row">Event handler property</th>
<td>
{{domxref("GlobalEventHandlers/ondragstart", "ondragstart")}}
</td>
</tr>
</tbody>
</table>
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

A {{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

Expand Down
Loading