Options
All
  • Public
  • Public/Protected
  • All
Menu

Represents the package's main namespace EventDelegation. Provides methods for setting the event-delegation root element(s)

AskRoot => AskEvent => AskSelector => AskListener builds EventHandler

All methods / overloads return the AskEvent interface.

Hierarchy

  • AskRoot

Index

Methods

global

  • global(): AskEvent<HTMLElement, "SINGLE">
  • Start building an event-delegation handler for the (global) body element.

    example
    EventDelegation
        .global()
    

    Returns AskEvent<HTMLElement, "SINGLE">

within

  • within<R>(root: R): AskEvent<R, "SINGLE">
  • within<K>(selector: K): AskEvent<TagNameMap[K], "SINGLE">
  • within<S>(selector: S): AskEvent<ParseSelector<S, Element>, "SINGLE">
  • within<R>(root: string): AskEvent<R, "SINGLE">
  • Start building an event-delegation handler for a specified root.

    Method overload that takes an Element instance as the root.

    example
    declare const myRoot: HTMLElement
    
    EventDelegation
        .within(myRoot)
    

    Type parameters

    • R: Element

      The element type for the root element. This param is inferred from the selector argument.

    Parameters

    • root: R

      A root element reference.

    Returns AskEvent<R, "SINGLE">

  • Start building an event-delegation handler for a specified root.

    Method overload that takes a CSS tag selector for the root. This provides autocompletion features when starting to type tag-qualified CSS selectors.

    example
    EventDelegation
        .within('form')
    

    Type parameters

    • K: "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view"

      the HTML tag name literal type for the selector argument. This param is inferred from the selector argument.

    Parameters

    • selector: K

      An HTML (or SVG) tag selector.

    Returns AskEvent<TagNameMap[K], "SINGLE">

  • Start building an event-delegation handler for a specified root.

    Method overload that takes a CSS selector for the root. It wil attempt to parse the selector and infer the root element type from it.

    example
    EventDelegation
        .within('#main form.my-form')
    

    Type parameters

    • S: string

      The CSS-style selector literal type for the selector argument. This param is inferred from the selector argument.

    Parameters

    • selector: S

      A tag-qualified CSS-style selector to parse.

    Returns AskEvent<ParseSelector<S, Element>, "SINGLE">

  • Start building an event-delegation handler for a specified root.

    Method overload that can be used when all else fails. If previous overloads failed to match, this one allows you to explicitly specify the expected root type for any selector string.

    example
    EventDelegation
        .within<CustomComponent>('custom-component')
    

    Type parameters

    • R: Element

      The element type for the root element. This param can be explicitly given to override the default Element type.

    Parameters

    • root: string

      Any CSS selector that is expected to select the root element type.

    Returns AskEvent<R, "SINGLE">

withinMany

  • withinMany<R>(roots: R[]): AskEvent<R, "MANY">
  • withinMany<K>(selector: K): AskEvent<TagNameMap[K], "MANY">
  • withinMany<S>(selector: S): AskEvent<ParseSelector<S, Element>, "MANY">
  • withinMany<R>(roots: string): AskEvent<R, "MANY">
  • Start building an event-delegation handler for multiple specified roots.

    Method overload that takes Element instances as the roots.

    example
    declare const rootA: HTMLElement
    declare const rootB: HTMLFormElement
    
    EventDelegation
        .withinMany([rootA, rootB])
    

    Type parameters

    • R: Element

      The element type for the root elements. Note that this may very well be a union type when an array with multiple root types is given. This param is inferred from the selector argument.

    Parameters

    • roots: R[]

      An array of root element references.

    Returns AskEvent<R, "MANY">

  • Start building an event-delegation handler for multiple specified roots.

    Method overload that takes a CSS tag selector for the roots. This provides autocompletion features when starting to type tag-qualified CSS selectors.

    example
    EventDelegation
        .withinMany('form')
    

    Type parameters

    • K: "symbol" | "object" | "a" | "abbr" | "address" | "applet" | "area" | "article" | "aside" | "audio" | "b" | "base" | "basefont" | "bdi" | "bdo" | "blockquote" | "body" | "br" | "button" | "canvas" | "caption" | "cite" | "code" | "col" | "colgroup" | "data" | "datalist" | "dd" | "del" | "details" | "dfn" | "dialog" | "dir" | "div" | "dl" | "dt" | "em" | "embed" | "fieldset" | "figcaption" | "figure" | "font" | "footer" | "form" | "frame" | "frameset" | "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | "head" | "header" | "hgroup" | "hr" | "html" | "i" | "iframe" | "img" | "input" | "ins" | "kbd" | "label" | "legend" | "li" | "link" | "main" | "map" | "mark" | "marquee" | "menu" | "meta" | "meter" | "nav" | "noscript" | "ol" | "optgroup" | "option" | "output" | "p" | "param" | "picture" | "pre" | "progress" | "q" | "rp" | "rt" | "ruby" | "s" | "samp" | "script" | "section" | "select" | "slot" | "small" | "source" | "span" | "strong" | "style" | "sub" | "summary" | "sup" | "table" | "tbody" | "td" | "template" | "textarea" | "tfoot" | "th" | "thead" | "time" | "title" | "tr" | "track" | "u" | "ul" | "var" | "video" | "wbr" | "circle" | "clipPath" | "defs" | "desc" | "ellipse" | "feBlend" | "feColorMatrix" | "feComponentTransfer" | "feComposite" | "feConvolveMatrix" | "feDiffuseLighting" | "feDisplacementMap" | "feDistantLight" | "feFlood" | "feFuncA" | "feFuncB" | "feFuncG" | "feFuncR" | "feGaussianBlur" | "feImage" | "feMerge" | "feMergeNode" | "feMorphology" | "feOffset" | "fePointLight" | "feSpecularLighting" | "feSpotLight" | "feTile" | "feTurbulence" | "filter" | "foreignObject" | "g" | "image" | "line" | "linearGradient" | "marker" | "mask" | "metadata" | "path" | "pattern" | "polygon" | "polyline" | "radialGradient" | "rect" | "stop" | "svg" | "switch" | "text" | "textPath" | "tspan" | "use" | "view"

      the HTML tag name literal type for the selector argument. This param is inferred from the selector argument.

    Parameters

    • selector: K

      An HTML (or SVG) tag selector.

    Returns AskEvent<TagNameMap[K], "MANY">

  • Start building an event-delegation handler for multiple specified roots.

    Method overload that takes a CSS selector for the roots. It wil attempt to parse the selector and infer the root elements' type from it.

    example
    EventDelegation
        .withinMany('#main form.my-form')
    

    Type parameters

    • S: string

      The CSS-style selector literal type for the selector argument. This param is inferred from the selector argument.

    Parameters

    • selector: S

      A tag-qualified CSS-style selector to parse.

    Returns AskEvent<ParseSelector<S, Element>, "MANY">

  • Start building an event-delegation handler for multiple specified roots.

    Method overload that can be used when all else fails. If previous overloads failed to match, this one allows you to explicitly specify the expected type for any selector string.

    example
    EventDelegation
        .withinMany<CustomComponent>('custom-component')
    

    Type parameters

    • R: Element

      The element type for the root element. This param can be explicitly given to override the default Element type.

    Parameters

    • roots: string

    Returns AskEvent<R, "MANY">