add event listeners to elements with class (v2)

Revision 2 of this benchmark created by Kristoffer Snabb on October 31, 2013

Preparation HTML

<div class="clickable"></div>
<div class="clickable"></div>
<div class="clickable"></div>
<div class="clickable"></div>
<div class="clickable"></div>

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.2/underscore-min.js"></script>

Setup

var cachedElems = document.getElementsByClassName("clickable");

Test runner

Array.prototype.slice.call(
    document.getElementsByClassName("clickable")
).forEach(
    function(el) {
        el.addEventListener(
            "click", 
            function(evt) {
                console.log(evt)
        })
})

$(".clickable").on("click", function(evt) {console.log(evt);})

var i,
    elems = document.getElementsByClassName("clickable");

for(i = 0; i < elems.length; i++) {
    elems[i].addEventListener("click", function(evt) {console.log(evt);})
}

var len = cachedElems.length;
for(i = 0; i < len; i++) {
    cachedElems[i].addEventListener("click", function(evt) {console.log(evt);})
}

Revisions

You can edit these tests or add more tests to this page by appending /edit to the URL.

• Revision 1: published by Kristoffer Snabb on October 30, 2013
• Revision 2: published by Kristoffer Snabb on October 31, 2013
• Revision 3: published by Nicky on April 9, 2014
• Revision 4: published by Nicky on April 9, 2014