Skip to content


JavaScript library to help modern web applications with accessibility concerns by making accessibility simpler

# ally.event.activeElement

Observes changes to document.activeElement regardless of focus/blur events and emits active-element CustomEvents.

# Description

The property document.activeElement is visited on every animation frame.

This event should not be abused because FocusEvents do not bubble and are therefore unaccessible to event delegation, as the handling of focus and blur events can be delegated when using the capture phase:

document.addEventListener('focus', function(event) {
  // element that received focus
  // event.relatedTarget: element that lost focus
}, true);

# Usage

document.addEventListener('active-element', function(event) {
  // event.detail.focus: element that received focus
  // event.detail.blur: element that lost focus
}, false);

// start emitting active-element
var handle = ally.event.activeElement();
// stop emitting active-element

# Returns

A <global-service> interface, providing the handle.disengage() method to stop the service.

# Event data

The event.detail property provides the following data:

Name Type Description
event.detail.focus HTMLElement The element that received focus.
event.detail.blur HTMLElement The element that lost focus.

# Contributing