Event Event Handlers HTML Attribute DOM Property Removing Event handler Accessing the Element : this Don's use setAttribute addEventListener removeEventListener Event Object Handlers as an Object : handleEvent

Bubbling And Capturing Bubbling event.currentTarget Stopping Bubbling : stopPropagation() event.stopImmediatePropagation() Don’t stop bubbling without a need! Capturing Phase Precedence Event Delegation Event Delegation : Highlighting a Table Cell Event Delegation : Actions in markup Event Delegation : The “behavior” pattern Event Delegation : Toggler

Browser Default Actions Preventing browser actions Prevent Further Events event.preventDefault() event.defaultPrevented

Create Custom Event dispatchEvent Event.isTrusted Bubbling Example Dispatching In-Built Events CustomEvent event.preventDefault() Nested Event, Events, All are Synchronous Dispatching In-Built Events

Mouse Event Type Events Order Getting the button : which Modifiers: shift, alt, ctrl and meta Coordinates: clientX/Y, pageX/Y Dealing With Selection Problem Preventing Copy : oncopy mouseover/mouseout relatedTarget Events Frequency mouseover/mouseout on Child Element mouseenter/mouseleave Example : Table Cell Highlighting

Drag And Drop

Keyboard Event keydown and keyup event.key and event.code Auto-Repeat Default Action Legacy

Scroll Event

DOMContentLoaded async and defer window.onload window.onunload window.onbeforeunload readyState document.readystatechange Resource Loading : onload