Merge pull request #1179 from 30-seconds/update-listenonce
Update listenOnce.md
This commit is contained in:
@ -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
|
||||||
|
|||||||
Reference in New Issue
Block a user