Skip to content
Branch: master
Go to file

Latest commit


Failed to load latest commit information.
Latest commit message
Commit time


Version Badge Build Status License

Declarative event handling to capture unbound action events

Action observer is a solution for capturing user triggered action events (click, submit) as they bubble up to the document element. This is most useful as a means of maintaining responsiveness pre-initialization of JavaScript heavy apps, allowing action events to be handled immediately or queued for processing once the page has finished initializing. Please refer to the blog post to read more.


Download the development or minified version, or install via NPM:

npm install @ryanmorr/action-observer


You'll want to add the script to the <head> of your HTML. This is important because it must be loaded before the DOM has started to load and scripts have begun executing so that action events can be captured pre-initialization.

To start, add a action-observe attribute to any element you wish to observe events on:

<!-- Observe click events -->
<a href="#" action-observe="add">Add Item</a>

<!-- Observe submit events -->
<form method="GET" action="#" action-observe="search">
    <input type="search" name="search" />
    <button type="submit">Submit</button>

Adding the action-observe attribute to a form will automatically observe submit events for that form. Otherwise, click events will be observed for any other type of element. The value of the action-observe attribute is used as the reference to that element in the JavaScript API for action-observer.


There are two different ways to approach implementation. The first option is to bind a callback function to be executed as soon as an action event is dispatched from the target element, allowing you to handle the request immediately:

import { observe } from '@ryanmorr/action-observer';

// Observes the element with the action-observe="add" attribute
observe('add', (event, element) => {
    // Handle the request immediately                  

The other option is to check if an action event was dispatched on a target element once your scripts have completed initializing to address the request afterwards:

import { wasTriggered } from '@ryanmorr/action-observer';

// Checks the element with the action-observe="add" attribute
if (wasTriggered('add')) {
    // Handle the request after the fact (better late than never)                  

Once your primary JavaScript has loaded, you can choose to stop observing specific elements or stop functionality entirely for all elements:

import { unobserve, disable } from '@ryanmorr/action-observer';

// Once the application code has initialized the link, stop observing
if (link.isInitialized()) {

// Once all initializing code is complete, disable all functionality
if (app.isLoaded()){


This project is dedicated to the public domain as described by the Unlicense.


Declarative event handling to capture unbound action events




You can’t perform that action at this time.