EN
JavaScript - add event listener called only once
11
points
In this short article, we would like to show how using JavaScript, add event that is called only once.
Quick solution:
const addOnceListener = (object, event, callback) => {
object.addEventListener(event, callback, {once: true});
};
// Usage example:
addOnceListener(window, 'focus', (e) => { /* ... */ });
or:
const addOnceListener = (object, event, callback) => {
const remove = () => object.removeEventListener(event, handle);
const handle = (e) => remove() || callback(e);
object.addEventListener(event, handle);
return remove;
};
// Usage example:
addOnceListener(window, 'focus', (e) => { /* ... */ });
Practical examples
1. Embedded solution
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button id="button">Click me!</button>
<script>
function addOnceListener(object, event, callback) {
object.addEventListener(event, callback, {once: true});
}
// Usage example:
var button = document.querySelector('#button');
var callback = function(e) {
console.log('Button clicked!');
};
addOnceListener(button, 'click', callback);
</script>
</body>
</html>
2. Custom solution
// ONLINE-RUNNER:browser;
<!doctype html>
<html>
<body>
<button id="button">Click me!</button>
<script>
function addOnceListener(object, event, callback) {
var remove = function() {
object.removeEventListener(event, handle);
};
var handle = function(e) {
remove();
callback(e);
};
object.addEventListener(event, handle);
return remove;
}
// Usage example:
var button = document.querySelector('#button');
addOnceListener(button, 'click', function(e) {
console.log('Button clicked!');
});
</script>
</body>
</html>