From a453f4ec0daccee0c6918ad31061b2c1e23e09f5 Mon Sep 17 00:00:00 2001 From: estelle Date: Mon, 20 Oct 2025 11:53:13 +0200 Subject: [PATCH 1/5] SVG event handlers: optional edit --- .../web/svg/reference/attribute/index.md | 141 +++++++++--------- 1 file changed, 74 insertions(+), 67 deletions(-) diff --git a/files/en-us/web/svg/reference/attribute/index.md b/files/en-us/web/svg/reference/attribute/index.md index 4b201bd4fcd37d4..9d6cca3f363f4e8 100644 --- a/files/en-us/web/svg/reference/attribute/index.md +++ b/files/en-us/web/svg/reference/attribute/index.md @@ -415,73 +415,80 @@ Below is a list of all of the attributes available in SVG along with links to re ### Event attributes -- **`onabort`** -- **`onactivate`** -- **`onbegin`** -- **`oncancel`** -- **`oncanplay`** -- **`oncanplaythrough`** -- **`onchange`** -- **`onclick`** -- **`onclose`** -- **`oncuechange`** -- **`ondblclick`** -- **`ondrag`** -- **`ondragend`** -- **`ondragenter`** -- **`ondragleave`** -- **`ondragover`** -- **`ondragstart`** -- **`ondrop`** -- **`ondurationchange`** -- **`onemptied`** -- **`onend`** -- **`onended`** -- **`onerror`** -- **`onerror`** -- **`onfocus`** -- **`onfocusin`** -- **`onfocusout`** -- **`oninput`** -- **`oninvalid`** -- **`onkeydown`** -- **`onkeypress`** -- **`onkeyup`** -- **`onload`** -- **`onloadeddata`** -- **`onloadedmetadata`** -- **`onloadstart`** -- **`onmousedown`** -- **`onmouseenter`** -- **`onmouseleave`** -- **`onmousemove`** -- **`onmouseout`** -- **`onmouseover`** -- **`onmouseup`** -- **`onmousewheel`** -- **`onpause`** -- **`onplay`** -- **`onplaying`** -- **`onprogress`** -- **`onratechange`** -- **`onrepeat`** -- **`onreset`** -- **`onresize`** -- **`onresize`** -- **`onscroll`** -- **`onscroll`** -- **`onseeked`** -- **`onseeking`** -- **`onselect`** -- **`onshow`** -- **`onstalled`** -- **`onsubmit`** -- **`onsuspend`** -- **`ontimeupdate`** -- **`ontoggle`** -- **`onunload`** -- **`onvolumechange`** -- **`onwaiting`** +Event handler attributes are discouraged. While the attributes listed below apply to all HTML and SVG elements, they are not useful on all elements. For example, the `oncuechange` attribute is accepted by all elements and attaches an event listener for `cuechange`, but only {{htmlelement("track")}} elements will ever receive a `cuechange` event fired by the browser. For other elements, you can only use {{domxref("EventTarget.dispatchEvent()")}} to manually dispatch one. + +- {{domxref("HTMLMediaElement/abort_event", "onabort")}} +- {{domxref("Element/auxclick_event", "auxclick")}} +- {{domxref("Element/beforeinput_event", "onbeforeinput")}} +- {{domxref("Element/beforematch_event", "onbeforematch")}} +- {{domxref("HTMLElement/beforetoggle_event", "onbeforetoggle")}} +- {{domxref("Element/blur_event", "onblur")}} +- {{domxref("Element/cancel_event", "oncancel")}} +- {{domxref("HTMLMediaElement/canplay_event", "oncanplay")}} +- {{domxref("HTMLMediaElement/canplaythrough_event", "oncanplaythrough")}} +- {{domxref("HTMLElement/change_event", "onchange")}} +- {{domxref("Element/click_event", "onclick")}} +- {{domxref("HTMLDialogElement/close_event", "onclose")}} +- {{domxref("HTMLElement/command_event", "oncommand")}} +- {{domxref("HTMLCanvasElement/contextlost_event", "oncontextlost")}} +- {{domxref("Element/contextmenu_event", "oncontextmenu")}} +- {{domxref("HTMLCanvasElement/contextrestored_event", "oncontextrestored")}} +- {{domxref("Element/copy_event", "oncopy")}} +- {{domxref("HTMLTrackElement/cuechange_event", "oncuechange")}} +- {{domxref("Element/cut_event", "oncut")}} +- {{domxref("Element/dblclick_event", "ondblclick")}} +- {{domxref("HTMLElement/drag_event", "ondrag")}} +- {{domxref("HTMLElement/dragend_event", "ondragend")}} +- {{domxref("HTMLElement/dragenter_event", "ondragenter")}} +- {{domxref("HTMLElement/dragleave_event", "ondragleave")}} +- {{domxref("HTMLElement/dragover_event", "ondragover")}} +- {{domxref("HTMLElement/dragstart_event", "ondragstart")}} +- {{domxref("HTMLElement/drop_event", "ondrop")}} +- {{domxref("Window/error_event", "onerror")}} +- {{domxref("HTMLMediaElement/durationchange_event", "ondurationchange")}} +- {{domxref("HTMLMediaElement/emptied_event", "onemptied")}} +- {{domxref("HTMLMediaElement/ended_event", "onended")}} +- {{domxref("Element/focus_event", "onfocus")}} +- {{domxref("HTMLFormElement/formdata_event", "onformdata")}} +- {{domxref("Element/input_event", "oninput")}} +- {{domxref("HTMLInputElement/invalid_event", "oninvalid")}} +- {{domxref("Element/keydown_event", "onkeydown")}} +- {{domxref("Element/keypress_event", "onkeypress")}} +- {{domxref("Element/keyup_event", "onkeyup")}} +- {{domxref("SVGElement/load_event", "onload")}} +- {{domxref("HTMLMediaElement/loadeddata_event", "onloadeddata")}} +- {{domxref("HTMLMediaElement/loadedmetadata_event", "onloadedmetadata")}} +- {{domxref("HTMLMediaElement/loadstart_event", "onloadstart")}} +- {{domxref("Element/mousedown_event", "onmousedown")}} +- {{domxref("Element/mouseenter_event", "onmouseenter")}} +- {{domxref("Element/mouseleave_event", "onmouseleave")}} +- {{domxref("Element/mousemove_event", "onmousemove")}} +- {{domxref("Element/mouseout_event", "onmouseout")}} +- {{domxref("Element/mouseover_event", "onmouseover")}} +- {{domxref("Element/mouseup_event", "onmouseup")}} +- {{domxref("Element/paste_event", "onpaste")}} +- {{domxref("HTMLMediaElement/pause_event", "onpause")}} +- {{domxref("HTMLMediaElement/play_event", "onplay")}} +- {{domxref("HTMLMediaElement/playing_event", "onplaying")}} +- {{domxref("HTMLMediaElement/progress_event", "onprogress")}} +- {{domxref("HTMLMediaElement/ratechange_event", "onratechange")}} +- {{domxref("HTMLFormElement/reset_event", "onreset")}} +- {{domxref("HTMLVideoElement/resize_event", "onresize")}} +- {{domxref("Element/scroll_event", "onscroll")}} +- {{domxref("Element/scrollend_event", "onscrollend")}} +- {{domxref("Element/securitypolicyviolation_event", "onsecuritypolicyviolation")}} +- {{domxref("HTMLMediaElement/seeked_event", "onseeked")}} +- {{domxref("HTMLMediaElement/seeking_event", "onseeking")}} +- {{domxref("Element/select_event", "onselect")}} +- {{domxref("HTMLSlotElement/slotchange_event", "onslotchange")}} +- {{domxref("HTMLMediaElement/stalled_event", "onstalled")}} +- {{domxref("HTMLFormElement/submit_event", "onsubmit")}} +- {{domxref("HTMLMediaElement/suspend_event", "onsuspend")}} +- {{domxref("HTMLMediaElement/timeupdate_event", "ontimeupdate")}} +- {{domxref("HTMLElement/toggle_event", "ontoggle")}} +- {{domxref("HTMLMediaElement/volumechange_event", "onvolumechange")}} +- {{domxref("HTMLMediaElement/waiting_event", "onwaiting")}} +- {{domxref("Element/wheel_event", "onwheel")}} ## See also From 080fe4931a7a55d6ad57f91bc87c4c2831ebb2be Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Mon, 20 Oct 2025 13:45:25 +0200 Subject: [PATCH 2/5] Update files/en-us/web/svg/reference/attribute/index.md Co-authored-by: Chris Mills --- files/en-us/web/svg/reference/attribute/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/svg/reference/attribute/index.md b/files/en-us/web/svg/reference/attribute/index.md index 9d6cca3f363f4e8..6d51c3ef3e42994 100644 --- a/files/en-us/web/svg/reference/attribute/index.md +++ b/files/en-us/web/svg/reference/attribute/index.md @@ -418,7 +418,7 @@ Below is a list of all of the attributes available in SVG along with links to re Event handler attributes are discouraged. While the attributes listed below apply to all HTML and SVG elements, they are not useful on all elements. For example, the `oncuechange` attribute is accepted by all elements and attaches an event listener for `cuechange`, but only {{htmlelement("track")}} elements will ever receive a `cuechange` event fired by the browser. For other elements, you can only use {{domxref("EventTarget.dispatchEvent()")}} to manually dispatch one. - {{domxref("HTMLMediaElement/abort_event", "onabort")}} -- {{domxref("Element/auxclick_event", "auxclick")}} +- {{domxref("Element/auxclick_event", "onauxclick")}} - {{domxref("Element/beforeinput_event", "onbeforeinput")}} - {{domxref("Element/beforematch_event", "onbeforematch")}} - {{domxref("HTMLElement/beforetoggle_event", "onbeforetoggle")}} From d8d2e77599f55bdeec12a621b7dc1216af7cb643 Mon Sep 17 00:00:00 2001 From: Estelle Weyl Date: Tue, 21 Oct 2025 13:07:42 +0200 Subject: [PATCH 3/5] Correct autofocus event reference in SVG attributes --- files/en-us/web/svg/reference/attribute/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/svg/reference/attribute/index.md b/files/en-us/web/svg/reference/attribute/index.md index d77c24d84b26a02..d45c4b3fd429476 100644 --- a/files/en-us/web/svg/reference/attribute/index.md +++ b/files/en-us/web/svg/reference/attribute/index.md @@ -430,7 +430,7 @@ All SVG presentation attributes can be used as CSS properties. Event handler attributes are discouraged. While the attributes listed below apply to all HTML and SVG elements, they are not useful on all elements. For example, the `oncuechange` attribute is accepted by all elements and attaches an event listener for `cuechange`, but only {{htmlelement("track")}} elements will ever receive a `cuechange` event fired by the browser. For other elements, you can only use {{domxref("EventTarget.dispatchEvent()")}} to manually dispatch one. - {{domxref("HTMLMediaElement/abort_event", "onabort")}} -- {{domxref("Element/auxclick_event", "onautofocus")}} +- {{domxref("Element/autofocus_event", "onautofocus")}} - {{domxref("Element/auxclick_event", "onauxclick")}} - {{domxref("Element/beforeinput_event", "onbeforeinput")}} - {{domxref("Element/beforematch_event", "onbeforematch")}} From c1be2c17c8b7d02e6d082c5eebe3f0d11d548e61 Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 21 Oct 2025 13:53:16 +0200 Subject: [PATCH 4/5] Remove all the attributes and write an explanation with a link to the not-to-be-used attributes instead. --- .../web/svg/reference/attribute/index.md | 80 ++----------------- 1 file changed, 5 insertions(+), 75 deletions(-) diff --git a/files/en-us/web/svg/reference/attribute/index.md b/files/en-us/web/svg/reference/attribute/index.md index d45c4b3fd429476..bf4484d6844d33d 100644 --- a/files/en-us/web/svg/reference/attribute/index.md +++ b/files/en-us/web/svg/reference/attribute/index.md @@ -427,81 +427,11 @@ All SVG presentation attributes can be used as CSS properties. ### Event attributes -Event handler attributes are discouraged. While the attributes listed below apply to all HTML and SVG elements, they are not useful on all elements. For example, the `oncuechange` attribute is accepted by all elements and attaches an event listener for `cuechange`, but only {{htmlelement("track")}} elements will ever receive a `cuechange` event fired by the browser. For other elements, you can only use {{domxref("EventTarget.dispatchEvent()")}} to manually dispatch one. - -- {{domxref("HTMLMediaElement/abort_event", "onabort")}} -- {{domxref("Element/autofocus_event", "onautofocus")}} -- {{domxref("Element/auxclick_event", "onauxclick")}} -- {{domxref("Element/beforeinput_event", "onbeforeinput")}} -- {{domxref("Element/beforematch_event", "onbeforematch")}} -- {{domxref("HTMLElement/beforetoggle_event", "onbeforetoggle")}} -- {{domxref("Element/blur_event", "onblur")}} -- {{domxref("Element/cancel_event", "oncancel")}} -- {{domxref("HTMLMediaElement/canplay_event", "oncanplay")}} -- {{domxref("HTMLMediaElement/canplaythrough_event", "oncanplaythrough")}} -- {{domxref("HTMLElement/change_event", "onchange")}} -- {{domxref("Element/click_event", "onclick")}} -- {{domxref("HTMLDialogElement/close_event", "onclose")}} -- {{domxref("HTMLElement/command_event", "oncommand")}} -- {{domxref("HTMLCanvasElement/contextlost_event", "oncontextlost")}} -- {{domxref("Element/contextmenu_event", "oncontextmenu")}} -- {{domxref("HTMLCanvasElement/contextrestored_event", "oncontextrestored")}} -- {{domxref("Element/copy_event", "oncopy")}} -- {{domxref("HTMLTrackElement/cuechange_event", "oncuechange")}} -- {{domxref("Element/cut_event", "oncut")}} -- {{domxref("Element/dblclick_event", "ondblclick")}} -- {{domxref("HTMLElement/drag_event", "ondrag")}} -- {{domxref("HTMLElement/dragend_event", "ondragend")}} -- {{domxref("HTMLElement/dragenter_event", "ondragenter")}} -- {{domxref("HTMLElement/dragleave_event", "ondragleave")}} -- {{domxref("HTMLElement/dragover_event", "ondragover")}} -- {{domxref("HTMLElement/dragstart_event", "ondragstart")}} -- {{domxref("HTMLElement/drop_event", "ondrop")}} -- {{domxref("Window/error_event", "onerror")}} -- {{domxref("HTMLMediaElement/durationchange_event", "ondurationchange")}} -- {{domxref("HTMLMediaElement/emptied_event", "onemptied")}} -- {{domxref("HTMLMediaElement/ended_event", "onended")}} -- {{domxref("Element/focus_event", "onfocus")}} -- {{domxref("HTMLFormElement/formdata_event", "onformdata")}} -- {{domxref("Element/input_event", "oninput")}} -- {{domxref("HTMLInputElement/invalid_event", "oninvalid")}} -- {{domxref("Element/keydown_event", "onkeydown")}} -- {{domxref("Element/keypress_event", "onkeypress")}} -- {{domxref("Element/keyup_event", "onkeyup")}} -- {{domxref("SVGElement/load_event", "onload")}} -- {{domxref("HTMLMediaElement/loadeddata_event", "onloadeddata")}} -- {{domxref("HTMLMediaElement/loadedmetadata_event", "onloadedmetadata")}} -- {{domxref("HTMLMediaElement/loadstart_event", "onloadstart")}} -- {{domxref("Element/mousedown_event", "onmousedown")}} -- {{domxref("Element/mouseenter_event", "onmouseenter")}} -- {{domxref("Element/mouseleave_event", "onmouseleave")}} -- {{domxref("Element/mousemove_event", "onmousemove")}} -- {{domxref("Element/mouseout_event", "onmouseout")}} -- {{domxref("Element/mouseover_event", "onmouseover")}} -- {{domxref("Element/mouseup_event", "onmouseup")}} -- {{domxref("Element/paste_event", "onpaste")}} -- {{domxref("HTMLMediaElement/pause_event", "onpause")}} -- {{domxref("HTMLMediaElement/play_event", "onplay")}} -- {{domxref("HTMLMediaElement/playing_event", "onplaying")}} -- {{domxref("HTMLMediaElement/progress_event", "onprogress")}} -- {{domxref("HTMLMediaElement/ratechange_event", "onratechange")}} -- {{domxref("HTMLFormElement/reset_event", "onreset")}} -- {{domxref("HTMLVideoElement/resize_event", "onresize")}} -- {{domxref("Element/scroll_event", "onscroll")}} -- {{domxref("Element/scrollend_event", "onscrollend")}} -- {{domxref("Element/securitypolicyviolation_event", "onsecuritypolicyviolation")}} -- {{domxref("HTMLMediaElement/seeked_event", "onseeked")}} -- {{domxref("HTMLMediaElement/seeking_event", "onseeking")}} -- {{domxref("Element/select_event", "onselect")}} -- {{domxref("HTMLSlotElement/slotchange_event", "onslotchange")}} -- {{domxref("HTMLMediaElement/stalled_event", "onstalled")}} -- {{domxref("HTMLFormElement/submit_event", "onsubmit")}} -- {{domxref("HTMLMediaElement/suspend_event", "onsuspend")}} -- {{domxref("HTMLMediaElement/timeupdate_event", "ontimeupdate")}} -- {{domxref("HTMLElement/toggle_event", "ontoggle")}} -- {{domxref("HTMLMediaElement/volumechange_event", "onvolumechange")}} -- {{domxref("HTMLMediaElement/waiting_event", "onwaiting")}} -- {{domxref("Element/wheel_event", "onwheel")}} +All HTML and SVG elements support event handler attributes defined on the [`GlobalEventHandlers`](/en-US/docs/Web/HTML/Reference/Global_attributes#list_of_global_event_handler_attributes) mixin. + +While event handler attributes, like {{domxref("Element/blur_event", "onblur")}} and {{domxref("Element/drag_event", "ondrag")}}, apply to all elements, they may not have any effect. For example, the {{domxref("HTMLTrackElement/cuechange_event", "oncuechange")}} attribute can be applied to any element, but it is only relevant to the {{htmlelement("track")}} element. + +Event handler attributes are discouraged, considered unsafe, and may be blocked by content security policies. Use the event name withing an {{domxref("EventTarget.addEventListener", "addEventListener()")}} method instead. ## See also From f15b63672852c225aa91397595001b1c078ee47f Mon Sep 17 00:00:00 2001 From: estelle Date: Tue, 21 Oct 2025 14:08:09 +0200 Subject: [PATCH 5/5] add csp link --- files/en-us/web/svg/reference/attribute/index.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/files/en-us/web/svg/reference/attribute/index.md b/files/en-us/web/svg/reference/attribute/index.md index bf4484d6844d33d..ae4116ad7bd255a 100644 --- a/files/en-us/web/svg/reference/attribute/index.md +++ b/files/en-us/web/svg/reference/attribute/index.md @@ -431,7 +431,7 @@ All HTML and SVG elements support event handler attributes defined on the [`Glob While event handler attributes, like {{domxref("Element/blur_event", "onblur")}} and {{domxref("Element/drag_event", "ondrag")}}, apply to all elements, they may not have any effect. For example, the {{domxref("HTMLTrackElement/cuechange_event", "oncuechange")}} attribute can be applied to any element, but it is only relevant to the {{htmlelement("track")}} element. -Event handler attributes are discouraged, considered unsafe, and may be blocked by content security policies. Use the event name withing an {{domxref("EventTarget.addEventListener", "addEventListener()")}} method instead. +Event handler attributes are discouraged, considered unsafe, and may be blocked by [content security policies (CSP)](/en-US/docs/Web/Security/Practical_implementation_guides/CSP). Use the event name withing an {{domxref("EventTarget.addEventListener", "addEventListener()")}} method instead. ## See also