AskRoot | @jjwesterkamp/event-delegation

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">

- Defined in event-delegation.d.ts:96
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">

- Defined in event-delegation.d.ts:119
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">
- Defined in event-delegation.d.ts:137
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">
- Defined in event-delegation.d.ts:155
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">
- Defined in event-delegation.d.ts:174
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">

- Defined in event-delegation.d.ts:199
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">
- Defined in event-delegation.d.ts:217
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">
- Defined in event-delegation.d.ts:235
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">
- Defined in event-delegation.d.ts:254
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">

Hierarchy

Index

Methods

Methods

global

Returns AskEvent<HTMLElement, "SINGLE">

within

Type parameters

R: Element

Parameters

root: R

Returns AskEvent<R, "SINGLE">

Type parameters

Parameters

selector: K

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

Type parameters

S: string

Parameters

selector: S

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

Type parameters

R: Element

Parameters

root: string

Returns AskEvent<R, "SINGLE">

withinMany

Type parameters

R: Element

Parameters

roots: R[]

Returns AskEvent<R, "MANY">

Type parameters

Parameters

selector: K

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

Type parameters

S: string

Parameters

selector: S

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

Type parameters

R: Element

Parameters

roots: string

Returns AskEvent<R, "MANY">