Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Shortest way of attaching multiple DOM elements to one event handler using Jquery?

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);
like image 632
Camsoft Avatar asked Apr 20 '10 12:04

Camsoft


People also ask

How many ways can you attach an event handler to a DOM element?

There are three ways to assign an event handler: HTML event handler attribute, element's event handler property, and addEventListener() .

Can multiple event handlers be added to a single element?

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.

Which of the following methods helps us to attach one or more event handlers to a selected element?

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.

How do I add multiple elements to an event listener?

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.


1 Answers

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.

like image 154
Nick Craver Avatar answered Sep 29 '22 12:09

Nick Craver