# 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:** 20\
**Page:** 1

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [November 23, 2014, 7:09am UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/1 "2014-11-23T07:09:52Z")

</div>

by [kirupa](http://www.kirupa.com/me/index.htm) | 2 July 2014

In its most basic case, an event listener deals with events fired from a single element:

* * *
This is a companion discussion topic for the original entry at [http://www.kirupa.com/html5/handling\_events\_for\_many\_elements.htm](http://www.kirupa.com/html5/handling_events_for_many_elements.htm)

---

<div class="post-metadata">

**Author:** ![joe\_hoeller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joe_hoeller/32/7381_2.png) [@joe\_hoeller](https://forum.kirupa.com/u/joe_hoeller)\
**Post date:** [September 23, 2015, 1:55pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/2 "2015-09-23T13:55:53Z")

</div>

How would i make multiple click events to increment, de-increment and push that value into the div?  
See Fiddle: [https://jsfiddle.net/JOEHOELLER/oorcywyj/15/](https://jsfiddle.net/JOEHOELLER/oorcywyj/15/)

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [September 23, 2015, 6:31pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/3 "2015-09-23T18:31:27Z")

</div>

I only took a quick glance, but one easy way would be to pass in e.target to the **increment** and **decrement** functions. Inside those functions, because you now know exactly which element triggered the incrementing or decrementing, you will know that adjusting the value will end up updating the correct element.

Does my explanation help? If not, I can take some time later this evening and help provide you with a more detailed response.

😄

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 23, 2015, 6:39pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/4 "2015-09-23T18:39:46Z")

</div>

Its a little tricky the way you have it because they’re all in the same parent and its hard to tell what number matches which buttons. You can simplify this more by putting the numbers and the buttons in they’re own wrapping div, then from the buttons (e.target) you can walk up to the parent (wrapper) and from that find the number inside. Once you have the right num you can start manipulating its value (which you would want to handle separately for each rather than using a single variable for all)

---

<div class="post-metadata">

**Author:** ![joe\_hoeller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joe_hoeller/32/7381_2.png) [@joe\_hoeller](https://forum.kirupa.com/u/joe_hoeller)\
**Post date:** [September 23, 2015, 7:21pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/5 "2015-09-23T19:21:56Z")

</div>

No I am not sure I follow you

---

<div class="post-metadata">

**Author:** ![joe\_hoeller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joe_hoeller/32/7381_2.png) [@joe\_hoeller](https://forum.kirupa.com/u/joe_hoeller)\
**Post date:** [September 23, 2015, 7:57pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/6 "2015-09-23T19:57:55Z")

</div>

I updated the script here; not sure how to massage it into the event delegation script thats commented out below: [https://jsfiddle.net/JOEHOELLER/n7ukn6av/4/](https://jsfiddle.net/JOEHOELLER/n7ukn6av/4/)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 23, 2015, 8:35pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/7 "2015-09-23T20:35:38Z")

</div>

Here is a working (I’m guessing this is what you want):

[https://jsfiddle.net/n7ukn6av/5/](https://jsfiddle.net/n7ukn6av/5/)

If anything is confusing, just ask 🙂

---

<div class="post-metadata">

**Author:** ![joe\_hoeller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joe_hoeller/32/7381_2.png) [@joe\_hoeller](https://forum.kirupa.com/u/joe_hoeller)\
**Post date:** [September 24, 2015, 11:38am UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/8 "2015-09-24T11:38:13Z")

</div>

That sir, is some crazy lean JavaScript. The frameworks seem to bulk things up a bit and not allow you to understand core JS.

Kudos to you. I shall study the code, commit to memory and refactor OO (prototype) style so I can re-use it over & over.

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 24, 2015, 2:08pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/9 "2015-09-24T14:08:00Z")

</div>

I would have explained it more yesterday, but I had a meeting. I included some comments to help explain things more clearly:

[https://jsfiddle.net/n7ukn6av/6/](https://jsfiddle.net/n7ukn6av/6/)

---

<div class="post-metadata">

**Author:** ![joe\_hoeller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joe_hoeller/32/7381_2.png) [@joe\_hoeller](https://forum.kirupa.com/u/joe_hoeller)\
**Post date:** [September 24, 2015, 2:33pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/10 "2015-09-24T14:33:10Z")

</div>

Thank you so much, I am going to attempt to add in the ability to accept min and max values.

---

<div class="post-metadata">

**Author:** ![joe\_hoeller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joe_hoeller/32/7381_2.png) [@joe\_hoeller](https://forum.kirupa.com/u/joe_hoeller)\
**Post date:** [September 28, 2015, 4:39pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/11 "2015-09-28T16:39:19Z")

</div>

**function updateFrom(_button)_ {** \<\<\< so button is just a name for any argument that could be there that targets the button you select?

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 28, 2015, 4:45pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/12 "2015-09-28T16:45:56Z")

</div>

yup. Its a custom function I made up on my own and I picked the name `button` though I could have called it anything else as well. The value of `button` comes from the click handler. But because this function is defined this way, we could call it from anywhere, not just a click handler, as long as we had a reference to the button we wanted to calculate an update from.

---

<div class="post-metadata">

**Author:** ![joe\_hoeller](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/joe_hoeller/32/7381_2.png) [@joe\_hoeller](https://forum.kirupa.com/u/joe_hoeller)\
**Post date:** [September 28, 2015, 4:49pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/13 "2015-09-28T16:49:03Z")

</div>

so its the same as saying:

“\< div onclick=“cliker(x)”\>”

function clicker(x) {  
//event listener targeting THIS elem  
}

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 28, 2015, 5:03pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/14 "2015-09-28T17:03:50Z")

</div>

Not _exactly_ the same. clicker in your example is still being treated as an event handler - something specific to events, accepting a single argument that is from an event. It doesn’t work well in contexts other than being an event handler. updateFrom is more generic. It can be called anywhere at any time and doesn’t rely on an event. This makes it more versatile than any other, ordinary event handler.

That said, in onclick attributes on html, you’re just running arbitrary code that is wrapped in an event handler. So technically clicker doesn’t have to be an event handler. It can ignore the event argument and just be a generic function too. But most of the time when you’re writing attribute code like that, its in the form of a handler specific to that attribute (e.g. a click handler for the onclick event)

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 28, 2015, 5:14pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/15 "2015-09-28T17:14:34Z")

</div>

By the way, something interesting you can do is write an attribute handler and then check the handler property of that element in javascript. For example:

```auto
<a onclick="alert(this.nodeName)">Click Me</a>

```

```javascript
var a = document.getElementsByTagName('a')[0];
console.log(a.onclick); // =>
/*
function onclick(event) {
  alert(this.nodeName)
}
*/

```

Here you can see the wrapper handler that goes around the code that was put in the onclick attribute. Its a single-argument function with a parameter named event. That function is also called in the context of that element so `this` in that call is the element itself.

---

<div class="post-metadata">

**Author:** ![grimdeath](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/grimdeath/32/7124_2.png) [@grimdeath](https://forum.kirupa.com/u/grimdeath)\
**Post date:** [September 30, 2015, 2:56pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/16 "2015-09-30T14:56:45Z")

</div>

Nice to see you joined kforums @joe_hoeller, I remember when I would look @senocular code back in the 90s and think how stupid I was. Nothing has changed LOL

---

<div class="post-metadata">

**Author:** ![senocular](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/senocular/32/7217_2.png) [@senocular](https://forum.kirupa.com/u/senocular)\
**Post date:** [September 30, 2015, 5:08pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/17 "2015-09-30T17:08:28Z")

</div>

@grimdeath - one of my most favoritest people! :love: :love: :love:

---

<div class="post-metadata">

**Author:** ![grimdeath](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/grimdeath/32/7124_2.png) [@grimdeath](https://forum.kirupa.com/u/grimdeath)\
**Post date:** [September 30, 2015, 8:05pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/18 "2015-09-30T20:05:31Z")

</div>

The feelings mutual master :yoda:

---

<div class="post-metadata">

**Author:** ![kirupa](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/kirupa/32/11616_2.png) [@kirupa](https://forum.kirupa.com/u/kirupa)\
**Post date:** [October 2, 2015, 1:52am UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/19 "2015-10-02T01:52:19Z")

</div>

Group hug!!! 🍔

---

<div class="post-metadata">

**Author:** ![TallGlassOfMike](https://yyz1.discourse-cdn.com/flex011/user_avatar/forum.kirupa.com/tallglassofmike/32/9044_2.png) [@TallGlassOfMike](https://forum.kirupa.com/u/TallGlassOfMike)\
**Post date:** [March 30, 2018, 3:43pm UTC](https://forum.kirupa.com/t/handling-events-for-many-elements/352433/20 "2018-03-30T15:43:04Z")

</div>

I’m still confused. What if I have different buttons/links with different parents throughout my entire site that each have a different HTML class/id, but all use the same event listener. Would this code still work?

Example:  
var button1 = document.querySelector(’#parent1 .button’).addEventListener…;  
var button2 = document.querySelector(’#parent2 .button’).addEventListener…;  
var button3 = document.querySelector(’#parent3 .button’).addEventListener…;

I don’t have access to modifying the HTML either.

[Next page](https://forum.kirupa.com/t/handling-events-for-many-elements/352433.md?page=2)