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 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. 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 `EventTarget.addEventListener()` to add an event listener to an element, using `{ once: true }` as options to only run the given callback once.
Use a condition to call `fn` only the first time the listener is triggered.
```js ```js
const listenOnce = (el, evt, fn) => { const listenOnce = (el, evt, fn) => el.addEventListener(evt, fn, { once: true });
let fired = false;
el.addEventListener(evt, (e) => {
if (!fired) fn(e);
fired = true;
});
};
``` ```
```js ```js
listenOnce( listenOnce(
document.getElementById('my-id), document.getElementById('my-id'),
'click', 'click',
() => console.log('Hello world') () => console.log('Hello world')
); // 'Hello world' will only be logged on the first click ); // 'Hello world' will only be logged on the first click