Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/soyleninjs/hequalizer/llms.txt

Use this file to discover all available pages before exploring further.

Hequalizer dispatches a CustomEvent on window at the end of every significant lifecycle operation. Each event carries the live Hequalizer instance in event.detail.instance, giving you full access to the current state — heights, breakpoint, elements — the moment the event fires.
All events are dispatched on window, not on individual DOM elements. Your listeners must be registered with window.addEventListener(...). The event name always uses the exact handle string passed to the constructor, so new Hequalizer('card-title') produces events named hequalizer:card-title:init, hequalizer:card-title:resize, and so on.

​
Event name format

hequalizer:{handle}:{name}
For example, an instance created with handle product-title dispatches:
  • hequalizer:product-title:init
  • hequalizer:product-title:resize
  • hequalizer:product-title:change
  • hequalizer:product-title:update
  • hequalizer:product-title:refresh
  • hequalizer:product-title:destroy

​
Event detail

Every event includes the same detail shape: 
event.detail.instance // the Hequalizer instance that fired the event
Use this to read values, actualBreakpoint, $elements, actualOptions, and any other instance property at the time the event fired.

​
Events reference

Emitted when init() finishes — after fonts are ready, options are resolved, heights are calculated for the first time, and all listeners are active.This is the earliest safe moment to read instance.values or instance.actualBreakpoint.
window.addEventListener('hequalizer:card-title:init', (event) => {
  const { instance } = event.detail;
  console.log('Ready. Heights:', instance.values);
  console.log('Active breakpoint:', instance.actualBreakpoint);
});
Emitted after a resize-triggered recalculation completes (respecting any debounce delay). Not emitted when observeResize is false for the active breakpoint.
window.addEventListener('hequalizer:card-title:resize', (event) => {
  const { instance } = event.detail;
  console.log('Resized. Breakpoint:', instance.actualBreakpoint);
  console.log('New heights:', instance.values);
});
Emitted after a MutationObserver-triggered recalculation finishes. Fires when the text content, child nodes, or subtree of any tracked element changes. The internal change debounce is always 20 ms.
window.addEventListener('hequalizer:card-title:change', (event) => {
  const { instance } = event.detail;
  console.log('Content changed. Heights:', instance.values);
});
Emitted when a manual call to instance.update() completes.
window.addEventListener('hequalizer:card-title:update', (event) => {
  const { instance } = event.detail;
  console.log('Manually updated:', instance.values);
});
Emitted when instance.refreshElements() completes — after the DOM has been re-queried and heights have been recalculated for the new element set.
window.addEventListener('hequalizer:card-title:refresh', (event) => {
  const { instance } = event.detail;
  console.log('Elements refreshed. Count:', instance.$elements.length);
  console.log('New heights:', instance.values);
});
Emitted as the last action of instance.destroy(), just before the instance is removed from Hequalizer.instances. At this point instance.values is already 0 and all CSS variables and classes have been cleared.
window.addEventListener('hequalizer:card-title:destroy', (event) => {
  console.log('Instance destroyed. Handle was:', event.detail.instance.handle);
});

​
Comprehensive example

Listening to all events
const instance = new Hequalizer('card-title');

window.addEventListener('hequalizer:card-title:init', (event) => {
  console.log('Ready. Heights:', event.detail.instance.values);
});

window.addEventListener('hequalizer:card-title:resize', (event) => {
  console.log('Resized. Breakpoint:', event.detail.instance.actualBreakpoint);
});

window.addEventListener('hequalizer:card-title:change', (event) => {
  console.log('Content changed. Heights:', event.detail.instance.values);
});

window.addEventListener('hequalizer:card-title:update', (event) => {
  console.log('Manually updated:', event.detail.instance.values);
});

window.addEventListener('hequalizer:card-title:refresh', (event) => {
  console.log('Elements refreshed:', event.detail.instance.$elements.length);
});

window.addEventListener('hequalizer:card-title:destroy', (event) => {
  console.log('Instance destroyed.');
});

​
Event summary table

EventEmitted when
hequalizer:{handle}:initinit() finishes after document.fonts.ready
hequalizer:{handle}:resizeResize recalculation finishes (requires observeResize: true)
hequalizer:{handle}:changeContent-change recalculation finishes via MutationObserver
hequalizer:{handle}:updateManual update() call finishes
hequalizer:{handle}:refreshrefreshElements() call finishes
hequalizer:{handle}:destroydestroy() fires, just before instance is removed from Hequalizer.instances

Build docs developers (and LLMs) love

Get started for freeTalk to us