jj
    Preparing search index...

    Class JJET<T>

    Wraps a DOM EventTarget.

    This is the base class for all JJ wrappers that wrap an EventTarget.

    EventTarget

    Type Parameters

    • T extends EventTarget = EventTarget

    Hierarchy (View Summary)

    Index

    Constructors

    constructor

    Accessors

    ref

    Methods

    off on run trigger triggerCustomEvent from

    Constructors

    • Creates a JJET instance.

      Type Parameters

      • T extends EventTarget = EventTarget

      Parameters

      • ref: T

        The EventTarget to wrap.

      Returns JJET<T>

      If ref is not an EventTarget.

      JJET.from for the factory form.

    Accessors

    • get ref(): T

      Gets the underlying DOM object.

      Returns T

      run for fluent callbacks that can also access this same wrapped target.

    Methods

    • Removes an event listener.

      Parameters

      • eventName: string

        The name of the event.

      • handler: EventListenerOrEventListenerObject | null

        The event handler.

      • Optionaloptions: boolean | EventListenerOptions

        Optional event listener options or boolean.

      Returns this

      This instance for chaining.

      Pass the same handler reference that was used in on() to properly remove the listener.

      const onResize = () => {
          console.log('resized')
      }

      const win = JJET.from(window)
      win.on('resize', onResize)
      win.off('resize', onResize)

      EventTarget.removeEventListener

    • Adds an event listener.

      Parameters

      • eventName: string

        The name of the event.

      • handler: EventListenerOrEventListenerObject | null

        The event handler.

      • Optionaloptions: AddEventListenerOptions

        Optional event listener options.

      Returns this

      This instance for chaining.

      const onResize = () => {
          console.log('resized')
      }

      JJET.from(window).on('resize', onResize)

      const target = {
          count: 0,
          increment() {
              this.count++
          },
      }

      JJET.from(window).on('click', target.increment.bind(target))

      EventTarget.addEventListener

    • Runs a function in the context of this JJET instance.

      Parameters

      • fn: (this: this, context: this) => void

        The synchronous function to run. this inside the function will refer to this JJET instance, and the wrapped instance is also passed as the first argument.

      Returns this

      This instance for chaining.

      node
        .run(function (context) {
          console.log(this.ref)
          console.log(context.ref)
        })
        .trigger(new Event('ready'))

      Use this to make synchronous adjustments while staying in a fluent chain. The callback return value is ignored. If you want to access the current JJ* instance using this, use a function rather than an arrow function.

      • ref for direct access to the wrapped native target.
      • on for event listener chaining.
      • trigger for dispatching events in-chain.

    • Dispatches an Event at the specified EventTarget.

      Parameters

      • event: Event

        The Event object to dispatch.

      Returns this

      This instance for chaining.

      EventTarget.dispatchEvent

    • Creates and dispatches a CustomEvent on the wrapped target.

      Type Parameters

      • T = unknown

      Parameters

      • eventName: string

        The event type name.

      • Optionaldetail: T

        Optional payload exposed as event.detail.

      • Optionaloptions: Omit<CustomEventInit<T>, "detail">

        Additional CustomEvent options excluding detail.

      Returns this

      This instance for chaining.

      This is a convenience wrapper around trigger for the common case of dispatching a payload-bearing custom event.

      The created event defaults to bubbles: true and composed: true. Pass options to override those defaults.

      If eventName is not a string.

      JJET.from(window).triggerCustomEvent('panel-ready', { id: '123' })

      JJET.from(this).triggerCustomEvent('todo-toggle', {
          id: '123',
          done: true,
      })

      CustomEvent()

    • Creates a JJET instance from an EventTarget reference.

      Parameters

      • ref: EventTarget

        The EventTarget instance.

      Returns JJET<EventTarget>

      A new JJET instance.

      constructor for input validation behavior.

    Settings

    Member Visibility

    On This Page

    Constructors
    Accessors
    Methods