diff --git a/files/en-us/_redirects.txt b/files/en-us/_redirects.txt index 6f30a5067e8a9ff..bb1946957a610f5 100644 --- a/files/en-us/_redirects.txt +++ b/files/en-us/_redirects.txt @@ -1116,7 +1116,7 @@ /en-US/docs/Controlling_spell_checking_in_HTML /en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck /en-US/docs/Controlling_spell_checking_in_HTML_forms /en-US/docs/Web/HTML/Reference/Global_attributes/spellcheck /en-US/docs/Creating_OpenSearch_plugins_for_Firefox /en-US/docs/Web/XML/Guides/OpenSearch -/en-US/docs/Creating_and_triggering_custom_events /en-US/docs/Web/Events/Creating_and_triggering_events +/en-US/docs/Creating_and_triggering_custom_events /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/CredentialsContainer.preventSilentAccess() /en-US/docs/Web/API/CredentialsContainer/preventSilentAccess /en-US/docs/Cryptanalysis /en-US/docs/Glossary/Cryptanalysis /en-US/docs/Cryptographic_hash_function /en-US/docs/Glossary/Hash_function @@ -1176,8 +1176,8 @@ /en-US/docs/DOM/CharacterData /en-US/docs/Web/API/CharacterData /en-US/docs/DOM/Comment /en-US/docs/Web/API/Comment /en-US/docs/DOM/CompositionEvent /en-US/docs/Web/API/CompositionEvent -/en-US/docs/DOM/Creating_and_triggering_custom_events /en-US/docs/Web/Events/Creating_and_triggering_events -/en-US/docs/DOM/Creating_and_triggering_events /en-US/docs/Web/Events/Creating_and_triggering_events +/en-US/docs/DOM/Creating_and_triggering_custom_events /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/DOM/Creating_and_triggering_events /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/DOM/DOMError /en-US/docs/Web/API/DOMError /en-US/docs/DOM/DOMException /en-US/docs/Web/API/DOMException /en-US/docs/DOM/DOMImplementation /en-US/docs/Web/API/DOMImplementation @@ -1202,8 +1202,8 @@ /en-US/docs/DOM/DOM_Reference/style /en-US/docs/Web/API/HTMLStyleElement /en-US/docs/DOM/DOM_Reference/window /en-US/docs/Web/API/Window /en-US/docs/DOM/DOM_Reference/window/clearInterval /en-US/docs/Web/API/Window/clearInterval -/en-US/docs/DOM/DOM_event_handlers /en-US/docs/Web/Events/Event_handlers -/en-US/docs/DOM/DOM_event_reference /en-US/docs/Web/Events +/en-US/docs/DOM/DOM_event_handlers /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/DOM/DOM_event_reference /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/DOM/DOM_event_reference/DOMContentLoaded /en-US/docs/Web/API/Document/DOMContentLoaded_event /en-US/docs/DOM/DOM_event_reference/DOMMouseScroll /en-US/docs/Web/API/Element/DOMMouseScroll_event /en-US/docs/DOM/DOM_event_reference/MozMousePixelScroll /en-US/docs/Web/API/Element/MozMousePixelScroll_event @@ -1373,7 +1373,7 @@ /en-US/docs/DOM/MouseEvent /en-US/docs/Web/API/MouseEvent /en-US/docs/DOM/MouseScrollEvent /en-US/docs/Web/API/MouseScrollEvent /en-US/docs/DOM/MouseWheelEvent /en-US/docs/Web/API/WheelEvent -/en-US/docs/DOM/Mozilla_event_reference /en-US/docs/Web/Events +/en-US/docs/DOM/Mozilla_event_reference /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/DOM/Mozilla_event_reference/DOMContentLoaded /en-US/docs/Web/API/Document/DOMContentLoaded_event /en-US/docs/DOM/Mozilla_event_reference/DOMContentLoaded_(event) /en-US/docs/Web/API/Document/DOMContentLoaded_event /en-US/docs/DOM/Mozilla_event_reference/SVGError /en-US/docs/Web/API/SVGElement/error_event @@ -1407,12 +1407,12 @@ /en-US/docs/DOM/Mozilla_event_reference/copy /en-US/docs/Web/API/Element/copy_event /en-US/docs/DOM/Mozilla_event_reference/cut /en-US/docs/Web/API/Element/cut_event /en-US/docs/DOM/Mozilla_event_reference/dblclick /en-US/docs/Web/API/Element/dblclick_event -/en-US/docs/DOM/Mozilla_event_reference/devicehumidity /en-US/docs/Web/Events +/en-US/docs/DOM/Mozilla_event_reference/devicehumidity /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/DOM/Mozilla_event_reference/devicemotion /en-US/docs/Web/API/Window/devicemotion_event -/en-US/docs/DOM/Mozilla_event_reference/devicenoise /en-US/docs/Web/Events +/en-US/docs/DOM/Mozilla_event_reference/devicenoise /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/DOM/Mozilla_event_reference/deviceorientation /en-US/docs/Web/API/Window/deviceorientation_event -/en-US/docs/DOM/Mozilla_event_reference/devicepressure /en-US/docs/Web/Events -/en-US/docs/DOM/Mozilla_event_reference/devicetemperature /en-US/docs/Web/Events +/en-US/docs/DOM/Mozilla_event_reference/devicepressure /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/DOM/Mozilla_event_reference/devicetemperature /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/DOM/Mozilla_event_reference/drag /en-US/docs/Web/API/HTMLElement/drag_event /en-US/docs/DOM/Mozilla_event_reference/dragend /en-US/docs/Web/API/HTMLElement/dragend_event /en-US/docs/DOM/Mozilla_event_reference/dragenter /en-US/docs/Web/API/HTMLElement/dragenter_event @@ -1742,7 +1742,7 @@ /en-US/docs/DOM/cssRule.style /en-US/docs/Web/API/CSSStyleRule/style /en-US/docs/DOM/customEvent /en-US/docs/Web/API/CustomEvent /en-US/docs/DOM/defaultPrevented /en-US/docs/Web/API/Event/defaultPrevented -/en-US/docs/DOM/dispatchEvent_example /en-US/docs/Web/Events/Creating_and_triggering_events +/en-US/docs/DOM/dispatchEvent_example /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/DOM/document /en-US/docs/Web/API/Document /en-US/docs/DOM/document.URL /en-US/docs/Web/API/Document/URL /en-US/docs/DOM/document.activeElement /en-US/docs/Web/API/Document/activeElement @@ -2263,7 +2263,7 @@ /en-US/docs/DOM:cssRule.parentStyleSheet /en-US/docs/Web/API/CSSRule/parentStyleSheet /en-US/docs/DOM:cssRule.selectorText /en-US/docs/Web/API/CSSStyleRule/selectorText /en-US/docs/DOM:cssRule.style /en-US/docs/Web/API/CSSStyleRule/style -/en-US/docs/DOM:dispatchEvent_example /en-US/docs/Web/Events/Creating_and_triggering_events +/en-US/docs/DOM:dispatchEvent_example /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/DOM:document /en-US/docs/Web/API/Document /en-US/docs/DOM:document.URL /en-US/docs/Web/API/Document/URL /en-US/docs/DOM:document.activeElement /en-US/docs/Web/API/Document/activeElement @@ -2667,7 +2667,7 @@ /en-US/docs/DOM_Client_Object_Cross-Reference:screen /en-US/docs/Web/API/Window/screen /en-US/docs/DOM_Client_Object_Cross-Reference:style /en-US/docs/Web/API/HTMLElement/style /en-US/docs/DOM_Client_Object_Cross-Reference:window /en-US/docs/Web/API/Window -/en-US/docs/DOM_Events /en-US/docs/Web/Events +/en-US/docs/DOM_Events /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/DOM_Implementation_and_Scriptability /en-US/docs/Web/API/Document_Object_Model /en-US/docs/DOM_Levels /en-US/docs/Web/API/Document_Object_Model /en-US/docs/DOM_improvements_in_Firefox_3 /en-US/docs/Mozilla/Firefox/Releases/3/DOM_improvements @@ -2699,7 +2699,7 @@ /en-US/docs/Document_Object_Model_(DOM)/CharacterData /en-US/docs/Web/API/CharacterData /en-US/docs/Document_Object_Model_(DOM)/Comment /en-US/docs/Web/API/Comment /en-US/docs/Document_Object_Model_(DOM)/CompositionEvent /en-US/docs/Web/API/CompositionEvent -/en-US/docs/Document_Object_Model_(DOM)/Creating_and_triggering_events /en-US/docs/Web/Events/Creating_and_triggering_events +/en-US/docs/Document_Object_Model_(DOM)/Creating_and_triggering_events /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Document_Object_Model_(DOM)/DOMError /en-US/docs/Web/API/DOMError /en-US/docs/Document_Object_Model_(DOM)/DOMException /en-US/docs/Web/API/DOMException /en-US/docs/Document_Object_Model_(DOM)/DOMImplementation /en-US/docs/Web/API/DOMImplementation @@ -2711,7 +2711,7 @@ /en-US/docs/Document_Object_Model_(DOM)/DOMStringMap /en-US/docs/Web/API/DOMStringMap /en-US/docs/Document_Object_Model_(DOM)/DOMTimeStamp /en-US/docs/Glossary/Unix_time /en-US/docs/Document_Object_Model_(DOM)/DOMTokenList /en-US/docs/Web/API/DOMTokenList -/en-US/docs/Document_Object_Model_(DOM)/DOM_event_handlers /en-US/docs/Web/Events/Event_handlers +/en-US/docs/Document_Object_Model_(DOM)/DOM_event_handlers /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Document_Object_Model_(DOM)/DeviceAcceleration /en-US/docs/Web/API/DeviceMotionEventAcceleration /en-US/docs/Document_Object_Model_(DOM)/DeviceAcceleration.x /en-US/docs/Web/API/DeviceMotionEventAcceleration/x /en-US/docs/Document_Object_Model_(DOM)/DeviceAcceleration.y /en-US/docs/Web/API/DeviceMotionEventAcceleration/y @@ -2999,7 +2999,7 @@ /en-US/docs/Document_Object_Model_(DOM)/Worker/Functions_available_to_workers /en-US/docs/Web/API/Web_Workers_API/Functions_and_classes_available_to_workers /en-US/docs/Document_Object_Model_(DOM)/createEvent /en-US/docs/Web/API/Document/createEvent /en-US/docs/Document_Object_Model_(DOM)/cssMediaRule /en-US/docs/Web/API/CSSMediaRule -/en-US/docs/Document_Object_Model_(DOM)/dispatchEvent_example /en-US/docs/Web/Events/Creating_and_triggering_events +/en-US/docs/Document_Object_Model_(DOM)/dispatchEvent_example /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Document_Object_Model_(DOM)/document.URL /en-US/docs/Web/API/Document/URL /en-US/docs/Document_Object_Model_(DOM)/document.activeElement /en-US/docs/Web/API/Document/activeElement /en-US/docs/Document_Object_Model_(DOM)/document.alinkColor /en-US/docs/Web/API/Document/alinkColor @@ -6689,7 +6689,7 @@ /en-US/docs/Mozilla_CSS_Extensions /en-US/docs/Web/CSS/Mozilla_Extensions /en-US/docs/Mozilla_MathML_Project/Authoring /en-US/docs/Web/MathML/Guides/Authoring /en-US/docs/Mozilla_MathML_Project/Authoring_MathML /en-US/docs/Web/MathML/Guides/Authoring -/en-US/docs/Mozilla_event_reference /en-US/docs/Web/Events +/en-US/docs/Mozilla_event_reference /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Mozilla_event_reference/DOMContentLoaded_(event) /en-US/docs/Web/API/Document/DOMContentLoaded_event /en-US/docs/Mozilla_event_reference/DOMContentLoading (event) /en-US/docs/Web/API/Document/DOMContentLoaded_event /en-US/docs/Mozilla_event_reference/DOMContentLoading_(event) /en-US/docs/Web/API/Document/DOMContentLoaded_event @@ -6723,12 +6723,12 @@ /en-US/docs/Mozilla_event_reference/copy /en-US/docs/Web/API/Element/copy_event /en-US/docs/Mozilla_event_reference/cut /en-US/docs/Web/API/Element/cut_event /en-US/docs/Mozilla_event_reference/dblclick /en-US/docs/Web/API/Element/dblclick_event -/en-US/docs/Mozilla_event_reference/devicehumidity /en-US/docs/Web/Events +/en-US/docs/Mozilla_event_reference/devicehumidity /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Mozilla_event_reference/devicemotion /en-US/docs/Web/API/Window/devicemotion_event -/en-US/docs/Mozilla_event_reference/devicenoise /en-US/docs/Web/Events +/en-US/docs/Mozilla_event_reference/devicenoise /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Mozilla_event_reference/deviceorientation /en-US/docs/Web/API/Window/deviceorientation_event -/en-US/docs/Mozilla_event_reference/devicepressure /en-US/docs/Web/Events -/en-US/docs/Mozilla_event_reference/devicetemperature /en-US/docs/Web/Events +/en-US/docs/Mozilla_event_reference/devicepressure /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Mozilla_event_reference/devicetemperature /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Mozilla_event_reference/drag /en-US/docs/Web/API/HTMLElement/drag_event /en-US/docs/Mozilla_event_reference/dragend /en-US/docs/Web/API/HTMLElement/dragend_event /en-US/docs/Mozilla_event_reference/dragenter /en-US/docs/Web/API/HTMLElement/dragenter_event @@ -8522,7 +8522,6 @@ /en-US/docs/Web/API/DocumentTouch.createTouchList /en-US/docs/Web/API/Document/createTouchList /en-US/docs/Web/API/DocumentTouch/createTouch /en-US/docs/Web/API/Document/createTouch /en-US/docs/Web/API/DocumentTouch/createTouchList /en-US/docs/Web/API/Document/createTouchList -/en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Learn_web_development/Core/Scripting/Events /en-US/docs/Web/API/Document_Object_Model/How_to_create_a_DOM_tree /en-US/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model /en-US/docs/Web/API/Document_Object_Model/Preface /en-US/docs/Web/API/Document_Object_Model /en-US/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model/Example /en-US/docs/Web/API/Document_Object_Model/Using_the_Document_Object_Model @@ -8626,7 +8625,7 @@ /en-US/docs/Web/API/Event/detail /en-US/docs/Web/API/UIEvent/detail /en-US/docs/Web/API/Event/msConvertURL /en-US/docs/Web/API/Event /en-US/docs/Web/API/Event/scoped /en-US/docs/Web/API/Event/composed -/en-US/docs/Web/API/EventHandler /en-US/docs/Web/Events/Event_handlers +/en-US/docs/Web/API/EventHandler /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/API/EventListener /en-US/docs/Web/API/EventTarget/addEventListener /en-US/docs/Web/API/EventListener/handleEvent /en-US/docs/Web/API/EventTarget/addEventListener /en-US/docs/Web/API/EventSource/onerror /en-US/docs/Web/API/EventSource/error_event @@ -8869,7 +8868,7 @@ /en-US/docs/Web/API/GlobalEventHandlers/onwheel /en-US/docs/Web/API/Element/wheel_event /en-US/docs/Web/API/GlobalFetch/GlobalFetch.fetch() /en-US/docs/Web/API/Window/fetch /en-US/docs/Web/API/GlobalFetch/fetch /en-US/docs/Web/API/Window/fetch -/en-US/docs/Web/API/Guide/Events/Creating_and_triggering_events /en-US/docs/Web/Events/Creating_and_triggering_events +/en-US/docs/Web/API/Guide/Events/Creating_and_triggering_events /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/API/HID/onconnect /en-US/docs/Web/API/HID/connect_event /en-US/docs/Web/API/HID/ondisconnect /en-US/docs/Web/API/HID/disconnect_event /en-US/docs/Web/API/HIDDevice/oninputreport /en-US/docs/Web/API/HIDDevice/inputreport_event @@ -12533,10 +12532,13 @@ /en-US/docs/Web/EXSLT/str/concat /en-US/docs/Web/XML/EXSLT/Reference/str/concat /en-US/docs/Web/EXSLT/str/split /en-US/docs/Web/XML/EXSLT/Reference/str/split /en-US/docs/Web/EXSLT/str/tokenize /en-US/docs/Web/XML/EXSLT/Reference/str/tokenize +/en-US/docs/Web/Events /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Events/Activate /en-US/docs/Web/API/Element/DOMActivate_event +/en-US/docs/Web/Events/Creating_and_triggering_events /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Events/DOMContentLoaded /en-US/docs/Web/API/Document/DOMContentLoaded_event /en-US/docs/Web/Events/DOMMouseScroll /en-US/docs/Web/API/Element/DOMMouseScroll_event /en-US/docs/Web/Events/Detecting_device_orientation /en-US/docs/Web/API/Device_orientation_events/Detecting_device_orientation +/en-US/docs/Web/Events/Event_handlers /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Events/FontFaceSetLoadEvent /en-US/docs/Web/API/FontFaceSetLoadEvent /en-US/docs/Web/Events/MozMousePixelScroll /en-US/docs/Web/API/Element/MozMousePixelScroll_event /en-US/docs/Web/Events/Orientation_and_motion_data_explained /en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained @@ -12594,12 +12596,12 @@ /en-US/docs/Web/Events/datachannel /en-US/docs/Web/API/RTCPeerConnection/datachannel_event /en-US/docs/Web/Events/dblclick /en-US/docs/Web/API/Element/dblclick_event /en-US/docs/Web/Events/devicechange /en-US/docs/Web/API/MediaDevices/devicechange_event -/en-US/docs/Web/Events/devicehumidity /en-US/docs/Web/Events +/en-US/docs/Web/Events/devicehumidity /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Events/devicemotion /en-US/docs/Web/API/Window/devicemotion_event -/en-US/docs/Web/Events/devicenoise /en-US/docs/Web/Events +/en-US/docs/Web/Events/devicenoise /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Events/deviceorientation /en-US/docs/Web/API/Window/deviceorientation_event -/en-US/docs/Web/Events/devicepressure /en-US/docs/Web/Events -/en-US/docs/Web/Events/devicetemperature /en-US/docs/Web/Events +/en-US/docs/Web/Events/devicepressure /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Web/Events/devicetemperature /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Events/drag /en-US/docs/Web/API/HTMLElement/drag_event /en-US/docs/Web/Events/dragend /en-US/docs/Web/API/HTMLElement/dragend_event /en-US/docs/Web/Events/dragenter /en-US/docs/Web/API/HTMLElement/dragenter_event @@ -12791,9 +12793,9 @@ /en-US/docs/Web/Guide/AJAX/WAI_ARIA_Live_Regions_API_Support /en-US/docs/Mozilla/Firefox/Releases/3/WAI_ARIA_Live_Regions_API_Support /en-US/docs/Web/Guide/API /en-US/docs/Web/API /en-US/docs/Web/Guide/API/DOM /en-US/docs/Web/API/Document_Object_Model -/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events /en-US/docs/Web/Events/Creating_and_triggering_events -/en-US/docs/Web/Guide/API/DOM/Events/Event_dispatching_example /en-US/docs/Web/Events/Creating_and_triggering_events -/en-US/docs/Web/Guide/API/DOM/Events/Event_handlers /en-US/docs/Web/Events/Event_handlers +/en-US/docs/Web/Guide/API/DOM/Events/Creating_and_triggering_events /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Web/Guide/API/DOM/Events/Event_dispatching_example /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Web/Guide/API/DOM/Events/Event_handlers /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Guide/API/DOM/Events/Mutation_events /en-US/docs/Web/API/MutationEvent /en-US/docs/Web/Guide/API/DOM/Events/Orientation_and_motion_data_explained /en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained /en-US/docs/Web/Guide/API/DOM/Events/Touch_events /en-US/docs/Web/API/Touch_events @@ -12873,9 +12875,9 @@ /en-US/docs/Web/Guide/CSS/Using_the_:target_selector /en-US/docs/Web/CSS/CSS_selectors/Using_the_:target_pseudo-class_in_selectors /en-US/docs/Web/Guide/CSS/Visual_formatting_model /en-US/docs/Web/CSS/CSS_display/Visual_formatting_model /en-US/docs/Web/Guide/DOM /en-US/docs/Web/API/Document_Object_Model -/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events /en-US/docs/Web/Events/Creating_and_triggering_events -/en-US/docs/Web/Guide/DOM/Events/Event_dispatching_example /en-US/docs/Web/Events/Creating_and_triggering_events -/en-US/docs/Web/Guide/DOM/Events/Event_handlers /en-US/docs/Web/Events/Event_handlers +/en-US/docs/Web/Guide/DOM/Events/Creating_and_triggering_events /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Web/Guide/DOM/Events/Event_dispatching_example /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Web/Guide/DOM/Events/Event_handlers /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Guide/DOM/Events/Orientation_and_motion_data_explained /en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained /en-US/docs/Web/Guide/DOM/Events/Touch_events /en-US/docs/Web/API/Touch_events /en-US/docs/Web/Guide/DOM/Events/Touch_events_(Mozilla_experimental) /en-US/docs/Web/API/Touch_events @@ -12888,14 +12890,14 @@ /en-US/docs/Web/Guide/DOM/Using_dynamic_styling_information /en-US/docs/Web/API/CSS_Object_Model/Using_dynamic_styling_information /en-US/docs/Web/Guide/DOM/Using_full_screen_mode /en-US/docs/Web/API/Fullscreen_API /en-US/docs/Web/Guide/DOM/Whitespace_in_the_DOM /en-US/docs/Web/API/Document_Object_Model/Whitespace -/en-US/docs/Web/Guide/Events /en-US/docs/Web/Events -/en-US/docs/Web/Guide/Events/Creating_and_triggering_events /en-US/docs/Web/Events/Creating_and_triggering_events -/en-US/docs/Web/Guide/Events/Event_dispatching_example /en-US/docs/Web/Events/Creating_and_triggering_events -/en-US/docs/Web/Guide/Events/Event_handlers /en-US/docs/Web/Events/Event_handlers -/en-US/docs/Web/Guide/Events/Media_events /en-US/docs/Web/Events#media +/en-US/docs/Web/Guide/Events /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Web/Guide/Events/Creating_and_triggering_events /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Web/Guide/Events/Event_dispatching_example /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Web/Guide/Events/Event_handlers /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Web/Guide/Events/Media_events /en-US/docs/Web/API/Document_Object_Model/Events#media /en-US/docs/Web/Guide/Events/Mutation_events /en-US/docs/Web/API/MutationEvent /en-US/docs/Web/Guide/Events/Orientation_and_motion_data_explained /en-US/docs/Web/API/Device_orientation_events/Orientation_and_motion_data_explained -/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers /en-US/docs/Web/Events +/en-US/docs/Web/Guide/Events/Overview_of_Events_and_Handlers /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Guide/Events/Touch_events /en-US/docs/Web/API/Touch_events /en-US/docs/Web/Guide/Events/Touch_events_(Mozilla_experimental) /en-US/docs/Web/API/Touch_events /en-US/docs/Web/Guide/Events/Using_device_orientation_with_3D_transforms /en-US/docs/Web/API/Device_orientation_events/Using_device_orientation_with_3D_transforms @@ -14397,7 +14399,7 @@ /en-US/docs/Web/Progressive_web_apps/Tutorials/js13kGames/Introduction /en-US/docs/Web/Progressive_web_apps/Tutorials/js13kGames /en-US/docs/Web/Reference /en-US/docs/Web /en-US/docs/Web/Reference/API /en-US/docs/Web/API -/en-US/docs/Web/Reference/Events /en-US/docs/Web/Events +/en-US/docs/Web/Reference/Events /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Reference/Events/DOMContentLoaded /en-US/docs/Web/API/Document/DOMContentLoaded_event /en-US/docs/Web/Reference/Events/DOMMouseScroll /en-US/docs/Web/API/Element/DOMMouseScroll_event /en-US/docs/Web/Reference/Events/MozMousePixelScroll /en-US/docs/Web/API/Element/MozMousePixelScroll_event @@ -14433,12 +14435,12 @@ /en-US/docs/Web/Reference/Events/cuechange /en-US/docs/Web/API/TextTrack/cuechange_event /en-US/docs/Web/Reference/Events/cut /en-US/docs/Web/API/Element/cut_event /en-US/docs/Web/Reference/Events/dblclick /en-US/docs/Web/API/Element/dblclick_event -/en-US/docs/Web/Reference/Events/devicehumidity /en-US/docs/Web/Events +/en-US/docs/Web/Reference/Events/devicehumidity /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Reference/Events/devicemotion /en-US/docs/Web/API/Window/devicemotion_event -/en-US/docs/Web/Reference/Events/devicenoise /en-US/docs/Web/Events +/en-US/docs/Web/Reference/Events/devicenoise /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Reference/Events/deviceorientation /en-US/docs/Web/API/Window/deviceorientation_event -/en-US/docs/Web/Reference/Events/devicepressure /en-US/docs/Web/Events -/en-US/docs/Web/Reference/Events/devicetemperature /en-US/docs/Web/Events +/en-US/docs/Web/Reference/Events/devicepressure /en-US/docs/Web/API/Document_Object_Model/Events +/en-US/docs/Web/Reference/Events/devicetemperature /en-US/docs/Web/API/Document_Object_Model/Events /en-US/docs/Web/Reference/Events/drag /en-US/docs/Web/API/HTMLElement/drag_event /en-US/docs/Web/Reference/Events/dragend /en-US/docs/Web/API/HTMLElement/dragend_event /en-US/docs/Web/Reference/Events/dragenter /en-US/docs/Web/API/HTMLElement/dragenter_event diff --git a/files/en-us/_wikihistory.json b/files/en-us/_wikihistory.json index d6d4759fc086c5a..400b32178388ebd 100644 --- a/files/en-us/_wikihistory.json +++ b/files/en-us/_wikihistory.json @@ -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": [ @@ -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": [ diff --git a/files/en-us/learn_web_development/core/scripting/event_bubbling/index.md b/files/en-us/learn_web_development/core/scripting/event_bubbling/index.md index 7738e88d82b2ee7..e287df0f1144468 100644 --- a/files/en-us/learn_web_development/core/scripting/event_bubbling/index.md +++ b/files/en-us/learn_web_development/core/scripting/event_bubbling/index.md @@ -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. diff --git a/files/en-us/learn_web_development/core/scripting/events/index.md b/files/en-us/learn_web_development/core/scripting/events/index.md index 1a9c9e6b1873ea9..218995fcfa8ccc9 100644 --- a/files/en-us/learn_web_development/core/scripting/events/index.md +++ b/files/en-us/learn_web_development/core/scripting/events/index.md @@ -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**. diff --git a/files/en-us/learn_web_development/extensions/forms/user_input_methods/index.md b/files/en-us/learn_web_development/extensions/forms/user_input_methods/index.md index a2f5f2d6e3a9eff..6245269a5b5d8c6 100644 --- a/files/en-us/learn_web_development/extensions/forms/user_input_methods/index.md +++ b/files/en-us/learn_web_development/extensions/forms/user_input_methods/index.md @@ -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. diff --git a/files/en-us/mdn/writing_guidelines/howto/json_structured_data/index.md b/files/en-us/mdn/writing_guidelines/howto/json_structured_data/index.md index b7b7f83931e6710..18cc9d3ec83b65a 100644 --- a/files/en-us/mdn/writing_guidelines/howto/json_structured_data/index.md +++ b/files/en-us/mdn/writing_guidelines/howto/json_structured_data/index.md @@ -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`. diff --git a/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_event_subpage_template/index.md b/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_event_subpage_template/index.md index 913dec03226b98d..1524b62c2102bba 100644 --- a/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_event_subpage_template/index.md +++ b/files/en-us/mdn/writing_guidelines/page_structures/page_types/api_event_subpage_template/index.md @@ -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._ diff --git a/files/en-us/mozilla/firefox/releases/9/index.md b/files/en-us/mozilla/firefox/releases/9/index.md index 301fedde6662d08..261938112cfa6a0 100644 --- a/files/en-us/mozilla/firefox/releases/9/index.md +++ b/files/en-us/mozilla/firefox/releases/9/index.md @@ -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. diff --git a/files/en-us/web/api/customevent/customevent/index.md b/files/en-us/web/api/customevent/customevent/index.md index 8dfa63bffc0f188..545a8dabec6d5b2 100644 --- a/files/en-us/web/api/customevent/customevent/index.md +++ b/files/en-us/web/api/customevent/customevent/index.md @@ -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 @@ -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) diff --git a/files/en-us/web/api/customevent/index.md b/files/en-us/web/api/customevent/index.md index abab6293f42a211..c9e37a0cfda07b0 100644 --- a/files/en-us/web/api/customevent/index.md +++ b/files/en-us/web/api/customevent/index.md @@ -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. @@ -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) diff --git a/files/en-us/web/api/customevent/initcustomevent/index.md b/files/en-us/web/api/customevent/initcustomevent/index.md index e3cfb2139fda511..c30cd5f15895683 100644 --- a/files/en-us/web/api/customevent/initcustomevent/index.md +++ b/files/en-us/web/api/customevent/initcustomevent/index.md @@ -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 diff --git a/files/en-us/web/api/document/createevent/index.md b/files/en-us/web/api/document/createevent/index.md index 1b584be764baf37..6471177dcda320f 100644 --- a/files/en-us/web/api/document/createevent/index.md +++ b/files/en-us/web/api/document/createevent/index.md @@ -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) diff --git a/files/en-us/web/events/index.md b/files/en-us/web/api/document_object_model/events/index.md similarity index 73% rename from files/en-us/web/events/index.md rename to files/en-us/web/api/document_object_model/events/index.md index 867e7d789d54199..d12e836061772ba 100644 --- a/files/en-us/web/events/index.md +++ b/files/en-us/web/api/document_object_model/events/index.md @@ -1,12 +1,15 @@ --- -title: Event reference -short-title: Events -slug: Web/Events -page-type: landing-page -spec-urls: https://html.spec.whatwg.org/multipage/indices.html#events-2 -sidebar: events +title: DOM events +short-title: Working with events +slug: Web/API/Document_Object_Model/Events +page-type: guide +spec-urls: + - https://dom.spec.whatwg.org/#events + - https://html.spec.whatwg.org/multipage/indices.html#events-2 --- +{{DefaultAPISidebar("DOM")}} + [Events](/en-US/docs/Learn_web_development/Core/Scripting/Events) are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g., low battery or media events from the operating system), and other causes. Each event is represented by an object that is based on the {{domxref("Event")}} interface, and may have additional custom fields and/or functions to provide information about what happened. The documentation for every event has a table (near the top) that includes a link to the associated event interface, and other relevant information. A full list of the different event types is given in [Event > Interfaces based on Event](/en-US/docs/Web/API/Event#interfaces_based_on_event). @@ -822,11 +825,240 @@ This topic provides an index to the main _sorts_ of events you might be interest +## Creating and dispatching events + +In addition to the events fired by built-in interfaces, you can create and dispatch DOM events yourself. Such events are commonly called _synthetic events_, as opposed to the events fired by the browser. + +### Creating custom events + +Events can be created with the [`Event`](/en-US/docs/Web/API/Event) constructor as follows: + +```js +const event = new Event("build"); + +// Listen for the event. +elem.addEventListener( + "build", + (e) => { + /* … */ + }, + false, +); + +// Dispatch the event. +elem.dispatchEvent(event); +``` + +This code example uses the [EventTarget.dispatchEvent()](/en-US/docs/Web/API/EventTarget/dispatchEvent) method. + +### Adding custom data – CustomEvent() + +To add more data to the event object, the [CustomEvent](/en-US/docs/Web/API/CustomEvent) interface exists and the **detail** property can be used to pass custom data. +For example, the event could be created as follows: + +```js +const event = new CustomEvent("build", { detail: elem.dataset.time }); +``` + +This will then allow you to access the additional data in the event listener: + +```js +function eventHandler(e) { + console.log(`The time is: ${e.detail}`); +} +``` + +### Adding custom data – subclassing Event + +The [`Event`](/en-US/docs/Web/API/Event) interface can also be subclassed. This is particularly useful for reuse, or for more complex custom data, or even adding methods to the event. + +```js +class BuildEvent extends Event { + #buildTime; + + constructor(buildTime) { + super("build"); + this.#buildTime = buildTime; + } + + get buildTime() { + return this.#buildTime; + } +} +``` + +This code example defines a `BuildEvent` class with a read-only property and a fixed event type. + +The event could then be created as follows: + +```js +const event = new BuildEvent(elem.dataset.time); +``` + +The additional data can then be accessed in the event listeners using the custom properties: + +```js +function eventHandler(e) { + console.log(`The time is: ${e.buildTime}`); +} +``` + +### Event bubbling + +It is often desirable to trigger an event from a child element and have an ancestor catch it; optionally, you can include data with the event: + +```html +
+ +
+``` + +```js +const form = document.querySelector("form"); +const textarea = document.querySelector("textarea"); + +// Create a new event, allow bubbling, and provide any data you want to pass to the "detail" property +const eventAwesome = new CustomEvent("awesome", { + bubbles: true, + detail: { text: () => textarea.value }, +}); + +// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method +form.addEventListener("awesome", (e) => console.log(e.detail.text())); + +// As the user types, the textarea inside the form dispatches/triggers the event to fire, using itself as the starting point +textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome)); +``` + +### Creating and dispatching events dynamically + +Elements can listen for events that haven't been created yet: + +```html +
+ +
+``` + +```js +const form = document.querySelector("form"); +const textarea = document.querySelector("textarea"); + +form.addEventListener("awesome", (e) => console.log(e.detail.text())); + +textarea.addEventListener("input", function () { + // Create and dispatch/trigger an event on the fly + // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element + this.dispatchEvent( + new CustomEvent("awesome", { + bubbles: true, + detail: { text: () => textarea.value }, + }), + ); +}); +``` + +## Triggering built-in events + +This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. [View the example in action.](https://mdn.dev/archives/media/samples/domref/dispatchEvent.html) + +```js +function simulateClick() { + const event = new MouseEvent("click", { + view: window, + bubbles: true, + cancelable: true, + }); + const cb = document.getElementById("checkbox"); + const cancelled = !cb.dispatchEvent(event); + + if (cancelled) { + // A handler called preventDefault. + alert("cancelled"); + } else { + // None of the handlers called preventDefault. + alert("not cancelled"); + } +} +``` + +## Registering event handlers + +There are two recommended approaches for registering handlers. Event handler code can be made to run when an event is triggered either by assigning it to the target element's corresponding _onevent_ property or by registering the handler as a listener for the element using the {{domxref("EventTarget.addEventListener", "addEventListener()")}} method. In either case, the handler will receive an object that conforms to the [`Event` interface](/en-US/docs/Web/API/Event) (or a [derived interface](/en-US/docs/Web/API/Event#interfaces_based_on_event)). The main difference is that multiple event handlers can be added (or removed) using the event listener methods. + +> [!WARNING] +> A third approach for setting event handlers using HTML onevent attributes is not recommended! They inflate the markup and make it less readable and harder to debug. For more information, see [Inline event handlers](/en-US/docs/Learn_web_development/Core/Scripting/Events#inline_event_handlers_—_dont_use_these). + +### Using onevent properties + +By convention, JavaScript objects that fire events have corresponding "onevent" properties (named by prefixing "on" to the name of the event). These properties are called to run associated handler code when the event is fired, and may also be called directly by your own code. + +To set event handler code, you can just assign it to the appropriate onevent property. Only one event handler can be assigned for every event in an element. If needed, the handler can be replaced by assigning another function to the same property. + +The following example shows how to set a `greet()` function for the `click` event using the `onclick` property. + +```js +const btn = document.querySelector("button"); + +function greet(event) { + console.log("greet:", event); +} + +btn.onclick = greet; +``` + +Note that an object representing the event is passed as the first argument to the event handler. This event object either implements or is derived from the {{domxref("Event")}} interface. + +### EventTarget.addEventListener + +The most flexible way to set an event handler on an element is to use the {{domxref("EventTarget.addEventListener")}} method. This approach allows multiple listeners to be assigned to an element and enables listeners to be _removed_, if needed, using {{domxref("EventTarget.removeEventListener")}}. + +> [!NOTE] +> The ability to add and remove event handlers allows you to, for example, have the same button performing different actions in different circumstances. In addition, in more complex programs, cleaning up old/unused event handlers can improve efficiency. + +The following example shows how a `greet()` function can be set as a listener/event handler for the `click` event (you could use an anonymous function expression instead of a named function if desired). Note again that the event is passed as the first argument to the event handler. + +```js +const btn = document.querySelector("button"); + +function greet(event) { + console.log("greet:", event); +} + +btn.addEventListener("click", greet); +``` + +The method can also take additional arguments/options to control aspects of how the events are captured and removed. More information can be found on the {{domxref("EventTarget.addEventListener")}} reference page. + +#### Using AbortSignal + +A notable event listener feature is the ability to use an abort signal to clean up multiple event handlers at the same time. + +This is done by passing the same {{domxref("AbortSignal")}} to the {{domxref("EventTarget/addEventListener()", "addEventListener()")}} call for all the event handlers that you want to be able to remove together. You can then call {{domxref("AbortController/abort()", "abort()")}} on the controller owning the `AbortSignal`, and it will remove all event handlers that were added with that signal. For example, to add an event handler that we can remove with an `AbortSignal`: + +```js +const controller = new AbortController(); + +btn.addEventListener( + "click", + (event) => { + console.log("greet:", event); + }, + { signal: controller.signal }, +); // pass an AbortSignal to this handler +``` + +This event handler can then be removed like this: + +```js +controller.abort(); // removes any/all event handlers associated with this controller +``` + ## Specifications {{Specifications}} ## See also -- [Creating and triggering events](/en-US/docs/Web/Events/Creating_and_triggering_events) -- [Event handlers overview](/en-US/docs/Web/Events/Event_handlers) +- [Introduction to events](/en-US/docs/Learn_web_development/Core/Scripting/Events) +- [Event bubbling](/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling) 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 c610863cb12476f..9f74facc3624ace 100644 --- a/files/en-us/web/api/element/copy_event/index.md +++ b/files/en-us/web/api/element/copy_event/index.md @@ -16,7 +16,7 @@ A handler for this event can _modify_ the clipboard contents by calling {{domxre 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. +It's possible to construct and dispatch a [synthetic](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events) `copy` event, but this will not affect the system clipboard. This event [bubbles](/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling) up the DOM tree, eventually to {{domxref("Document")}} and {{domxref("Window")}}, is [cancelable](/en-US/docs/Web/API/Event/cancelable) and is [composed](/en-US/docs/Web/API/Event/composed). 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 6fcd59c87becbd6..5e5d9ad6bde8ae4 100644 --- a/files/en-us/web/api/element/cut_event/index.md +++ b/files/en-us/web/api/element/cut_event/index.md @@ -20,7 +20,7 @@ Note though that cancelling the default action will also prevent the document fr 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. +It's possible to construct and dispatch a [synthetic](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events) `cut` event, but this will not affect the system clipboard or the document's contents. This event [bubbles](/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling) up the DOM tree, eventually to {{domxref("Document")}} and {{domxref("Window")}}, is [cancelable](/en-US/docs/Web/API/Event/cancelable) and is [composed](/en-US/docs/Web/API/Event/composed). 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 370e44fbe24d0fa..9fa6b1e5e2732b0 100644 --- a/files/en-us/web/api/element/paste_event/index.md +++ b/files/en-us/web/api/element/paste_event/index.md @@ -16,7 +16,7 @@ A handler for this event can access the clipboard contents by calling {{domxref( To override the default behavior (for example to insert some different data or a transformation of the clipboard contents) an event handler must cancel the default action using {{domxref("Event/preventDefault", "event.preventDefault()")}}, and then insert its desired data manually. -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. +It's possible to construct and dispatch a [synthetic](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events) `paste` event, but this will not affect the document's contents. This event [bubbles](/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling) up the DOM tree, eventually to {{domxref("Document")}} and {{domxref("Window")}}, is [cancelable](/en-US/docs/Web/API/Event/cancelable) and is [composed](/en-US/docs/Web/API/Event/composed). diff --git a/files/en-us/web/api/event/event/index.md b/files/en-us/web/api/event/event/index.md index 0803d0c5a65fad0..bb065792983949f 100644 --- a/files/en-us/web/api/event/event/index.md +++ b/files/en-us/web/api/event/event/index.md @@ -8,7 +8,7 @@ browser-compat: api.Event.Event {{APIRef("DOM")}}{{AvailableInWorkers}} -The **`Event()`** constructor creates a new {{domxref("Event")}} object. An event created in this way is called a _synthetic event_, as opposed to an event fired by the browser, and can be [dispatched](/en-US/docs/Web/Events/Creating_and_triggering_events) by a script. +The **`Event()`** constructor creates a new {{domxref("Event")}} object. An event created in this way is called a _synthetic event_, as opposed to an event fired by the browser, and can be [dispatched](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events) by a script. ## Syntax @@ -62,4 +62,4 @@ myDiv.dispatchEvent(evt); - {{domxref("Event")}} - {{domxref("EventTarget.dispatchEvent()")}} -- [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) diff --git a/files/en-us/web/api/event/index.md b/files/en-us/web/api/event/index.md index 0724fa60021ffd6..818cb37ec7a1dee 100644 --- a/files/en-us/web/api/event/index.md +++ b/files/en-us/web/api/event/index.md @@ -139,7 +139,7 @@ Note that all event interfaces have names which end in "Event". ## See also -- Types of events available: [Event reference](/en-US/docs/Web/Events) +- [Event index](/en-US/docs/Web/API/Document_Object_Model/Events#event_index) - [Learn: Introduction to events](/en-US/docs/Learn_web_development/Core/Scripting/Events) - [Learn: Event bubbling](/en-US/docs/Learn_web_development/Core/Scripting/Event_bubbling) -- [Creating and triggering custom events](/en-US/docs/Web/Events/Creating_and_triggering_events) +- [Creating and triggering custom events](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events) diff --git a/files/en-us/web/api/event/initevent/index.md b/files/en-us/web/api/event/initevent/index.md index d02502d6d10bfd7..4a7434f348a4b21 100644 --- a/files/en-us/web/api/event/initevent/index.md +++ b/files/en-us/web/api/event/initevent/index.md @@ -22,7 +22,7 @@ Once dispatched, it doesn't do anything anymore. > [!NOTE] > _Do not use this method anymore as it is deprecated._ > Instead use specific event constructors, like {{domxref("Event.Event", "Event()")}}. -> The page on [Creating and triggering events](/en-US/docs/Web/Events/Creating_and_triggering_events) gives more information about the way to use these. +> 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 these. ## Syntax diff --git a/files/en-us/web/api/eventtarget/addeventlistener/index.md b/files/en-us/web/api/eventtarget/addeventlistener/index.md index 8e8951d5df6d36d..db6d1764cd1042f 100644 --- a/files/en-us/web/api/eventtarget/addeventlistener/index.md +++ b/files/en-us/web/api/eventtarget/addeventlistener/index.md @@ -52,7 +52,7 @@ addEventListener(type, listener, useCapture) ### Parameters - `type` - - : A case-sensitive string representing the [event type](/en-US/docs/Web/Events) to listen for. + - : A case-sensitive string representing the [event type](/en-US/docs/Web/API/Document_Object_Model/Events) to listen for. - `listener` - : The object that receives a notification (an object that implements the {{domxref("Event")}} interface) when an event of the specified type occurs. This must @@ -826,5 +826,5 @@ The effect is that: ## See also - {{domxref("EventTarget.removeEventListener()")}} -- [Creating and triggering custom events](/en-US/docs/Web/Events/Creating_and_triggering_events) +- [Creating and dispatching custom events](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events) - [More details on the use of `this` in event handlers](https://www.quirksmode.org/js/this.html) diff --git a/files/en-us/web/api/eventtarget/dispatchevent/index.md b/files/en-us/web/api/eventtarget/dispatchevent/index.md index 006e4bafc3b9bdb..71250dc401a9929 100644 --- a/files/en-us/web/api/eventtarget/dispatchevent/index.md +++ b/files/en-us/web/api/eventtarget/dispatchevent/index.md @@ -51,7 +51,7 @@ dispatchEvent(event) ## Example -See [Creating and triggering events](/en-US/docs/Web/Events/Creating_and_triggering_events). +See [Creating and dispatching events](/en-US/docs/Web/API/Document_Object_Model/Events#creating_and_dispatching_events). ## Specifications diff --git a/files/en-us/web/api/eventtarget/index.md b/files/en-us/web/api/eventtarget/index.md index 4b4dddb0fa104d1..7019773de32f177 100644 --- a/files/en-us/web/api/eventtarget/index.md +++ b/files/en-us/web/api/eventtarget/index.md @@ -14,7 +14,7 @@ In other words, any target of events implements the three methods associated wit but other objects can be event targets, too. For example {{domxref("IDBRequest")}}, {{domxref("AudioNode")}}, and {{domxref("AudioContext")}} are also event targets. -Many event targets (including elements, documents, and windows) also support setting [event handlers](/en-US/docs/Web/Events/Event_handlers) via `onevent` properties and attributes. +Many event targets (including elements, documents, and windows) also support [registering event handlers](/en-US/docs/Web/API/Document_Object_Model/Events#registering_event_handlers) via `onevent` properties and attributes. {{InheritanceDiagram}} @@ -42,6 +42,6 @@ Many event targets (including elements, documents, and windows) also support set ## See also -- [Event reference](/en-US/docs/Web/Events) – the events available in the platform. +- [Event index](/en-US/docs/Web/API/Document_Object_Model/Events#event_index) - [Introduction to events](/en-US/docs/Learn_web_development/Core/Scripting/Events) - {{domxref("Event")}} interface diff --git a/files/en-us/web/api/extendableevent/index.md b/files/en-us/web/api/extendableevent/index.md index 6e109a6f8c9e748..44a4c8febeac0de 100644 --- a/files/en-us/web/api/extendableevent/index.md +++ b/files/en-us/web/api/extendableevent/index.md @@ -32,7 +32,7 @@ _Doesn't implement any specific properties, but inherits properties from its par _Inherits methods from its parent, {{domxref("Event")}}_. - {{domxref("ExtendableEvent.waitUntil", "ExtendableEvent.waitUntil()")}} - - : Extends the lifetime of the event. It is intended to be called in the [`install`](/en-US/docs/Web/API/ServiceWorkerGlobalScope/install_event) [event handler](/en-US/docs/Web/Events/Event_handlers) for the {{domxref("ServiceWorkerRegistration.installing", "installing")}} worker and on the [`activate`](/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate_event) [event handler](/en-US/docs/Web/Events/Event_handlers) for the {{domxref("ServiceWorkerRegistration.active", "active")}} worker. + - : Extends the lifetime of the event. It is intended to be called in the [`install`](/en-US/docs/Web/API/ServiceWorkerGlobalScope/install_event) [event handler](/en-US/docs/Web/API/Document_Object_Model/Events#registering_event_handlers) for the {{domxref("ServiceWorkerRegistration.installing", "installing")}} worker and on the [`activate`](/en-US/docs/Web/API/ServiceWorkerGlobalScope/activate_event) [event handler](/en-US/docs/Web/API/Document_Object_Model/Events#registering_event_handlers) for the {{domxref("ServiceWorkerRegistration.active", "active")}} worker. ## Examples diff --git a/files/en-us/web/api/index.md b/files/en-us/web/api/index.md index 10fe15fc004cdcd..33e35d521532eb0 100644 --- a/files/en-us/web/api/index.md +++ b/files/en-us/web/api/index.md @@ -19,7 +19,3 @@ This is a list of all the APIs that are available. This is a list of all the interfaces (that is, types of objects) that are available. {{APIListAlpha}} - -## See also - -- [Web API event reference](/en-US/docs/Web/Events) diff --git a/files/en-us/web/api/mouseevent/initmouseevent/index.md b/files/en-us/web/api/mouseevent/initmouseevent/index.md index ca824bcb6bed8e4..6a93e82aaa13da2 100644 --- a/files/en-us/web/api/mouseevent/initmouseevent/index.md +++ b/files/en-us/web/api/mouseevent/initmouseevent/index.md @@ -17,7 +17,7 @@ value of a mouse event once it's been created (normally using the {{domxref("Doc > Do not use this method anymore as it is deprecated. > > Instead use specific event constructors, like {{domxref("MouseEvent.MouseEvent", "MouseEvent()")}}. -> The page on [Creating and triggering events](/en-US/docs/Web/Events/Creating_and_triggering_events) gives more information about the way to use these. +> 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 these. Events initialized in this way must have been created with the {{domxref("Document.createEvent()") }} method. This method must be called to set the event diff --git a/files/en-us/web/api/uievent/inituievent/index.md b/files/en-us/web/api/uievent/inituievent/index.md index 8941f287594a73d..e5518bc5616bc50 100644 --- a/files/en-us/web/api/uievent/inituievent/index.md +++ b/files/en-us/web/api/uievent/inituievent/index.md @@ -20,7 +20,7 @@ dispatched, it doesn't do anything anymore. > [!WARNING] > Do not use this method anymore as it is deprecated. > -> Instead use specific event constructors, like {{domxref("UIEvent.UIEvent", "UIEvent()")}}. The page on [Creating and triggering events](/en-US/docs/Web/Events/Creating_and_triggering_events) gives more information about the way to use these. +> Instead use specific event constructors, like {{domxref("UIEvent.UIEvent", "UIEvent()")}}. The page 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 these. ## Syntax diff --git a/files/en-us/web/api/window/postmessage/index.md b/files/en-us/web/api/window/postmessage/index.md index 97040df8af597fe..012c28173e2baf8 100644 --- a/files/en-us/web/api/window/postmessage/index.md +++ b/files/en-us/web/api/window/postmessage/index.md @@ -14,7 +14,7 @@ Normally, scripts on different pages are allowed to access each other if and onl Furthermore, an accessing script must have obtained the window object of the accessed document beforehand. This can occur through methods such as [`window.open()`](/en-US/docs/Web/API/Window/open) for popups or [`iframe.contentWindow`](/en-US/docs/Web/API/HTMLIFrameElement/contentWindow) for iframes. -Broadly, one window may obtain a reference to another (_e.g.,_ via `targetWindow = window.opener`), and then dispatch a {{domxref("MessageEvent")}} on it with `targetWindow.postMessage()`. The receiving window is then free to [handle this event](/en-US/docs/Web/Events/Event_handlers) as needed. The arguments passed to `window.postMessage()` (_i.e.,_ the "message") are [exposed to the receiving window through the event object](#the_dispatched_event). +Broadly, one window may obtain a reference to another (_e.g.,_ via `targetWindow = window.opener`), and then dispatch a {{domxref("MessageEvent")}} on it with `targetWindow.postMessage()`. The receiving window is then free to [handle this event](/en-US/docs/Web/API/Document_Object_Model/Events#registering_event_handlers) as needed. The arguments passed to `window.postMessage()` (_i.e.,_ the "message") are [exposed to the receiving window through the event object](#the_dispatched_event). ## Syntax diff --git a/files/en-us/web/events/creating_and_triggering_events/index.md b/files/en-us/web/events/creating_and_triggering_events/index.md deleted file mode 100644 index ea4aa12ef215a76..000000000000000 --- a/files/en-us/web/events/creating_and_triggering_events/index.md +++ /dev/null @@ -1,169 +0,0 @@ ---- -title: Creating and triggering events -slug: Web/Events/Creating_and_triggering_events -page-type: guide -sidebar: events ---- - -This article demonstrates how to create and dispatch DOM events. Such events are commonly called **synthetic events**, as opposed to the events fired by the browser itself. - -## Creating custom events - -Events can be created with the [`Event`](/en-US/docs/Web/API/Event) constructor as follows: - -```js -const event = new Event("build"); - -// Listen for the event. -elem.addEventListener( - "build", - (e) => { - /* … */ - }, - false, -); - -// Dispatch the event. -elem.dispatchEvent(event); -``` - -The above code example uses the [EventTarget.dispatchEvent()](/en-US/docs/Web/API/EventTarget/dispatchEvent) method. - -### Adding custom data – CustomEvent() - -To add more data to the event object, the [CustomEvent](/en-US/docs/Web/API/CustomEvent) interface exists and the **detail** property can be used to pass custom data. -For example, the event could be created as follows: - -```js -const event = new CustomEvent("build", { detail: elem.dataset.time }); -``` - -This will then allow you to access the additional data in the event listener: - -```js -function eventHandler(e) { - console.log(`The time is: ${e.detail}`); -} -``` - -### Adding custom data – subclassing Event - -The [`Event`](/en-US/docs/Web/API/Event) interface can also be subclassed. This is particularly useful for reuse, or for more complex custom data, or even adding methods to the event. - -```js -class BuildEvent extends Event { - #buildTime; - - constructor(buildTime) { - super("build"); - this.#buildTime = buildTime; - } - - get buildTime() { - return this.#buildTime; - } -} -``` - -The above code example defines a `BuildEvent` class with a read-only property, and a fixed event type. - -The event could then be created as follows: - -```js -const event = new BuildEvent(elem.dataset.time); -``` - -The additional data can then be accessed in the event listeners using the custom properties: - -```js -function eventHandler(e) { - console.log(`The time is: ${e.buildTime}`); -} -``` - -### Event bubbling - -It is often desirable to trigger an event from a child element, and have an ancestor catch it; optionally, with data: - -```html -
- -
-``` - -```js -const form = document.querySelector("form"); -const textarea = document.querySelector("textarea"); - -// Create a new event, allow bubbling, and provide any data you want to pass to the "detail" property -const eventAwesome = new CustomEvent("awesome", { - bubbles: true, - detail: { text: () => textarea.value }, -}); - -// The form element listens for the custom "awesome" event and then consoles the output of the passed text() method -form.addEventListener("awesome", (e) => console.log(e.detail.text())); - -// As the user types, the textarea inside the form dispatches/triggers the event to fire, and uses itself as the starting point -textarea.addEventListener("input", (e) => e.target.dispatchEvent(eventAwesome)); -``` - -### Creating and dispatching events dynamically - -Elements can listen for events that haven't been created yet: - -```html -
- -
-``` - -```js -const form = document.querySelector("form"); -const textarea = document.querySelector("textarea"); - -form.addEventListener("awesome", (e) => console.log(e.detail.text())); - -textarea.addEventListener("input", function () { - // Create and dispatch/trigger an event on the fly - // Note: Optionally, we've also leveraged the "function expression" (instead of the "arrow function expression") so "this" will represent the element - this.dispatchEvent( - new CustomEvent("awesome", { - bubbles: true, - detail: { text: () => textarea.value }, - }), - ); -}); -``` - -## Triggering built-in events - -This example demonstrates simulating a click (that is programmatically generating a click event) on a checkbox using DOM methods. [View the example in action.](https://mdn.dev/archives/media/samples/domref/dispatchEvent.html) - -```js -function simulateClick() { - const event = new MouseEvent("click", { - view: window, - bubbles: true, - cancelable: true, - }); - const cb = document.getElementById("checkbox"); - const cancelled = !cb.dispatchEvent(event); - - if (cancelled) { - // A handler called preventDefault. - alert("cancelled"); - } else { - // None of the handlers called preventDefault. - alert("not cancelled"); - } -} -``` - -## See also - -- [CustomEvent()](/en-US/docs/Web/API/CustomEvent/CustomEvent) -- {{domxref("document.createEvent()")}} -- {{domxref("Event.initEvent()")}} -- {{domxref("EventTarget.dispatchEvent()")}} -- {{domxref("EventTarget.addEventListener()")}} diff --git a/files/en-us/web/events/event_handlers/index.md b/files/en-us/web/events/event_handlers/index.md deleted file mode 100644 index 3f18876f9d6dc20..000000000000000 --- a/files/en-us/web/events/event_handlers/index.md +++ /dev/null @@ -1,88 +0,0 @@ ---- -title: Working with events and event handlers -slug: Web/Events/Event_handlers -page-type: guide -sidebar: events ---- - -Events are signals fired inside the browser window that notify of changes in the browser or operating system environment. Programmers can create _event handler_ code that will run when an event fires, allowing web pages to respond appropriately to change. - -This page provides a very brief "reminder" of how to work with events and event handlers. New developers should instead read [Introduction to events](/en-US/docs/Learn_web_development/Core/Scripting/Events). - -## What are the available events? - -Events are documented in and/or below the pages for the JavaScript objects that emit them. For example, to find out events fired on the browser window or the current document see the events sections in [`Window`](/en-US/docs/Web/API/Window#events) and [`Document`](/en-US/docs/Web/API/Document#events). - -You can use the [Event reference](/en-US/docs/Web/Events#event_index) to find out what JavaScript objects fire events for particular APIs, e.g., animation, media, and so on. - -## Registering event handlers - -There are two recommended approaches for registering handlers. Event handler code can be made to run when an event is triggered by assigning it to the target element's corresponding _onevent_ property, or by registering the handler as a listener for the element using the {{domxref("EventTarget.addEventListener", "addEventListener()")}} method. In either case the handler will receive an object that conforms to the [`Event` interface](/en-US/docs/Web/API/Event) (or a [derived interface](/en-US/docs/Web/API/Event#interfaces_based_on_event)). The main difference is that multiple event handlers can be added (or removed) using the event listener methods. - -> [!WARNING] -> A third approach for setting event handlers using HTML onevent attributes is not recommended! They inflate the markup and make it less readable and harder to debug. For more information see [Inline event handlers](/en-US/docs/Learn_web_development/Core/Scripting/Events#inline_event_handlers_—_dont_use_these). - -### Using onevent properties - -By convention, JavaScript objects that fire events have a corresponding "onevent" properties (named by prefixing "on" to the name of the event). These properties are called to run associated handler code when the event is fired, and may also be called directly by your own code. - -To set event handler code you can just assign it to the appropriate onevent property. Only one event handler can be assigned for every event in an element. If needed the handler can be replaced by assigning another function to the same property. - -Below we show how to set a `greet()` function for the `click` event using the `onclick` property. - -```js -const btn = document.querySelector("button"); - -function greet(event) { - console.log("greet:", event); -} - -btn.onclick = greet; -``` - -Note that an object representing the event is passed as the first argument to the event handler. This event object either implements or is derived from the {{domxref("Event")}} interface. - -### EventTarget.addEventListener - -The most flexible way to set an event handler on an element is to use the {{domxref("EventTarget.addEventListener")}} method. This approach allows multiple listeners to be assigned to an element, and for listeners to be _removed_ if needed (using {{domxref("EventTarget.removeEventListener")}}). - -> [!NOTE] -> The ability to add and remove event handlers allows you to, for example, have the same button performing different actions in different circumstances. In addition, in more complex programs cleaning up old/unused event handlers can improve efficiency. - -Below we show how a `greet()` function can be set as a listener/event handler for the `click` event (you could use an anonymous function expression instead of a named function if desired). Note again that the event is passed as the first argument to the event handler. - -```js -const btn = document.querySelector("button"); - -function greet(event) { - console.log("greet:", event); -} - -btn.addEventListener("click", greet); -``` - -The method can also take additional arguments/options to control aspects of how the events are captured and removed. More information can be found on the {{domxref("EventTarget.addEventListener")}} reference page. - -#### Using an Abort Signal - -A notable event listener feature is the ability to use an abort signal to clean up multiple event handlers at the same time. - -This is done by passing the same {{domxref("AbortSignal")}} to the {{domxref("EventTarget/addEventListener()", "addEventListener()")}} call for all the event handlers that you want to be able to remove together. You can then call {{domxref("AbortController/abort()", "abort()")}} on the controller owning the `AbortSignal`, and it will remove all event handlers that were added with that signal. For example, to add an event handler that we can remove with an `AbortSignal`: - -```js -const controller = new AbortController(); - -btn.addEventListener( - "click", - (event) => { - console.log("greet:", event); - }, - { signal: controller.signal }, -); // pass an AbortSignal to this handler -``` - -Then the event handler created by the code above can be removed like this: - -```js -controller.abort(); // removes any/all event handlers associated with this controller -``` diff --git a/files/en-us/web/html/reference/attributes/index.md b/files/en-us/web/html/reference/attributes/index.md index 24fbf4f70046f49..ed1711f98c921e2 100644 --- a/files/en-us/web/html/reference/attributes/index.md +++ b/files/en-us/web/html/reference/attributes/index.md @@ -1410,7 +1410,7 @@ To be clear, the values `"true"` and `"false"` are not allowed on boolean attrib > [!WARNING] > The use of event handler content attributes is discouraged. The mix of HTML and JavaScript often produces unmaintainable code, and the execution of event handler attributes may also be blocked by content security policies. -In addition to the attributes listed in the table above, global [event handlers](/en-US/docs/Web/Events/Event_handlers#using_onevent_properties) — such as [`onclick`](/en-US/docs/Web/API/Element/click_event) — can also be specified as [content attributes](#content_versus_idl_attributes) on all elements. +In addition to the attributes listed in the table above, global [event handlers](/en-US/docs/Web/API/Document_Object_Model/Events#using_onevent_properties) — such as [`onclick`](/en-US/docs/Web/API/Element/click_event) — can also be specified as [content attributes](#content_versus_idl_attributes) on all elements. All event handler attributes accept a string. The string will be used to synthesize a [JavaScript function](/en-US/docs/Web/JavaScript/Reference/Functions) like `function name(/*args*/) {body}`, where `name` is the attribute's name, and `body` is the attribute's value. The handler receives the same parameters as its JavaScript event handler counterpart — most handlers receive only one `event` parameter, while `onerror` receives five: `event`, `source`, `lineno`, `colno`, `error`. This means you can, in general, use the `event` variable within the attribute. diff --git a/files/en-us/web/html/reference/elements/body/index.md b/files/en-us/web/html/reference/elements/body/index.md index 5eb0404aae76742..3bb9c3c2408397d 100644 --- a/files/en-us/web/html/reference/elements/body/index.md +++ b/files/en-us/web/html/reference/elements/body/index.md @@ -205,4 +205,4 @@ This element includes the [global attributes](/en-US/docs/Web/HTML/Reference/Glo - {{HTMLElement("html")}} - {{HTMLElement("head")}} -- [Event handling overview](/en-US/docs/Web/Events/Event_handlers) +- [Event handling overview](/en-US/docs/Web/API/Document_Object_Model/Events#registering_event_handlers) diff --git a/files/en-us/web/index.md b/files/en-us/web/index.md index 5dc9abc55cdfd0c..65d13964917fffb 100644 --- a/files/en-us/web/index.md +++ b/files/en-us/web/index.md @@ -37,8 +37,6 @@ The open Web presents incredible opportunities for developers. To take full adva - : JavaScript is the Web's native programming language. - [WebAssembly](/en-US/docs/WebAssembly) - : WebAssembly allows programs written in C, C++, Rust, Swift, C#, Go, and more to run on the Web. -- [Events](/en-US/docs/Web/Events) - - : Events are what you build Web apps to react to; for example, when a Web page finishes loading, or a user selects something, presses a key, resizes a window, submits a form, or pauses a video. - [HTTP](/en-US/docs/Web/HTTP) - : HTTP is the fundamental Internet protocol for fetching documents, stylesheets, scripts, images, videos, fonts, and other resources over the Web — and for sending data back to Web servers. - [Media](/en-US/docs/Web/Media) diff --git a/files/en-us/web/mathml/reference/global_attributes/index.md b/files/en-us/web/mathml/reference/global_attributes/index.md index d26d0a9d8ac1903..5c5a8f2a1e53ce9 100644 --- a/files/en-us/web/mathml/reference/global_attributes/index.md +++ b/files/en-us/web/mathml/reference/global_attributes/index.md @@ -13,7 +13,7 @@ Global attributes may be specified on all [MathML elements](/en-US/docs/Web/Math In addition to the basic MathML global attributes, the following global attributes also exist: -- The [event handler](/en-US/docs/Web/Events/Event_handlers) attributes such as **`onclick`**, **`onfocus`**, etc. +- The [event handler](/en-US/docs/Web/API/Document_Object_Model/Events#registering_event_handlers) attributes such as **`onclick`**, **`onfocus`**, etc. - The [`href`](/en-US/docs/Web/MathML/Reference/Global_attributes/href) attribute for making MathML element a hyperlink. ## List of global attributes diff --git a/files/en-us/web/media/guides/audio_and_video_delivery/cross-browser_audio_basics/index.md b/files/en-us/web/media/guides/audio_and_video_delivery/cross-browser_audio_basics/index.md index a0017c88364014f..62b5044a9e187f4 100644 --- a/files/en-us/web/media/guides/audio_and_video_delivery/cross-browser_audio_basics/index.md +++ b/files/en-us/web/media/guides/audio_and_video_delivery/cross-browser_audio_basics/index.md @@ -570,7 +570,7 @@ There are also a couple of events related to buffering: - [Buffering, Seeking and Time Ranges](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/buffering_seeking_time_ranges) - [HTMLMediaElement events](/en-US/docs/Web/API/HTMLMediaElement#events) -- [Event reference > Media](/en-US/docs/Web/Events#media) +- [Event reference > Media](/en-US/docs/Web/API/Document_Object_Model/Events#media) - [HTML video and audio](/en-US/docs/Learn_web_development/Core/Structuring_content/HTML_video_and_audio) - [Creating a cross-browser video player](/en-US/docs/Web/Media/Guides/Audio_and_video_delivery/cross_browser_video_player) - [jPlayer](https://jplayer.org/): An open source audio and video library for jQuery and Zepto. diff --git a/files/en-us/web/media/guides/audio_and_video_delivery/index.md b/files/en-us/web/media/guides/audio_and_video_delivery/index.md index af97d8b8c772f8b..61fe5a5912bf433 100644 --- a/files/en-us/web/media/guides/audio_and_video_delivery/index.md +++ b/files/en-us/web/media/guides/audio_and_video_delivery/index.md @@ -530,4 +530,4 @@ A number of audio and video JavaScript libraries exist. The most popular librari - [Web Audio API](/en-US/docs/Web/API/Web_Audio_API) - [MediaStream Recording API](/en-US/docs/Web/API/MediaStream_Recording_API) - [getUserMedia](/en-US/docs/Web/API/MediaDevices/getUserMedia) -- [Event reference: Media](/en-US/docs/Web/Events#media) +- [Event index: Media](/en-US/docs/Web/API/Document_Object_Model/Events#media) diff --git a/files/sidebars/events.yaml b/files/sidebars/events.yaml deleted file mode 100644 index 1e15f132aa64974..000000000000000 --- a/files/sidebars/events.yaml +++ /dev/null @@ -1,11 +0,0 @@ -# Do not add comments to this file. They will be lost. - -sidebar: - - type: section - link: /Web/Events - - /Web/Events/Creating_and_triggering_events - - /Web/Events/Event_handlers - - type: section - title: Learn - - link: /Learn_web_development/Core/Scripting/Events - title: Introduction to events