diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 28bcb3b57f3434c..d092fdd8e32bc2c 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -8174,6 +8174,7 @@ /en-US/docs/Web/API/GlobalEventHandlers/onselect /en-US/docs/Web/API/HTMLInputElement/select_event /en-US/docs/Web/API/GlobalEventHandlers/onselectionchange /en-US/docs/Web/API/HTMLInputElement/selectionchange_event /en-US/docs/Web/API/GlobalEventHandlers/onselectstart /en-US/docs/Web/API/Document/selectstart_event +/en-US/docs/Web/API/GlobalEventHandlers/onslotchange /en-US/docs/Web/API/HTMLSlotElement/slotchange_event /en-US/docs/Web/API/GlobalEventHandlers/onsubmit /en-US/docs/Web/API/HTMLFormElement/submit_event /en-US/docs/Web/API/GlobalEventHandlers/ontouchcancel /en-US/docs/Web/API/Element/touchcancel_event /en-US/docs/Web/API/GlobalEventHandlers/ontouchend /en-US/docs/Web/API/Element/touchend_event diff --git a/files/en-us/mozilla/firefox/releases/93/index.md b/files/en-us/mozilla/firefox/releases/93/index.md index 7b3220636ae3f4b..0c672463c5f0577 100644 --- a/files/en-us/mozilla/firefox/releases/93/index.md +++ b/files/en-us/mozilla/firefox/releases/93/index.md @@ -45,7 +45,7 @@ This article provides information about the changes in Firefox 93 that will affe - The {{domxref("GlobalEventHandlers.onsecuritypolicyviolation","onsecuritypolicyviolation")}} global event handler property is now supported. This can be used to assign a handler for processing [`securitypolicyviolation`](/en-US/docs/Web/API/Element/securitypolicyviolation_event) events fired when there is a [Content Security Policy](/en-US/docs/Web/HTTP/CSP) violation ({{bug(1727302)}}). -- The `onslotchange` event handler property is now supported on {{domxref("GlobalEventHandlers.onslotchange","GlobalEventHandlers")}} and {{domxref("ShadowRoot.onslotchange","ShadowRoot")}}. +- The `onslotchange` event handler property is now supported on {{domxref("HTMLSlotElement.onslotchange","HTMLSlotElement")}} and {{domxref("ShadowRoot.onslotchange","ShadowRoot")}}. This can be used to assign a handler for processing [`slotchange`](/en-US/docs/Web/API/HTMLSlotElement/slotchange_event) events, which are fired on {{HTMLElement("slot")}} elements when the node(s) contained in the slot change ({{bug(1501983)}}). #### Removals diff --git a/files/en-us/web/api/globaleventhandlers/index.md b/files/en-us/web/api/globaleventhandlers/index.md index 54f726854eff04e..9848375edeb27a7 100644 --- a/files/en-us/web/api/globaleventhandlers/index.md +++ b/files/en-us/web/api/globaleventhandlers/index.md @@ -92,9 +92,7 @@ These event handlers are defined on the {{domxref("GlobalEventHandlers")}} mixin - {{domxref("GlobalEventHandlers.onseeking")}} - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{event("seeking")}} event is raised. - {{domxref("GlobalEventHandlers.onshow")}} {{Deprecated_Inline}} - - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("Element/show_event", "show")}} event is raised. -- {{domxref("GlobalEventHandlers.onslotchange")}} - - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLSlotElement/slotchange_event", "slotchange")}} event is raised. + - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{event("show")}} event is raised. - {{domxref("GlobalEventHandlers.onstalled")}} - : An [event handler](/en-US/docs/Web/Events/Event_handlers) representing the code to be called when the {{domxref("HTMLMediaElement/stalled_event", "stalled")}} event is raised. - {{domxref("GlobalEventHandlers.onsuspend")}} diff --git a/files/en-us/web/api/globaleventhandlers/onslotchange/index.md b/files/en-us/web/api/globaleventhandlers/onslotchange/index.md deleted file mode 100644 index 25e5bc56d9490dc..000000000000000 --- a/files/en-us/web/api/globaleventhandlers/onslotchange/index.md +++ /dev/null @@ -1,62 +0,0 @@ ---- -title: GlobalEventHandlers.onslotchange -slug: Web/API/GlobalEventHandlers/onslotchange -page-type: web-api-instance-property -tags: - - API - - Event Handler - - Experimental - - GlobalEventHandlers - - Property - - Reference - - Shadow DOM API - - slot - - slotchange - - onslotchange -browser-compat: api.GlobalEventHandlers.onslotchange ---- -{{ApiRef('DOM')}}{{SeeCompatTable}} - -The **`onslotchange`** property of the {{domxref("GlobalEventHandlers")}} mixin is an [event handler](/en-US/docs/Web/Events/Event_handlers) that processes {{domxref("HTMLSlotElement/slotchange_event", "slotchange")}} events. - -The `slotchange` event is fired on {{DOMxRef("HTMLSlotElement")}} instances ({{HTMLElement("slot")}} elements) when the node(s) contained in the slot change. - -## Examples - -The following snippet is a slightly modified version of our [slotchange example](https://github.com/mdn/web-components-examples/tree/main/slotchange) which uses `onslotchange` rather than adding a listener for the `slotchange` event. - -First the code gets an array of all the ``s and then assigns a handler function to the `onslotchange` property on the template's second slot — this second slot is the one that has its contents changed in the example. -Every time the element in the slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is. - -```js -let slots = this.shadowRoot.querySelectorAll('slot'); -slots[1].onslotchange = function(e) { - let nodes = slots[1].assignedNodes(); - console.log('Element in Slot "' + slots[1].name + '" changed to "' + nodes[0].outerHTML + '".'); -}; -``` - -We might alternatively handle the event at a higher level. -The snippet below shows the equivalent code if the handler is assigned to `onslotchange` on the `shadowRoot`. -Every time the element in any slot changes, we log a report to the console saying which slot has changed, and what the new node inside the slot is. - -```js -this.shadowRoot.onslotchange = function(e) { - const nodes = e.originalTarget.assignedNodes(); - console.log(`Element in Slot "${e.originalTarget.name}" changed to "${nodes[0].outerHTML}".`); -}; -``` - -## Specifications - -{{Specifications}} - -## Browser compatibility - -{{Compat}} - -## See also - -- [Using templates and slots](/en-US/docs/Web/Web_Components/Using_templates_and_slots) -- {{domxref("HTMLSlotElement/slotchange_event", "slotchange")}} event -- {{domxref("HTMLSlotElement")}} diff --git a/files/en-us/web/api/shadowroot/onslotchange/index.md b/files/en-us/web/api/shadowroot/onslotchange/index.md index 1faaf569bd1cbb1..e4d969b228f67e3 100644 --- a/files/en-us/web/api/shadowroot/onslotchange/index.md +++ b/files/en-us/web/api/shadowroot/onslotchange/index.md @@ -47,4 +47,4 @@ this.shadowRoot.onslotchange = function(e) { - [Using templates and slots](/en-US/docs/Web/Web_Components/Using_templates_and_slots) - {{domxref("HTMLSlotElement/slotchange_event", "slotchange")}} event - {{domxref("HTMLSlotElement")}} -- {{domxref("GlobalEventHandlers.onslotchange")}} +- {{domxref("HTMLSlotElement.onslotchange")}}