add() — vue Function Reference

Architecture documentation for the add() function in events.ts from the vue codebase.

Function typescript WebPlatform RuntimeModules

Entity Profile

WebPlatform→ RuntimeModules→ add() — vue Function Reference

Dependency Diagram

graph TD
  a5e3e15b_2796_9b4e_f12f_68d8ff3ea642["add()"]
  a96f977a_276b_ffab_5b5b_538f5f278c2e["events.ts"]
  a5e3e15b_2796_9b4e_f12f_68d8ff3ea642 -->|defined in| a96f977a_276b_ffab_5b5b_538f5f278c2e
  style a5e3e15b_2796_9b4e_f12f_68d8ff3ea642 fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/platforms/web/runtime/modules/events.ts lines 50–92

function add(
  name: string,
  handler: Function,
  capture: boolean,
  passive: boolean
) {
  // async edge case #6566: inner click event triggers patch, event handler
  // attached to outer element during patch, and triggered again. This
  // happens because browsers fire microtask ticks between event propagation.
  // the solution is simple: we save the timestamp when a handler is attached,
  // and the handler would only fire if the event passed to it was fired
  // AFTER it was attached.
  if (useMicrotaskFix) {
    const attachedTimestamp = currentFlushTimestamp
    const original = handler
    //@ts-expect-error
    handler = original._wrapper = function (e) {
      if (
        // no bubbling, should always fire.
        // this is just a safety net in case event.timeStamp is unreliable in
        // certain weird environments...
        e.target === e.currentTarget ||
        // event is fired after handler attachment
        e.timeStamp >= attachedTimestamp ||
        // bail for environments that have buggy event.timeStamp implementations
        // #9462 iOS 9 bug: event.timeStamp is 0 after history.pushState
        // #9681 QtWebEngine event.timeStamp is negative value
        e.timeStamp <= 0 ||
        // #9448 bail if event is fired in another document in a multi-page
        // electron/nw.js app, since event.timeStamp will be using a different
        // starting reference
        e.target.ownerDocument !== document
      ) {
        return original.apply(this, arguments)
      }
    }
  }
  target.addEventListener(
    name,
    handler,
    supportsPassive ? { capture, passive } : capture
  )
}