# Handling Events for Many Elements
**URL:** https://forum.kirupa.com/t/handling-events-for-many-elements/352433
**Category:** programming
**Created:** [November 23, 2014, 7:09am UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433 "2014-11-23T07:09:51Z")
**Posts on this page:** 13
**Page:** 2
### Author:  [@senocular](https://forum.kirupa.com/u/senocular)
#### Post date: [March 30, 2018, 4:41pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/21 "2018-03-30T16:41:06Z")
@TallGlassOfMike That still works. The approach described in this tutorial doesn’t work as well in that case, so maybe you’ll want to assign them individually like that.
Otherwise it would mean a more complicated filter. In using a single event listener, you need to be able to tell that what you clicked was what you wanted to be clicked. This was what `if (e.target !== e.currentTarget) { ... }` was doing - making sure that clicks that were made on `#theDude` (`e.currentTarget`) but not any of the `one`, `two`, `three`, `four`, or `five` buttons (`e.target`) were getting ignored. If the background of `#theDude` was clicked, for example, then `e.target === e.currentTarget` would be true.
If you have multiple buttons in different hierarchies, then the single handler would have to be applied to the common parent of those buttons. In a worst case scenario, that would be the `body` element. But then you would need to check `e.target` for basically every click made in the entire document to see if it’s one of your buttons. The check for this wouldn’t actually be too hard if you had a list of selectors targeting your buttons. It could be as simple as:
```auto
document.body.addEventListener('click', function (e) {
if (e.target.matches('#parent1 .button, #parent2 .button, #parent3 .button')) {
// do something with your clicked button
}
});
```
But there is the downside of this check happening for every click in the common parent. If you’re ok with that (does one if check really matter that much?) then this could work for you. One event handler is a lot easier to manage than multiple event handlers and it means the dom can be changed and have `.button` elements added and removed and re-added without affecting the click handler at all.
---
### Author:  [@EricYates](https://forum.kirupa.com/u/EricYates)
#### Post date: [May 11, 2018, 1:42am UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/22 "2018-05-11T01:42:50Z")
Excellent post, thanks! How would this be done for contenteditable div tags? It looks like this:
```
...
```
With JavaScript:
```
var e = document.querySelector("#theParent");
e.addEventListener("input", doSomething, false);
```
When I run this, it returns e.target as “theParent”. I tried adding contenteditable to each of the inner div tags as well, which didn’t work. Would greatly appreciate any help!
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 11, 2018, 5:24am UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/23 "2018-05-11T05:24:44Z")
If you replace the **input** event with **click** , then the appropriate element you clicked on works - even if the parent is a `contenteditable` div element:
```
```
The input event is a bit bizarre in how it behaves. Can you share more on what you are trying to do?
Thanks,
Kirupa 🤓
---
### Author:  [@EricYates](https://forum.kirupa.com/u/EricYates)
#### Post date: [May 14, 2018, 7:17pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/24 "2018-05-14T19:17:26Z")
Thanks for the suggestion, although click won’t work for this use case. I’m adding paragraphs within a larger text window. Each paragraph is within a div tag, and the entire text window is inside the parent div. Every time the user enters new text, the event listener fires only on the specific div paragraph
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 14, 2018, 7:23pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/25 "2018-05-14T19:23:10Z")
Can you provide a link to your page or a smaller repro? This seems like a very reasonable scenario, so there has to be some magical approach that works. I’d love to fiddle with it for a bit 😛
---
### Author:  [@akpan\_james](https://forum.kirupa.com/u/akpan_james)
#### Post date: [May 26, 2018, 8:36pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/26 "2018-05-26T20:36:51Z")
# I am making a calculator pls how can i apply this to mine?Your explanation was legit but i learn slow
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 26, 2018, 9:12pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/27 "2018-05-26T21:12:31Z")
Can you be a bit more specific in what you’d like help with? 🙂
---
### Author:  [@akpan\_james](https://forum.kirupa.com/u/akpan_james)
#### Post date: [May 26, 2018, 9:40pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/28 "2018-05-26T21:40:25Z")
Yes sure. Sorry I was very frustrate at the time I sent my last message. A building a calculator and aim is quite simple. I want this to have keys from 1-9 including 0 of course. So when clicked, that is any of the buttons like 3 it display in a screen (a div with light background) so as my of picture shows i have gotten the keys in a variable with a query selector. So should I add an event listener one by one on each element or is there an easier way.
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [May 27, 2018, 12:35am UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/29 "2018-05-27T00:35:54Z")
You can add an event listener to the parent of the keys like the article describes. Then you can then check for which key triggered the event. That would be the cleaner way to do it 🙂
---
### Author:  [@omar-bakhsh](https://forum.kirupa.com/u/omar-bakhsh)
#### Post date: [September 7, 2019, 9:08am UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/30 "2019-09-07T09:08:45Z")
\*\*the innerHTML value not saved whene i input value in another input lebel \*\*
function formButtonClicked (){
```
var twoElement = document.querySelector("#cm_name");
var threeElement = document.querySelector("#cm_phone");
var fourElement = document.querySelector("#cm_adress");
var fiveElement = document.querySelector("#car_type");
var sixElement = document.querySelector("#car_color");
var sevenElement = document.querySelector("#car_plate");
var eightElement = document.querySelector("#car_shasy");
twoElement.addEventListener( 'input', doSomething, false);
threeElement.addEventListener('input', doSomething, false);
fourElement.addEventListener( 'input', doSomething, false);
fiveElement.addEventListener( 'input', doSomething, false);
sixElement.addEventListener( 'input', doSomething, false);
sevenElement.addEventListener('input', doSomething, false);
eightElement.addEventListener('input', doSomething, false);
function doSomething(e) {
var clickedItem = e.target.value;
var inputid=e.target.id;
switch(inputid ){
case "cm_name" : document.querySelector('.div_cm_name' ).innerHTML=clickedItem; break;
case "cm_phone" : document.querySelector('.div_cm_phone').innerHTML=clickedItem; break;
case "cm_adress": document.querySelector('.div_cm_adress').innerHTML=clickedItem; break;
case "car_type" : document.querySelector('.div_car_type').innerHTML=clickedItem; break;
case "car_color": document.querySelector('.div_car_color').innerHTML=clickedItem; break;
case "car_plate": document.querySelector('.div_car_plate').innerHTML=clickedItem; break;
case "car_shasy": document.querySelector('.div_car_shasy').innerHTML=clickedItem; break;
default:
console.log("the id of the form input is: " + inputid);
}
}}
```
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [September 8, 2019, 7:30am UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/31 "2019-09-08T07:30:18Z")
What are you trying to do exactly? The code snippet you posted doesn’t seem to fully help 🙂
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 10, 2019, 8:22pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/32 "2019-10-10T20:22:11Z")
6 posts were split to a new topic: [Picking Random Item in a Multi-dimensional Array](https://forum.kirupa.com/t/picking-random-item-in-a-multi-dimensional-array/640802)
---
### Author:  [@kirupa](https://forum.kirupa.com/u/kirupa)
#### Post date: [October 10, 2019, 8:23pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/33 "2019-10-10T20:23:15Z")
@v_vendetta - I moved your question to the following thread, for it isn’t related to _ **event handling and multiple events** _: [Picking Random Item in a Multi-dimensional Array](http://forum.kirupa.com/t/picking-random-item-in-a-multi-dimensional-array/640802)
🙂
[Previous page](https://forum.kirupa.com/t/handling-events-for-many-elements/352433.md?page=1)