# Events shorthand

TIP

declare function click(listener?: EventListener): this;
declare function doubleClick(listener?: EventListener): this;
declare function mouseUp(listener?: EventListener): this;
declare function mouseDown(listener?: EventListener): this;
declare function mouseEnter(listener?: EventListener): this;
declare function mouseLeave(listener?: EventListener): this;
declare function hover(onEnter: EventListener, onLeave: EventListener): this;
declare function focus(listener?: EventListener): this;
declare function blur(listener?: EventListener): this;
declare function change(listener?: EventListener): this;
declare function input(listener?: EventListener): this;
declare function submit(listener?: EventListener): this;
declare function contextMenu(listener?: EventListener): this;

All these methods (just like the LightqueryCollection#trigger use the Custom event API. Triggering and listening is on each element. Just like regular addEventListener, the callback's this is bound to the current element ; thus avoid arrow functions.

# LightqueryCollection#click

Trigger or listen for click events:

µ(/**/).click(); //-> this LightqueryCollection
// Triggers click events

µ(/**/).click(onClick); //-> this LightqueryCollection
// Listen for click events

WARNING

Note that both a mousedown and a mouseup event are triggered before a click event.

# LightqueryCollection#doubleClick

Trigger or listen for double clicks:

µ(/**/).doubleClick(); //-> this LightqueryCollection
// Triggers dblclick events

µ(/**/).doubleClick(onDoubleClick); //-> this LightqueryCollection
// Listen for dblclick events

WARNING

Note that two click events are triggered before a single dblclick.

# LightqueryCollection#mouseUp

Trigger or listen for mouse up events:

µ(/**/).mouseUp(); //-> this LightqueryCollection
// Triggers mouseup events

µ(/**/).mouseUp(onMouseUp); //-> this LightqueryCollection
// Listen for mouseup events

TIP

Useful in tandem with mouseDown to get a "longpress" event simulation.

# LightqueryCollection#mouseDown

Trigger or listen for mouse down events:

µ(/**/).mouseDown(); //-> this LightqueryCollection
// Triggers mousedown events

µ(/**/).mouseDown(onMouseDown); //-> this LightqueryCollection
// Listen for mousedown events

TIP

Useful in tandem with mouseUp to get a "longpress" event simulation.

# LightqueryCollection#mouseEnter

Trigger or listen for mouse entering (i.e. start hovering) events:

µ(/**/).mouseEnter(); //-> this LightqueryCollection
// Triggers mouseenter events

µ(/**/).mouseEnter(onEnter); //-> this LightqueryCollection
// Listen for mouseenter events

# LightqueryCollection#mouseLeave

Trigger or listen for mouse leaving (i.e. end of hovering) events:

µ(/**/).mouseLeave(); //-> this LightqueryCollection
// Triggers mouseenter events

µ(/**/).mouseLeave(onLeave); //-> this LightqueryCollection
// Listen for mouseenter events

# LightqueryCollection#hover

Handle hovering:

const $e = µ(/**/);

$e.hover(onEnter, onLeave); //-> $e

// is equivalent to

$e.mouseEnter(onEnter).mouseLeave(onLeave); //-> $e

TIP

Ideal for handling hovering state.

# LightqueryCollection#focus

Give focus or listen for focus events:

µ(/**/).focus(); //-> this LightqueryCollection
// Triggers focus events

µ(/**/).focus(onFocus); //-> this LightqueryCollection
// Listen for focus events

# LightqueryCollection#blur

Remove focus or listen for blur events:

µ(/**/).blur(); //-> this LightqueryCollection
// Triggers blur events

µ(/**/).blur(onBlur); //-> this LightqueryCollection
// Listen for blur events

# LightqueryCollection#change

Trigger or listen for change events:

µ(/**/).change(); //-> this LightqueryCollection
// Triggers change events

µ(/**/).change(onChange); //-> this LightqueryCollection
// Listen for change events

TIP

Read this stackoverflow answer for the difference between input and change events.

# LightqueryCollection#input

Trigger or listen for input events:

µ(/**/).input(); //-> this LightqueryCollection
// Triggers input events

µ(/**/).input(onInput); //-> this LightqueryCollection
// Listen for input events

TIP

Read this stackoverflow answer for the difference between input and change events.

# LightqueryCollection#submit

Trigger or listen for submit events (on forms):

const $form = µ("form");

$form.submit(); //-> this LightqueryCollection
// Triggers submit events

$form.submit(onSubmit); //-> this LightqueryCollection
// Listen for submit events

WARNING

This will only be useful on forms.

# LightqueryCollection#contextMenu

Trigger or listen for context menu events:

$form.contextMenu(); //-> this LightqueryCollection
// Triggers contextmenu events

$form.contextMenu(onOpenContextMenu); //-> this LightqueryCollection
// Listen for contextmenu events

WARNING

This is very handy for creating custom context menus

← Misc Dimensions →