From 81fa4a573f5277558c0c4398b510c2a328ff83b6 Mon Sep 17 00:00:00 2001 From: mberger75 Date: Thu, 8 Oct 2020 00:38:17 +0300 Subject: [PATCH 1/3] added snippet addMultipleEvents --- snippets/addMultipleEvents.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 snippets/addMultipleEvents.md diff --git a/snippets/addMultipleEvents.md b/snippets/addMultipleEvents.md new file mode 100644 index 000000000..c73faffc5 --- /dev/null +++ b/snippets/addMultipleEvents.md @@ -0,0 +1,24 @@ +--- +title: addMultipleEvents +tags: JavaScript, Browser, Events, beginner +--- + +Check if given string contains emoji. + +- Use Array.prototype.forEach() and EventTarget.addEventListener() to add multiples event listener with an assigned callback function to an element. + +```js +const addMultipleEvents = (el, evts) => { + evts.forEach(evt => el.addEventListener(evt.name, evt.fn, false)); +} +``` + +```js +addMultipleEvents(document.querySelector('.textInput'), + [ + {name: 'mousedown', fn: () => console.log('mousedown event')}, + {name: 'touchstart', fn: () => console.log('touchstart event')}, + {name: 'change', fn: () => console.log('change event')} + ] +); +``` From f391bacd1bc12e003ab0110cff5d6e836949d31d Mon Sep 17 00:00:00 2001 From: mberger75 Date: Thu, 8 Oct 2020 00:40:30 +0300 Subject: [PATCH 2/3] added snippet addMultipleEvents --- snippets/addMultipleEvents.md | 24 ++++++++++++++++++++++++ 1 file changed, 24 insertions(+) create mode 100644 snippets/addMultipleEvents.md diff --git a/snippets/addMultipleEvents.md b/snippets/addMultipleEvents.md new file mode 100644 index 000000000..b3e63f3fd --- /dev/null +++ b/snippets/addMultipleEvents.md @@ -0,0 +1,24 @@ +--- +title: addMultipleEvents +tags: JavaScript, Browser, Events, beginner +--- + +Add multiple event listener to an element. + +- Use Array.prototype.forEach() and EventTarget.addEventListener() to add multiples event listener with an assigned callback function to an element. + +```js +const addMultipleEvents = (el, evts) => { + evts.forEach(evt => el.addEventListener(evt.name, evt.fn, false)); +} +``` + +```js +addMultipleEvents(document.querySelector('.textInput'), + [ + {name: 'mousedown', fn: () => console.log('mousedown event')}, + {name: 'touchstart', fn: () => console.log('touchstart event')}, + {name: 'change', fn: () => console.log('change event')} + ] +); +``` From fdc7cb02b935a4b5ada8556c16bd4369a2d52172 Mon Sep 17 00:00:00 2001 From: Isabelle Viktoria Maciohsek Date: Thu, 8 Oct 2020 15:54:03 +0300 Subject: [PATCH 3/3] Update addMultipleEvents.md --- snippets/addMultipleEvents.md | 22 ++++++++++------------ 1 file changed, 10 insertions(+), 12 deletions(-) diff --git a/snippets/addMultipleEvents.md b/snippets/addMultipleEvents.md index b3e63f3fd..597476da4 100644 --- a/snippets/addMultipleEvents.md +++ b/snippets/addMultipleEvents.md @@ -1,24 +1,22 @@ --- -title: addMultipleEvents -tags: JavaScript, Browser, Events, beginner +title: addMultipleListeners +tags: browser,event,intermediate --- -Add multiple event listener to an element. +Add multiple event listeners with the same handler to an element. -- Use Array.prototype.forEach() and EventTarget.addEventListener() to add multiples event listener with an assigned callback function to an element. +- Use `Array.prototype.forEach()` and `EventTarget.addEventListener()` to add multiple event listeners with an assigned callback function to an element. ```js -const addMultipleEvents = (el, evts) => { - evts.forEach(evt => el.addEventListener(evt.name, evt.fn, false)); +const addMultipleListeners = (el, types, listener, options, useCapture) => { + types.forEach(type => el.addEventListener(type, listener, options, useCapture)); } ``` ```js -addMultipleEvents(document.querySelector('.textInput'), - [ - {name: 'mousedown', fn: () => console.log('mousedown event')}, - {name: 'touchstart', fn: () => console.log('touchstart event')}, - {name: 'change', fn: () => console.log('change event')} - ] +addMultipleListeners( + document.querySelector('.my-element'), + ['click', 'mousedown'], + () => { console.log('hello!') } ); ```