From fdc7cb02b935a4b5ada8556c16bd4369a2d52172 Mon Sep 17 00:00:00 2001 From: Isabelle Viktoria Maciohsek Date: Thu, 8 Oct 2020 15:54:03 +0300 Subject: [PATCH] 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!') } ); ```