I need to attach a single event handler to multiple DOM elements using jQuery. I'm currently achieving this using jQuery's each() method. See below:
$([elm1, elm2, elm3]).each(function() {
this.click(eventHandler);
});
I was wondering if there is a way to do this without using the each method and closure. I thought I would be able to do something like:
$(elm1, elm2, elm3).click(eventHandler);
This kind of statement works using Prototype.js but not in jQuery.The reason I ask the question is because after using both Prototype.js and jQuery I have found that jQuery requires simpler statements to achieve the same tasks in almost every area so I assume there must be a better way of doing this?
UPDATE
After some debugging it turns out that my original attempt to do this using:
$([elm1, elm2, elm3]).click(eventHandler);
Was failing becuase the variables elm1, elm2 and elm3 where created using jQuery's $ function. So the problem has changed and is why does the following not work:
var elm1 = $('#elm1');
var elm2 = $('#elm2');
var elm3 = $('#elm3');
$([elm1, elm2, elm3]).click(eventHandler);
yet using DOM the following does:
var elm1 = document.getElementById('elm1');
var elm2 = document.getElementById('elm2');
var elm3 = document.getElementById('elm3');
$([elm1, elm2, elm3]).click(eventHandler);
There are three ways to assign an event handler: HTML event handler attribute, element's event handler property, and addEventListener() .
You can add many event handlers to one element. You can add many event handlers of the same type to one element, i.e two "click" events. You can add event listeners to any DOM object not only HTML elements.
The mouseenter() Method The jQuery mouseenter() method attach an event handler function to the selected elements that is executed when the mouse enters an element.
Adding event listener to multiple elements To add the event listener to the multiple elements, first we need to access the multiple elements with the same class name or id using document. querySelectorAll() method then we need to loop through each element using the forEach() method and add an event listener to it.
You can do this as short as possible like this:
$([elm1, elm2, elm3]).click(eventHandler);
When you leave off the brackets for the array, you're calling a different overload of jQuery()
, with the brackets you're passing 1 argument as an array, so you're calling the jQuery(elementArray)
constructor.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With