Appearance

Return to top
On this page

Events

Some stimulus-use modules will add new events. Events typically mirror the behavior they add to the controller.

Here is a list of all additional events:

EventModuleDescription
appearuseIntersectionNew event being triggered whenever the controller element appears. the detail contains the entry object and the controller
awayuseIdleNew event being triggered whenever the user is idle on the page.
backuseIdleNew event being triggered whenever the user returns back from an idle state.
click:outsideuseClickOutsideNew event being triggered whenever the user clicks outside of the controller element
disappearuseIntersectionNew event being triggered whenever the controller element disappears. the detail contains the entry object and the controller
invisibleuseVisibilityNew event being triggered whenever the page visibility change and the browser tab becomes invisible
visibleuseVisibilityNew event being triggered whenever the page visibility change and the browser tab becomes visible

Event Prefix

With the module options you can specify the event prefix. By default all module will emit events with the controller identifier as a prefix.

The eventPrefix option can be a boolean or a string.

// card_controller.js
export default class extends Controller {
  options = {
    eventPrefix: true,
  }

  connect() {
    useIntersection(this, this.options)
  }
}

Example for eventPrefix values:

  • true -> card:appear
  • false -> appear
  • "my-prefix" -> my-prefix:appear

Accessing source controller and details

The controller and the original event are provided within the details object of the event.

// get the emitting controller and original event for a click:outside event
const { controller, originalEvent } = event.detail

// get the emitting controller and entry object for an appear event
const { controller, entry } = event.detail