addEventListener Metodu

addEventListener metodu, bir öğeye olay işleyicileri atamanıza olanak tanır. Onun sayesinde, örneğin, bir düğmeye tıklandığında ne yapılacağını veya bir metin kutusuna yazı yazılırken ne yapılacağını belirtebilirsiniz. İlk parametrede iletilen olayın türünü, ikincisinde ise ilk parametrede belirtilen olaydan sonra tetiklenecek işlevi belirtiriz. Üçüncü isteğe bağlı parametrede nesnenin özelliklerini (once, capture, passive) veya useCapture parametresini iletiriz.

Sözdizimi

öğe.addEventListener('olay türü', işlev, [nesne özellikleri]);
veya
öğe.addEventListener('olay türü', işlev, [useCapture]);

Örnek

Bir düğmeye tıklandığında bir mesajın görüntülenmesini sağlayalım:

<input type="button" id="button" value="bana tıkla">

let button = document.querySelector('#button');

button.addEventListener('click', function() {
	alert('mesaj');
});

Örnek

Bir input odağını kaybettiğinde, bu input'un metniyle bir mesajın görüntülenmesi için kodu yazalım:

<input id="input" value="metin">

let input = document.querySelector('#input');

input.addEventListener('blur', function() {
	alert(this.value);
});

Örnek

Bir düğmeye tıklandığında mesajın konsola sadece bir kez yazdırılmasını sağlayalım. Bunun için ikinci parametreyi kullanacağız:

<input type="button" id="button" value="bana tıkla">

let button = document.querySelector('#button');

button.addEventListener('click',
	function() {
		console.log('mesaj');
	},
	{
		once: true
	}
);

Örnek

passive parametresi, olay işlenirken event.preventDefault metodunun çağrılmasını yasaklar. Önceki örneğe event.preventDefault metodunu uygulayalım ve ayrıca passive parametresinde true değerini belirtelim:

<input type="button" id="button" value="bana tıkla">

let button = document.querySelector('#button');

button.addEventListener('click',
	function(event) {
		event.preventDefault();
		console.log('Mesaj yok');
	},
	{
		passive: true
	}
);

Kod çalıştıktan sonra aşağıdaki mesajları göreceğiz:

'Mesaj yok';
'Unable to preventDefault inside passive event listener invocation.'

Örnek

useCapture parametresi true değerinde olayların iç öğeden dış öğeye doğru kabarmasını (bubbling), false değerinde ise dış öğeden iç öğeye doğru kabarmasını gösterir. useCapture parametresi iletildiğinde adı atlanır ve sadece true veya false yazılır. Üst ve alt öğelere tıklandığında olayların onlarda nasıl kabardığını görelim:

<div id="parent">Üst
	<p id="child">Alt</p>
</div>

#parent{
	width: 60px;
	padding: 10px;
	border: 1px solid red;
	text-align: center;
}
#child{
	width: 60px;
	marging-right: 40px;
	border: 1px solid blue;
	text-align: center;
}

let parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
	() => alert('üst'), 
	true
);
child.addEventListener('click',
	() => alert('alt'), 
	true
);

Ayrıca Bakınız

removeEventListener metodu,
bir öğeden olayın bağlantısını kaldırır