Bind or Closure Event Listeners

Benchmark created on November 21, 2023

Description

Preparation HTML

<div id="foo"></div>

Setup

class Test {
	constructor(div) {
		this.div = div;
	}
	
	addBindListener() {
		this.eventBind = this.testMethod.bind(this);
		this.div.addEventListener('test', this.eventBind);
	}
	
	addClosureListener() {
		this.eventClosure = () => this.testMethod();
		this.div.addEventListener('test', this.eventClosure);
	}
	
	testMethod() {
		this.div.innerHTML = 'Test';
	}
	
	destroy() {
		if (this.eventBind) {
		this.div.removeEventListener('test', this.eventBind);
		this.eventBind = null;
		}
		
		if (this.eventClosure) {
			this.div.removeEventListener('test', this.eventClosure);
			this.eventClosure = null;
		}
	}
}

Teardown

if (window.test) {
	window.test.destroy();
}

Test runner

window.test = new Test(document.querySelector('#foo'));

test.addBindListener();

window.test = new Test(document.querySelector('#foo'));

test.addClosureListener();

Revisions

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

• Revision 1: published on November 21, 2023