by kirupa | 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

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 …

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: <a onclick="alert(this.nodeName)">Click Me</a> var a = document.getElementsByTagName('a')[0]; console.log(a.onclick); // => /* function onclic…

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

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

The feelings mutual master :yoda:

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……

@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 …

Excellent post, thanks! How would this be done for contenteditable div tags? It looks like this: <div id="theParent" contenteditable="true"></div> <div class="el"...></div> <div class="el"...></div> ... With JavaScript: var e = document.querySelector("#theParent"); e.addEventListener(…

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: <body> <div id="theParent" contenteditable="true"> <div id="foo" class="el">A</div> <div id="bar" class="el">B</div> </div> <script> …

Handling Events for Many Elements

programming

Topic		Replies	Views
Handling events for multiple elements web dev	3	531	December 14, 2020
Changing multiple elements values with just 2 buttons programming	6	433	April 18, 2022
Lost in Multiple Event Handling Purgatory programming	10	571	November 10, 2018
Tutorial: Handling Events for Many Elements web dev	0	198	June 4, 2012
Handling events for many elements tutorial: is this always the best approach? web dev	4	485	June 11, 2022

Handling Events for Many Elements

Follow:

Popular

Loose Ends

Handling Events for Many Elements

Related topics

Follow:

Popular

Loose Ends