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:
xxxxxxxxxx1
const addOnceListener = (object, event, callback) => {2
object.addEventListener(event, callback, {once: true});3
};4
5
6
// Usage example:7
8
addOnceListener(window, 'focus', (e) => { /* ... */ });or:
xxxxxxxxxx1
const addOnceListener = (object, event, callback) => {2
const remove = () => object.removeEventListener(event, handle);3
const handle = (e) => remove() || callback(e);4
object.addEventListener(event, handle);5
return remove;6
};7
8
9
// Usage example:10
11
addOnceListener(window, 'focus', (e) => { /* ... */ });
xxxxxxxxxx1
2
<html>3
<body>4
<button id="button">Click me!</button>5
<script>6
7
function addOnceListener(object, event, callback) {8
object.addEventListener(event, callback, {once: true});9
}10
11
12
// Usage example:13
14
var button = document.querySelector('#button');15
16
var callback = function(e) {17
console.log('Button clicked!');18
};19
20
addOnceListener(button, 'click', callback);21
22
</script>23
</body>24
</html>
xxxxxxxxxx1
2
<html>3
<body>4
<button id="button">Click me!</button>5
<script>6
7
function addOnceListener(object, event, callback) {8
var remove = function() {9
object.removeEventListener(event, handle);10
};11
var handle = function(e) {12
remove();13
callback(e);14
};15
object.addEventListener(event, handle);16
return remove;17
}18
19
20
// Usage example:21
22
var button = document.querySelector('#button');23
24
addOnceListener(button, 'click', function(e) {25
console.log('Button clicked!');26
});27
28
</script>29
</body>30
</html>
