diff --git a/snippets/addEventListenerAll.md b/snippets/addEventListenerAll.md new file mode 100644 index 000000000..a3a93be1b --- /dev/null +++ b/snippets/addEventListenerAll.md @@ -0,0 +1,23 @@ +--- +title: addEventListenerAll +tags: browser,event,intermediate +--- + +Attaches an event listener to all the provided targets. + +- Use `Array.prototype.forEach()` and `EventTarget.addEventListener()` to attach the provided `listener` for the given event `type` to all `targets`. + +```js +const addEventListenerAll = (targets, type, listener, options, useCapture) => { + targets.forEach(target => + target.addEventListener(type, listener, options, useCapture) + ); +}; +``` + +```js +addAllEventListeners(document.querySelectorAll('a'), 'click', () => + console.log('Clicked a link') +); +// Logs 'Clicked a link' whenever any anchor element is clicked +``` diff --git a/snippets/removeEventListenerAll.md b/snippets/removeEventListenerAll.md new file mode 100644 index 000000000..3f7033640 --- /dev/null +++ b/snippets/removeEventListenerAll.md @@ -0,0 +1,28 @@ +--- +title: removeEventListenerAll +tags: browser,event,intermediate +--- + +Detaches an event listener from all the provided targets. + +- Use `Array.prototype.forEach()` and `EventTarget.removeEventListener()` to detach the provided `listener` for the given event `type` from all `targets`. + +```js +const removeEventListenerAll = ( + targets, + type, + listener, + options, + useCapture +) => { + targets.forEach(target => + target.removeEventListener(type, listener, options, useCapture) + ); +}; +``` + +```js +const linkListener = () => console.log('Clicked a link'); +document.querySelector('a').addEventListener('click', linkListener); +removeEventListenerAll(document.querySelectorAll('a'), 'click', linkListener); +```