Dev Stack Source

Answer : There is no way to do it without looping through every element. You could, of course, write a function to do it for you. function addEventListenerList(list, event, fn) { for (var i = 0, len = list.length; i < len; i++) { list[i].addEventListener(event, fn, false); } } var ar_coins = document.getElementsByClassName('coins'); addEventListenerList(ar_coins, 'dragstart', handleDragStart); or a more specialized version: function addEventListenerByClass(className, event, fn) { var list = document.getElementsByClassName(className); for (var i = 0, len = list.length; i < len; i++) { list[i].addEventListener(event, fn, false); } } addEventListenerByClass('coins', 'dragstart', handleDragStart); And, though you didn't ask about jQuery, this is the kind of stuff that jQuery is particularly good at: $('.coins').on('dragstart', handleDragStart); The best I could come up with was ...

Answer : Both are correct, but none of them are "best" per se, and there may be a reason the developer chose to use both approaches. Event Listeners (addEventListener and IE's attachEvent) Earlier versions of Internet Explorer implement javascript differently from pretty much every other browser. With versions less than 9, you use the attachEvent [doc] method, like this: element.attachEvent('onclick', function() { /* do stuff here*/ }); In most other browsers (including IE 9 and above), you use addEventListener [doc], like this: element.addEventListener('click', function() { /* do stuff here*/ }, false); Using this approach (DOM Level 2 events), you can attach a theoretically unlimited number of events to any single element. The only practical limitation is client-side memory and other performance concerns, which are different for each browser. The examples above represent using an anonymous function[doc]. You can also add an event liste...