Event Delegation Distance (v2)

Revision 2 of this benchmark created on February 20, 2015

Description

Preparation HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

<section id="main">
<div class="content">
<div class="container">
<div></div>
<div></div>
<ul id="menu">
  <li>Item 1</li>
  <li>Item 2</li>
  <li>Item 3</li>
  <li>Item 4</li>
  <li>Item 5</li>
</ul>
</div>
</div>
</section>

Setup

var element = document.getElementById('menu').getElementsByTagName('li')[2];

Test runner

document.getElementById('menu').addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'LI') {
    // Event triggered
  }
});

element.click();

document.getElementById('main').addEventListener('click', function(event) {
  if (event.target && event.target.nodeName === 'LI') {
    // Event triggered
  }
});

element.click();

lis = document.getElementsByTagName('li');
var i = 0;
for (; i < 5; i++) {
  lis[i].addEventListener('click', function(event) {});
}
element.click();

Revisions

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

• Revision 1: published by Taylor Lovett on September 16, 2014
• Revision 2: published on February 20, 2015