addHandler() — vue Function Reference

Architecture documentation for the addHandler() function in helpers.ts from the vue codebase.

Function typescript VueCore Observer calls 2 called by 1

Entity Profile

VueCore→ Observer→ addHandler() — vue Function Reference

Dependency Diagram

graph TD
  05f74cc7_40db_04f6_e28a_3603fb1c7fdc["addHandler()"]
  84ab3997_ca97_807e_f586_e8d0a26ded10["helpers.ts"]
  05f74cc7_40db_04f6_e28a_3603fb1c7fdc -->|defined in| 84ab3997_ca97_807e_f586_e8d0a26ded10
  89ae2d84_ca61_4847_7313_0974c1948730["processAttrs()"]
  89ae2d84_ca61_4847_7313_0974c1948730 -->|calls| 05f74cc7_40db_04f6_e28a_3603fb1c7fdc
  c13e1e25_7252_0979_ab67_5e7a62876a2b["prependModifierMarker()"]
  05f74cc7_40db_04f6_e28a_3603fb1c7fdc -->|calls| c13e1e25_7252_0979_ab67_5e7a62876a2b
  19b5d835_c11a_e46d_5221_d327574bc5ef["rangeSetItem()"]
  05f74cc7_40db_04f6_e28a_3603fb1c7fdc -->|calls| 19b5d835_c11a_e46d_5221_d327574bc5ef
  style 05f74cc7_40db_04f6_e28a_3603fb1c7fdc fill:#6366f1,stroke:#818cf8,color:#fff

Relationship Graph

Source Code

src/compiler/helpers.ts lines 92–170

export function addHandler(
  el: ASTElement,
  name: string,
  value: string,
  modifiers?: ASTModifiers | null,
  important?: boolean,
  warn?: Function,
  range?: Range,
  dynamic?: boolean
) {
  modifiers = modifiers || emptyObject
  // warn prevent and passive modifier
  /* istanbul ignore if */
  if (__DEV__ && warn && modifiers.prevent && modifiers.passive) {
    warn(
      "passive and prevent can't be used together. " +
        "Passive handler can't prevent default event.",
      range
    )
  }

  // normalize click.right and click.middle since they don't actually fire
  // this is technically browser-specific, but at least for now browsers are
  // the only target envs that have right/middle clicks.
  if (modifiers.right) {
    if (dynamic) {
      name = `(${name})==='click'?'contextmenu':(${name})`
    } else if (name === 'click') {
      name = 'contextmenu'
      delete modifiers.right
    }
  } else if (modifiers.middle) {
    if (dynamic) {
      name = `(${name})==='click'?'mouseup':(${name})`
    } else if (name === 'click') {
      name = 'mouseup'
    }
  }

  // check capture modifier
  if (modifiers.capture) {
    delete modifiers.capture
    name = prependModifierMarker('!', name, dynamic)
  }
  if (modifiers.once) {
    delete modifiers.once
    name = prependModifierMarker('~', name, dynamic)
  }
  /* istanbul ignore if */
  if (modifiers.passive) {
    delete modifiers.passive
    name = prependModifierMarker('&', name, dynamic)
  }

  let events
  if (modifiers.native) {
    delete modifiers.native
    events = el.nativeEvents || (el.nativeEvents = {})
  } else {
    events = el.events || (el.events = {})
  }

  const newHandler: any = rangeSetItem({ value: value.trim(), dynamic }, range)
  if (modifiers !== emptyObject) {
    newHandler.modifiers = modifiers
  }

  const handlers = events[name]
  /* istanbul ignore if */
  if (Array.isArray(handlers)) {
    important ? handlers.unshift(newHandler) : handlers.push(newHandler)
  } else if (handlers) {
    events[name] = important ? [newHandler, handlers] : [handlers, newHandler]
  } else {
    events[name] = newHandler
  }

  el.plain = false
}