Skip to content

Move Events reference as one article under DOM API #40443

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.

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

Merged
merged 6 commits into from
Jul 29, 2025
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
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
92 changes: 47 additions & 45 deletions files/en-us/_redirects.txt

Large diffs are not rendered by default.

196 changes: 61 additions & 135 deletions files/en-us/_wikihistory.json
Original file line number Diff line number Diff line change
Expand Up @@ -29492,6 +29492,67 @@
"Dria"
]
},
"Web/API/Document_Object_Model/Events": {
"modified": "2020-08-02T16:56:22.810Z",
"contributors": [
"FreshCapsule",
"Zearin_Galaurum",
"bartdorsey",
"jeremykohn",
"AlexandraDima",
"alattalatta",
"mfuji09",
"wbamberg",
"estelle",
"9999472",
"chrisdavidmills",
"mfluehr",
"chharvey",
"ExE-Boss",
"karbassi",
"tuespetre",
"karlstolley",
"GuilloOme",
"Sheppy",
"JessePotterMusic",
"WhiteHawk-taka",
"rosannaberardi",
"2xblue",
"HaehnleinMar",
"gacar",
"neo1691",
"shtarbanov",
"GijsKruitbosch",
"jpmedley",
"slimsag",
"bep",
"teoli",
"AFBarstow",
"fscholz",
"Flaki",
"abidalianjum428",
"Nickolay",
"emersonveenstra",
"LoTD",
"Minat",
"Penny",
"jensen",
"morello",
"jscape",
"kohei.yoshino",
"WP-Makyen",
"mkretschek",
"kscarfone",
"Jeremie",
"srasku",
"ethertank",
"maybe",
"complynx",
"louisremi",
"Pettay",
"Pomax"
]
},
"Web/API/Document_Object_Model/Examples": {
"modified": "2020-05-26T10:30:16.020Z",
"contributors": [
Expand Down Expand Up @@ -90072,141 +90133,6 @@
"jackarmley"
]
},
"Web/Events": {
"modified": "2020-08-02T16:56:22.810Z",
"contributors": [
"FreshCapsule",
"Zearin_Galaurum",
"bartdorsey",
"jeremykohn",
"AlexandraDima",
"alattalatta",
"mfuji09",
"wbamberg",
"estelle",
"9999472",
"chrisdavidmills",
"mfluehr",
"chharvey",
"ExE-Boss",
"karbassi",
"tuespetre",
"karlstolley",
"GuilloOme",
"Sheppy",
"JessePotterMusic",
"WhiteHawk-taka",
"rosannaberardi",
"2xblue",
"HaehnleinMar",
"gacar",
"neo1691",
"shtarbanov",
"GijsKruitbosch",
"jpmedley",
"slimsag",
"bep",
"teoli",
"AFBarstow",
"fscholz",
"Flaki",
"abidalianjum428",
"Nickolay",
"emersonveenstra",
"LoTD",
"Minat",
"Penny",
"jensen",
"morello",
"jscape",
"kohei.yoshino",
"WP-Makyen",
"mkretschek",
"kscarfone",
"Jeremie",
"srasku",
"ethertank",
"maybe",
"complynx",
"louisremi",
"Pettay",
"Pomax"
]
},
"Web/Events/Creating_and_triggering_events": {
"modified": "2020-06-30T17:30:47.991Z",
"contributors": [
"drklee3",
"AAlakkad",
"sunnykgupta",
"ciffelia",
"depthdev",
"yanlee26",
"fscholz",
"Tombez",
"napengam",
"vp2177",
"pawlufelice",
"deebloo",
"Nickolay",
"ziyunfei",
"matajm",
"swrobel",
"lukaszzdanikowski",
"soren121",
"Andreas-Hjortland",
"alexilyaev",
"DiegoYungh",
"chrisra",
"ratcliffe_mike",
"guest0430",
"mnoorenberghe",
"Jeremie",
"Sheppy",
"diego.perini",
"cHao",
"kscarfone",
"Ms2ger",
"Brettz9",
"ebidel",
"paul.irish",
"jeremyfifty9",
"Sertion",
"Sephr",
"ernestd",
"hamishwillee"
]
},
"Web/Events/Event_handlers": {
"modified": "2020-08-24T04:12:31.453Z",
"contributors": [
"mfuji09",
"EdgarBarrantes",
"chrisdavidmills",
"gliesefire",
"zin445",
"Nozomi3",
"Sheppy",
"HiEv",
"Tigt",
"jswisher",
"nadieenespecial",
"mvasin",
"fscholz",
"Onkar316",
"wxdude225",
"DailyAlice",
"david_ross",
"rolfedh",
"Nickolay",
"pcat",
"majido",
"markg",
"chrisAnderson",
"Jeremie",
"Bzbarsky"
]
},
"Web/Guide/Parsing_and_serializing_XML": {
"modified": "2020-09-09T05:19:22.895Z",
"contributors": [
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -428,8 +428,8 @@ Next up, you'll find a challenge that will test your understanding of the last f

- [domevents.dev](https://domevents.dev/)
- : A useful interactive playground app that enables learning about the behavior of the DOM Event system through exploration.
- [Event reference](/en-US/docs/Web/Events)
- : The main MDN event reference.
- [DOM events](/en-US/docs/Web/API/Document_Object_Model/Events)
- : A comprehensive guide for understanding and handling events.
- [Event order](https://www.quirksmode.org/js/events_order.html)
- : An excellently detailed discussion of capturing and bubbling by Peter-Paul Koch.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ For example:
- A video is played, paused, or ends.
- An error occurs.

You can gather from this (and from glancing at the MDN [event reference](/en-US/docs/Web/Events)) that there are **a lot** of events that can be fired.
You can gather from this (and from glancing at the [event index](/en-US/docs/Web/API/Document_Object_Model/Events#event_index)) that there are **a lot** of events that can be fired.

To react to an event, you attach an **event listener** to it. This is a code feature that listens out for the event firing. When the event fires, an **event handler** function (referenced by, or contained inside the event listener) is called to respond to the event firing. When such a block of code is set up to run in response to an event, we say we are **registering an event handler**.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -41,11 +41,11 @@ window.addEventListener("keyup", handleKeyUp, true);
`handleKeyDown` and `handleKeyUp` are functions defining the control logic to be executed when the `keydown` and `keyup` events are fired.

> [!NOTE]
> Have a look at the [Events reference](/en-US/docs/Web/Events) and {{domxref("KeyboardEvent")}} guide to find out more about keyboard events.
> See the [DOM events](/en-US/docs/Web/API/Document_Object_Model/Events) guide and the {{domxref("KeyboardEvent")}} reference to find out more about keyboard events.

### Mouse

You can also capture mouse and other pointer events. The events occurring when the user interacts with a pointing device such as a mouse are represented by the {{domxref("MouseEvent")}} DOM Interface. Common mouse events include [`click`](/en-US/docs/Web/API/Element/click_event), [`dblclick`](/en-US/docs/Web/API/Element/dblclick_event), [`mouseup`](/en-US/docs/Web/API/Element/mouseup_event), and [`mousedown`](/en-US/docs/Web/API/Element/mousedown_event). The list of all events using the Mouse Event Interface is provided in the [Events reference](/en-US/docs/Web/Events).
You can also capture mouse and other pointer events. The events occurring when the user interacts with a pointing device such as a mouse are represented by the {{domxref("MouseEvent")}} DOM Interface. Common mouse events include [`click`](/en-US/docs/Web/API/Element/click_event), [`dblclick`](/en-US/docs/Web/API/Element/dblclick_event), [`mouseup`](/en-US/docs/Web/API/Element/mouseup_event), and [`mousedown`](/en-US/docs/Web/API/Element/mousedown_event). The list of all events using the Mouse Event Interface is provided in the [DOM events](/en-US/docs/Web/API/Document_Object_Model/Events#event_index) guide.

When the input device is a mouse, you can also control user input through the Pointer Lock API and implement Drag & Drop (see below). You can also [use CSS to test for pointer device](/en-US/docs/Learn_web_development/Core/CSS_layout/Media_queries#use_of_pointing_devices) support.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -72,7 +72,7 @@ An entry in `GroupData.json` has the following structure:
> [!NOTE]
> The properties of the interfaces listed in `"interfaces"` **must** not be listed there. They are automatically added to the sidebar if the `page-type` key for that page is `web-api-static-property` or `web-api-instance-property`.
- `"events"`
- : This lists events of other interfaces that are part of the API. The values are the _title of the pages_ (that must reside under `Web/Events`)
- : This lists events of other interfaces that are part of the API. The values are the _title of the pages_.
> [!NOTE]
> The events targeting the interfaces listed in `"interfaces"` **must** not be listed there. They are automatically added to the sidebar if the `page-type` key for that page is `web-api-event`.

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -84,7 +84,7 @@ sidebar: mdnsidebar
> For example, [Element: wheel event](/en-US/docs/Web/API/Element/wheel_event) is linked from [`Element` Events](/en-US/docs/Web/API/Element#events).
>
> If the parent object does not have an _Events_ section, then add one.
> If this is a new "class" of event, then you should add a link to this section of the parent from the [Event reference](/en-US/docs/Web/Events).
> If this is a new "class" of event, then you should add a link to this section of the parent from the [DOM events](/en-US/docs/Web/API/Document_Object_Model/Events#event_index) guide.
>
> _Remember to remove this whole explanatory note before publishing._

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/mozilla/firefox/releases/9/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -43,7 +43,7 @@ _No change._
- DOM Level 3 [composition events](/en-US/docs/Web/API/CompositionEvent) are now supported.
- The {{ domxref("Document.scripts") }} attribute has been implemented; this returns an {{ domxref("HTMLCollection") }} of all the {{ HTMLElement("script") }} elements on the document.
- The {{ domxref("Document.queryCommandSupported()") }} method has been implemented.
- The set of events that can be listened for on {{ HTMLElement("body") }} elements has been revised to match the latest draft of the HTML5 specification. The list of events in the [DOM event reference](/en-US/docs/Web/Events) reflects which events can be listened for on {{ HTMLElement("body") }}.
- The set of events that can be listened for on {{ HTMLElement("body") }} elements has been revised to match the latest draft of the HTML5 specification. The list of events in the [DOM events](/en-US/docs/Web/API/Document_Object_Model/Events#event_index) guide reflects which events can be listened for on {{ HTMLElement("body") }}.
- The `readystatechange` event is now fired only on the {{ domxref("Document") }}, as intended.
- Event handlers are now implemented as standard IDL interfaces. For most cases, this won't affect content, but there are exceptions.
- A new response type, `"moz-json"`, has been added to `XMLHttpRequest`, letting `XMLHttpRequest` automatically parse [JSON](/en-US/docs/Glossary/JSON) strings for you; when you request this type, a returned JSON string is parsed, so that the value of the `response` property is the resulting JavaScript object.
Expand Down
4 changes: 2 additions & 2 deletions files/en-us/web/api/customevent/customevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -58,7 +58,7 @@ element.dispatchEvent(dogFound);
// "cat" and "dog" logged in the console
```

Additional examples can be found at [Creating and triggering events](/en-US/docs/Web/Events/Creating_and_triggering_events).
Additional examples can be found at [Creating and dispatching events](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events).

## Specifications

Expand All @@ -71,4 +71,4 @@ Additional examples can be found at [Creating and triggering events](/en-US/docs
## See also

- {{domxref("CustomEvent")}}
- [Creating and triggering events](/en-US/docs/Web/Events/Creating_and_triggering_events)
- [Creating and dispatching events](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events)
4 changes: 2 additions & 2 deletions files/en-us/web/api/customevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -9,7 +9,7 @@ browser-compat: api.CustomEvent

The **`CustomEvent`** interface can be used to attach custom data to an event generated by an application.

As an alternative to `CustomEvent`, you can [subclass the `Event` interface](/en-US/docs/Web/Events/Creating_and_triggering_events#adding_custom_data_–_subclassing_event) to add custom data and behavior.
As an alternative to `CustomEvent`, you can [subclass the `Event` interface](/en-US/docs/Web/API/Document_Object_Model/Events#adding_custom_data_–_subclassing_event) to add custom data and behavior.

> [!NOTE]
> If used to attempt to communicate between a web extension content script and a web page script, a non-string `detail` property throws with "Permission denied to access property" in Firefox. To avoid this issue clone the object. See [Share objects with page scripts](/en-US/docs/Mozilla/Add-ons/WebExtensions/Sharing_objects_with_page_scripts) for more information.
Expand Down Expand Up @@ -46,4 +46,4 @@ _This interface inherits methods from its parent, {{domxref("Event")}}._
## See also

- {{domxref("Window.postMessage()")}}
- [Creating and triggering events](/en-US/docs/Web/Events/Creating_and_triggering_events)
- [Creating and dispatching events](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events)
2 changes: 1 addition & 1 deletion files/en-us/web/api/customevent/initcustomevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,7 +21,7 @@ Once dispatched, it doesn't do anything anymore.
> **Do not use this method anymore, as it is deprecated.**
>
> Rather than using the feature, instead use specific event constructors, like {{domxref("CustomEvent.CustomEvent", "CustomEvent()")}}.
> The page on [Creating and triggering events](/en-US/docs/Web/Events/Creating_and_triggering_events) gives more information about the way to use those.
> The section on [Creating and dispatching events](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events) gives more information about the way to use those.

## Syntax

Expand Down
2 changes: 1 addition & 1 deletion files/en-us/web/api/document/createevent/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -71,4 +71,4 @@ are the modern recommended way to create event object instances.

## See also

- [Creating and triggering events](/en-US/docs/Web/Events/Creating_and_triggering_events)
- [Creating and dispatching events](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events)
Loading