Run results for: addEvent

Run details:

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: Chrome 57

Operating system: Windows

Device Platform: Other

Date tested: 7 years ago

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

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);

object function

nested function

jqeury

object function inner elem