← #112 Combine styles with the :is pseudo-class selector

Create an one-time event handler

Topics: DOM, JavaScript

Sometimes we want a given event of an element to happen once. Usually, it can be done by attaching a handler which removes itself:

const handler = (e) => {
// Do something ...
element.removeEventListener('click', handler);

element.addEventListener('click', handler);

We can use a named function expression to shorten the code a little bit:

element.addEventListener('click', function handler(e) {
// Do something ...

// Remove the handler
e.currentTarget.removeEventListener(e.type, handler);

However, the modern browsers provide the new once option that makes things easier. We don't have to track the reference of the handler anymore.

element.addEventListener('click', (e) => {
// Do something ...
}, {
once: true
Fix a typo or suggest an improvement
#114 Start a simple web server on macOS