Semantic UI
ctrl+k
Enter a search term above to see results...
On This Page
Binding Events
Event Delegation
Triggering Events
Shorthand
Query - Events
Attach, remove, and trigger events on elements.
Binding Events
on
$('selector').on(eventName, handler, options);Attaches an event listener to matched elements.
Parameters
| Name | Type | Description |
|---|---|---|
| eventName | string | Space-separated event types (e.g., 'click', 'mouseenter mouseleave') |
| handler | function | Event handler function |
| options | object | Optional configuration |
Options
| Name | Type | Default | Description |
|---|---|---|---|
| returnHandler | boolean | false | Return handler object instead of Query |
| abortController | AbortController | auto | Custom AbortController for removal |
| capture | boolean | false | Use capture phase |
| once | boolean | false | Remove after first execution |
| passive | boolean | false | Handler won’t call preventDefault() |
Returns
- Standard: Query object (for chaining)
- returnHandler: true: Handler object with
abort()method (example)
Usage
$('button').on('click', (e) => { console.log('Clicked!', e.target);});Example
off
$('selector').off(eventName, handler);Removes event handlers attached with on().
Parameters
| Name | Type | Description |
|---|---|---|
| eventName | string | Space-separated event types to remove |
| handler | function | The handler function to remove |
Returns
Query object (for chaining).
Usage
const handler = (e) => console.log('Clicked!');
$('button').on('click', handler);$('button').off('click', handler);Example
one
$('selector').one(eventName, handler);Attaches a handler that executes at most once per element.
Parameters
| Name | Type | Description |
|---|---|---|
| eventName | string | Space-separated event types |
| handler | function | Event handler function |
Returns
Query object (for chaining).
Usage
$('button').one('click', () => { console.log('This fires once only');});Example
onNext
$('selector').onNext(eventName);$('selector').onNext(eventName, delegateSelector);$('selector').onNext(eventName, options);Returns a Promise that resolves on the next event occurrence. Useful for async/await patterns.
Parameters
| Name | Type | Description |
|---|---|---|
| eventName | string | Space-separated event types |
| delegateSelector | string | Optional selector for delegation |
| options | object | Optional configuration |
| options.timeout | number | Timeout in ms (rejects if exceeded) |
Returns
Promise that resolves with the event object.
Usage
await $('button').onNext('click');console.log('Button was clicked!');Event Delegation
Event delegation attaches a handler to a parent element that fires when descendants match a selector. Works with dynamically added elements.
on (delegated)
$('selector').on(eventName, delegateSelector, handler, options);Parameters
| Name | Type | Description |
|---|---|---|
| eventName | string | Space-separated event types |
| delegateSelector | string | CSS selector to match against event target |
| handler | function | Event handler (this bound to matched element) |
| options | object | Same options as direct binding |
Returns
Query object (for chaining).
Usage
$('#container').on('click', 'button', (e) => { console.log('Button clicked!', e.target);});Example
Triggering Events
trigger
$('selector').trigger(eventName);Executes all handlers for the given event type.
Parameters
| Name | Type | Description |
|---|---|---|
| eventName | string | Event type to trigger |
Returns
Query object (for chaining).
Usage
$('button').trigger('click');Example
dispatchEvent
$('selector').dispatchEvent(eventName, eventData, eventSettings);Creates and dispatches a custom event.
Parameters
| Name | Type | Description |
|---|---|---|
| eventName | string | Custom event name |
| eventData | object | Data passed via event.detail |
| eventSettings | object | Event configuration (bubbles, cancelable, etc.) |
Returns
Query object (for chaining).
Usage
Dispatch
$('.container').dispatchEvent('resize', { delta: 100 });Listen
$('.container').on('resize', (e) => { console.log('Delta:', e.detail.delta);});Example
Shorthand
focus
$('selector').focus();Gives focus to the first matched element.
Returns
Query object (for chaining).
Usage
$('input.username').focus();Example
blur
$('selector').blur();Removes focus from the first matched element.
Returns
Query object (for chaining).
Usage
$(document.activeElement).blur();Example
click
$('selector').click();Triggers a click event on matched elements.
Returns
Query object (for chaining).
Usage
$('button.submit').click();Example
submit
$('selector').submit();Triggers a submit event on matched form elements.
Returns
Query object (for chaining).
Usage
$('form').submit();Example
ready
$(document).ready(handler);Executes a function when the DOM is fully loaded.
Parameters
| Name | Type | Description |
|---|---|---|
| handler | function | Function to execute when DOM is ready |
Returns
Query object (for chaining).
Usage
$(document).ready(() => { console.log('DOM ready!');});