Benchmark: delete 4 - MeasureThat.net

HTML Preparation code:

<div id="testElement">Test</div>
<div id="testElement2">Test 2</div>

Script Preparation code:

var API = API || {};
API.addEvent=function(elem,eventType,fn){
	if(elem.addEventListener) elem.addEventListener(eventType,fn,false);
	else if(elem.attachEvent) elem.attachEvent('on'+eventType,fn);
	else elem['on'+eventType]=fn;
};
API.removeEvent=function(elem,eventType,fn){
	if(elem.removeEventListener) elem.removeEventListener(eventType,fn,false);
	else if(elem.detachEvent) elem.detachEvent('on'+eventType,fn);
	else elem['on'+eventType]=null;
};

API.addEventMULTI=function(o,t,f){
	if(!o.length){
		if(o.addEventListener) o.addEventListener(t,f,false);
		else if(o.attachEvent) o.attachEvent('on'+t,f);
		else o['on'+t]=f;
	}else{
		for(var i=0,len=o.length;i<len;i++){
			if(o[i].addEventListener) o[i].addEventListener(t,f,false);
			else if(o[i].attachEvent) o[i].attachEvent('on'+t,f);
			else o[i]['on'+t]=f;
		}
	}
};
API.removeEventMULTI=function(o,t,f){
	if(!o.length){
		if(o.removeEventListener) o.removeEventListener(t,f,false);
		else if(o.detachEvent) o.detachEvent('on'+t,f);
		else o['on'+t]=null;
	}else{
		for(var i=0,len=o.length;i<len;i++){
			if(o[i].removeEventListener) o[i].removeEventListener(t,f,false);
			else if(o[i].detachEvent) o[i].detachEvent('on'+t,f);
			else o[i]['on'+t]=null;
		}
	}
};

var elem = document.getElementById('testElement'), elem2 = document.getElementById('testElement2'),
    elements = document.getElementsByTagName('div');

function test(elem){
	elem.innerHTML = "Hello World!";
}

Tests:

addEventListener/removeEventListener
elem.addEventListener('click',test,false); elem.removeEventListener('click',test,false); elem2.addEventListener('click',test,false); elem2.removeEventListener('click',test,false);
function addEvent/function removeEvent
API.addEvent(elem,'click',test); API.removeEvent(elem,'click',test); API.addEvent(elem2,'click',test); API.removeEvent(elem2,'click',test);
function addEvent/function removeEvent ver. MULTI
API.addEventMULTI(elements,'click',test); API.removeEventMULTI(elements,'click',test);
jQuery
$('#testElement').on('click',test); $('#testElement').off('click',test); $('#testElement2').on('click',test); $('#testElement2').off('click',test);

Rendered benchmark preparation results:

Suite status: <idle, ready to run>

Previous results

Test case name	Result
addEventListener/removeEventListener
function addEvent/function removeEvent
function addEvent/function removeEvent ver. MULTI
jQuery

Fastest: N/A

Slowest: N/A

ⓘ Get performance results from real users on your website with Request Metrics.

Website Performance Monitoring by Request Metrics

Latest run results:

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

User agent: Mozilla/5.0 (Windows NT 5.1; rv:52.0) Gecko/20100101 Firefox/52.0

Browser/OS: Firefox 52 on Windows XP

View result in a separate tab

Test name	Executions per second
addEventListener/removeEventListener	88288.1 Ops/sec
function addEvent/function removeEvent	88420.1 Ops/sec
function addEvent/function removeEvent ver. MULTI	666.4 Ops/sec
jQuery	3440.6 Ops/sec

delete 4 (version: 5)

delete 4

Comparing performance of: addEventListener/removeEventListener vs function addEvent/function removeEvent vs function addEvent/function removeEvent ver. MULTI vs jQuery

Created: 7 years ago by: Registered User

Jump to the latest result

addEventListener/removeEventListener

function addEvent/function removeEvent

function addEvent/function removeEvent ver. MULTI

jQuery

Suite status: <idle, ready to run>

Experimental features:

Fastest: N/A

Slowest: N/A