Merge pull request #1179 from 30-seconds/update-listenonce

Update listenOnce.md
This commit is contained in:
Angelos Chalaris
2020-08-10 13:53:42 +03:00
committed by GitHub

View File

@ -1,26 +1,19 @@
---
title: listenOnce
tags: browser,event,closure,intermediate
tags: browser,event,beginner
---
Adds an event listener to an element that will only run the callback the first time the event is triggered.
Use `EventTarget.addEventListener()` to add an event listener to an element, storing the reference in a variable.
Use a condition to call `fn` only the first time the listener is triggered.
Use `EventTarget.addEventListener()` to add an event listener to an element, using `{ once: true }` as options to only run the given callback once.
```js
const listenOnce = (el, evt, fn) => {
let fired = false;
el.addEventListener(evt, (e) => {
if (!fired) fn(e);
fired = true;
});
};
const listenOnce = (el, evt, fn) => el.addEventListener(evt, fn, { once: true });
```
```js
listenOnce(
document.getElementById('my-id),
document.getElementById('my-id'),
'click',
() => console.log('Hello world')
); // 'Hello world' will only be logged on the first click