Activate

This is a method for binding accessible activation events, for elements that should act like buttons. These events will be fired when an element is clicked (or tapped, on touch devices), or when the enter key is pressed down or the spacebar key is released while the element has focus.

This emulates how browsers natively apply click events to <button> elements.

Though activate binds keyboard events, it will not force an element to become keyboard focusable. If you bind an event to an element that is not natively focusable, make sure it has a tabindex="0" attribute so it can receive keyboard focus.

Methods

activate

activate(elements: string | HTMLElement | NodeListOf<HTMLElement>, fn: ActivateEventListener) => void

Binds the function fn to a click event to the element or elements passed through in the elements argument. Similarly to addEventListener, activate will not bind multiple instance of the same function to the same element.

In addition to the click event, activate will also bind additional key events based on each element's type.

Most elements will have enter keydown events and spacebar keyup events bound to them.

<a> elements already natively accept enter keydowns as a click event natively. Unlike other elements, holding down enter while focus is on an <a> element will only cause the click event to fire once.

<button> elements don't need any additional events to be bound, as they already accept enter and spacebar key events as clicks natively.

activate will also prevent the default action of spacebar in order to stop the page scrolling, except for some elements that don't treat this as the default action. The elements excluded from this are <button>, <input>, and <textarea>

Arguments

elements: string | HTMLElement | NodeListOf<HTMLElement>

This argument can be passed in any of three forms:

  • string that is a valid CSS selector
  • HTMLElement
  • NodeList of HTMLElements
fn: ActivateEventListener

A function to be bound to the click and keyboard events. For more info see the ActivateEventListener interface.

Examples

Binding with a NodeList

activate can be used with NodeList objects, such as those returned by document.querySelectorAll:

Binding with an HTMLElement

activate can be used with HTMLElement object directly, such as those returned by document.querySelector:

Binding with a string

activate can be used with any valid CSS selector string:

Common element types

Try activating each of these elements with a click, and with the enter and spacebar keys:

span a

deactivate

deactivate(elements: string | HTMLElement | NodeListOf<HTMLElement>, fn: ActivateEventListener)

Unbinds a function found by activate.

deactivate takes the same arguments as activate.

Examples

Interfaces

ActivateEventListener

interface ActivateEventListener { (this: HTMLElement, e: KeyboardEvent | MouseEvent): any }

Because activate creates secondary event listeners that listen for 'keydown' events, and the primary function it binds is bound to the 'click' event, that primary function needs to be able to handle either a KeyboardEvent or a MouseEvent as its first argument.