add() — vue Function Reference

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

Function typescript WebPlatform WebRuntime

Entity Profile

WebPlatform→ WebRuntime→ add() — vue Function Reference

Dependency Diagram

graph TD
  3b0d566c_c769_f99e_7d2b_74af5bdc7d19["add()"]
  fa3254df_d7fb_4fb8_94ec_97ddce44d626["events.ts"]
  3b0d566c_c769_f99e_7d2b_74af5bdc7d19 -->|defined in| fa3254df_d7fb_4fb8_94ec_97ddce44d626
  style 3b0d566c_c769_f99e_7d2b_74af5bdc7d19 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
  )
}