Benchmark: addEvent - MeasureThat.net

HTML Preparation code:

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="clickme">
  <div id="innerel">Click Me
    <div id="innerel2"><span id="span2">Click Me 2</span>
      <div id="jel">Click Me 3</div>
    </div>
   </div>
</div>

Script Preparation code:

element = document.getElementById("clickme");
innerel = document.getElementById("innerel");
innerel2 = document.getElementById("innerel2");
innerel3 = document.getElementById("jel");
jelem = $("#clickme");
jel = $("#jel");

uidc = 0;
function getUid (el) {
	var id = el.id;
	if(!id) {
  	id = "uid_"+ (++uidc);
  	el.id = id;
  }
	return id;
}
var ev = {
	ones: {},
	checkTarget: function (eventSelector, target, selectortype) {
    // we want to know if target matches eventSelector, if not then
    // if target is child of eventSelector
    // selectortype => id no #, class no dot/no space, special

    var selectorEl,
        targetId = getUid (target);
    if(selectortype == "id") {
      if(eventSelector == targetId) {
        return true;
      } else {
        var eventEl = document.getElementById(eventSelector);
        //This check if target is eventEl or if is its child
        if (eventEl.contains(target)) return true;
      }
    } else if(selectortype == "class") {
      //check if target parents contains class or queryselector
      if(target.classList.contains(eventSelector)) {
        return true;
      } else {
        if(document.querySelector("."+eventSelector+" #"+targetId)) {
          return true;
        }
      }
    } else {
        if(document.querySelector(eventSelector+" #"+targetId)) {
          return true;
        }
    }
    return false;
  },
  on: function (type, el, cb, once, eventEl, stop) {
    var capture = eventEl?true:false;
    if(!ev.ones[type]) ev.ones[type] = {};
    if(!ev.ones[type][el.id]) {
			ev.ones[type][el.id] = ev.eventHandler.bind(null, cb, eventEl, once, stop, capture);
      el.addEventListener(type, ev.ones[type][el.id], capture);
    }
  },
  eventHandler: function (cb, eventEl, once, stop, capture, e) {
  	//console.log(e);
  	if(once) {
    	e.currentTarget.removeEventListener(e.type, ev.ones[e.type][e.currentTarget.id], capture);
      ev.ones[e.type][e.currentTarget.id] = false;
    }
    if(capture) {
      if (ev.checkTarget(eventEl.id, e.target, "id")) {
        if(stop) e.stopImmediatePropagation();
        cb();
      } else {
        console.log("check not target 1", e.target.id);
      }
    } else {
      if(stop) e.stopImmediatePropagation();
      cb();
    }
  },
  on2: function (type, el, cb, once, eventEl, stop) {
  	if(!ev.ones[type]) ev.ones[type] = {};
    var capture = eventEl?true:false;
    var eventHandler = function (e) {
    	if(once) {
      	e.currentTarget.removeEventListener(e.type, ev.ones[type][el.id], capture);
      	ev.ones[type][el.id] = false;
      }
      if(eventEl) {
        if (ev.checkTarget(eventEl.id, e.target, "id")) {
          if(stop) e.stopImmediatePropagation();
          cb();
        } else {
          console.log("check not target 2", e.target.id);
        }
      } else {
        if(stop) e.stopImmediatePropagation();
        cb();
      }
    }
		//
    if(!ev.ones[type][el.id]) {
    	ev.ones[type][el.id] = eventHandler;
      el.addEventListener(type, ev.ones[type][el.id], capture);
    }
  }
}

//


function cb1 (param) {
	console.log(param);
}
function cb2 (param, e) {
  console.log(param, e.target);
}
function cb3 (param, e) {
	console.log(param);
}
var cbvar1 = cb1.bind(null, "bala 1");
var cbvar2 = cb2.bind(null, "bala 2");
var cbvar3 = cb3.bind(null, "bala 3");
var event = new Event("click");

Tests:

object function
ev.on ("click", element, cbvar1, false, innerel, false);
nested function
ev.on2 ("click", element, cbvar1, false, innerel, false);
jqeury
jelem.on("click", "#innerel", cbvar1);
object function inner elem
ev.on ("click", element, cbvar3, false, innerel3, false);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
object function
nested function
jqeury
object function inner elem

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):

LLMs can make mistakes. Check important info.

It appears that you are sharing code snippets and benchmark results from an event handling system, specifically designed to test the performance of various events handling methods.

**Code Snippet Analysis**

The provided code snippet is written in JavaScript and uses jQuery to bind events to elements. The main function `ev.on` is used to attach event listeners to DOM elements, and another function `ev.on2` seems to be an older version of this function. There are also some inline functions `cb1`, `cb2`, and `cb3` that will be executed when the corresponding events are triggered.

**Benchmark Results**

The benchmark results show the performance of different event handling methods:

* `object function`: This method seems to be the fastest, with an average execution rate of 1255519.75 executions per second.
* `nested function`: The nested function method is slower than the object function, with an average execution rate of 1136238.25 executions per second.
* `jqeury` (note: it should probably be "jQuery"): This method has the slowest execution rate, averaging only 561315.875 executions per second.

**Suggestions**

Based on these results, I would suggest using the `object function` method for event handling in your application, as it appears to be the fastest and most efficient way to handle events.

Additionally, consider exploring more modern JavaScript features and libraries, such as `addEventListener()` or `EventTarget.addEventListener()`, which may provide better performance and more flexibility than older methods like `on()`.

**Additional Observations**

It's worth noting that the benchmark results are for Chrome 57 on Windows, and it would be interesting to see how these results compare across different browsers, operating systems, and devices.

Latest run results:

Run details: (Test run date: 7 years ago)

User agent: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/57.0.2987.133 Safari/537.36

Browser/OS: Chrome 57 on Windows

View result in a separate tab

Test name	Executions per second
object function	1136238.2 Ops/sec
nested function	1050987.0 Ops/sec
jqeury	561315.9 Ops/sec
object function inner elem	1255519.8 Ops/sec

Related benchmarks:

addEvent (version: 14)

Comparing performance of: object function vs nested function vs jqeury vs object function inner elem

Created: 7 years ago by: Registered User

Jump to the latest result

object function

nested function

jqeury

object function inner elem

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A

Autogenerated LLM Summary (model llama3.2:3b, generated 26 days ago):