Передача параметров в addEventListener

Часто нам хочется передать параметры в функцию, привязанную к элементу через addEventListener. Однако, в addEventListener нет встроенной возможности для этого. В уроке разбираются способы передачи параметров и связанные с этим проблемы.

Исходники кода

<input id="input">

var input1 = document.querySelector('#input1');
input1.addEventListener('blur', func('!'));

var input2 = document.querySelector('#input2');
input2.addEventListener('blur', func('!!'));

function func(message) {
	alert(this.value + message);
}

<input id="input">

var input = document.querySelector('#input');
input.addEventListener('blur', function() {
	func('!', this);
});

function func(message, self) {
	alert(message);
	console.log(self.value);
}

<input id="input">

var input = document.querySelector('#input');
input.addEventListener('blur', func('!'));

function func(message) {
	return function() {
		alert(message);
		console.log(this.value);
	}
}

<input id="input">

var input = document.querySelector('#input');
input.addEventListener('blur', func.bind(input, '!'));

function func(message) {
	alert(message);
	console.log(this.value);
}