/yugtude

Your Ultimate Guide to Understanding DOM Events

Primary LanguageHTMLMIT LicenseMIT

Your Ultimate Guide to Understanding DOM Events

Contents

  1. Introduction to the DOM Events Course

  2. High-Level DOM Events Concepts

  • Event

    • Dozens of Types

      • Animation
      • Asynchronous data fetching
      • Clipboard
      • Composition
      • CSS transition
      • Database
      • DOM mutation
      • Drag'n'drop, Wheel
      • Focus
      • Form
      • Fullscreen
      • Gamepad
      • Gestures
      • History
      • HTML element content display management
      • Inputs
      • Keyboard
      • Loading/unloading documents
      • Manifests
      • Media
      • Messaging
      • Mouse
      • Network/Connection
      • Payments
      • Performance
      • Pointer
      • Print
      • Promise rejection
      • Sockets
      • SVG
      • Text selection
      • Touch
      • Virtual reality
      • RTC (real time communication)
      • Server-sent events
      • Speech
      • Workers

    • 3 Phases

  • EventTarget

  • https://domevents.dev/

    • 4 Event Targets
  1. Listen to Events using HTML Attribute Event Handlers
  1. Listen to Events using Object Property Event Handlers

  1. Understand the Relationship Between HTML Attribute and Object Property Event Handlers

  2. Add an Event Listener with addEventListener

  • addEventListener

    • EventTarget.addEventListener()

    • DOM2 / DOM2+ Event Listener

    • Bubble phase by default

    • Syntax

      addEventListener(type, listener)
addEventListener(type, listener, options)
addEventListener(type, listener, useCapture)
  1. Remove an Event Listener with removeEventListener

  1. Choose an Event Listener Mechanism

  2. The Execution Order of Event Listeners

  3. The Execution Order of Event Listeners in the Target Phase

  4. The Event Object

  • Clicking the parent element and the button shall get different results.
  • Event
    • Event.timeStamp
    • Event.returnValue #deprecated
    • Event.currentTarget
      • The currentTarget property changes as the event flows through the different event listeners. And it's also set to null when the event is finished dispatching.
  1. Log Events to the Console
  • Developer Tools
    • Console

      This value was evaluated upon first expanding.

  1. Cancel Events
  1. Cancel Bespoke Events
  1. Stop Events
  1. The Event Delegation Pattern
  1. Create and Dispatch Synthetic Events
  • synthetic
    • / sɪnˈθetɪk /
    • Synthetic products are made from chemicals or artificial substances rather than from natural ones.
    • e.g. Boots made from synthetic materials can usually be washed in a machine.
  • Event()
    • Event.timeStamp
      • The event.tiemStamp property is set when the event is created and not when it's dispatched.
  • MouseEvent()
  • EventTarget.dispatchEvent()
    • When an event is dispatched, its internal stopPropagation and stopImmediatePropagation flags are cleared, but the internal canceled flag is not cleared.
  • CustomEvent()
  1. Deprecated Event Creation Mechanisms
  1. Events are Dispatched Synchronously
  • EventTarget.dispatchEvent()

    • Unlike "native" events, which are fired by the browser and invoke event handlers asynchronously via the event loop, dispatchEvent() invokes event handlers synchronously. All applicable event handlers are called and return before dispatchEvent() returns.

  1. Add and Remove Event Listeners while an Event is Dispatching

  2. DOM Events and the Event Loop

  1. DOM Events and Microtasks

  • When a task for an event is being executed on the Call Stack, all event listeners for the event are executed.

  • When the Call Stack is empty, our microtask queue will be executed. What this means is that microtasks queued within an event listener will be executed immediately after that event listener, and before the next event listener is executed.

  • queueMicrotask()

  1. Improve Scroll Performance with Passive Event Listeners

  • Problem

    • If a user is trying to scroll the page, the browser has to wait for our wheel event listeners to be processed before the browser can know if native scrolling is allowed to happen. It has to wait to see if the event was canceled. This delay can be significant and can make a web page feel unresponsive.

    • This delay can be even worse if the browser is already executing some other tasks in the Call Stack, which needs to be finished before the wheel event can even start to be processed.

    • The solution to this problem is passive event listeners.

    • If all of our event listeners on our event path are passive, the browser does not need to wait for the event path to be processed to know if an event will be canceled. It already knows the event cannot be canceled. The browser can allow the native scroll to start straight away without needing to wait for any JavaScript.

  • Passive event listeners

  • Scrolling

  1. Default Passive Values on the Body Element

  2. Synchronous and Asynchronous Events (Ordered and Unordered Events)

  • Synchronous and asynchronous events

    • EXAMPLE 3

      • During loading of a document, an inline script element is parsed and executed. The load event is queued to be fired asynchronously at the script element. However, because it is an async event, its order with relation to other synchronous events fired during document load (such as the DOMContentLoaded event from [HTML5]) is not guaranteed.

  • focus
  1. Window Reflecting Body Element Event Handlers
  1. Debug and Inspect Event Listeners with Chrome Developer Tools
  1. Debug Event Listener Performance with Chrome Developer Tools

Known Issues

  1. My document and code are different from the official version.