Javascript addeventlistener kullanımı

Javascript

addeventlistener 

kullanımı bir nesne üzerindeki olayları dinlemektedir. Bu olaylar nesneye tıklama, üzerine gel, üzerinden gitme vb. gibi olaylardır.

Kullanımı :

element.addEventListener("click",function(){})

addEventListener 

methodu kullanımı ile html elemanları içerisinde tek tek seçme işlemi sağlamadan sınıflar ile tüm elemanları seçebilir veya bir elemanı seçerek html elemanı üzerindeki durumları dinleyebilmekteyiz.

<a class="control" href="https://www.kodhocasi.com">Kod Hocası</a>

document.querySelector(".control").addEventListener("click",function(event){
	event.preventDefault();
	alert("Farklı bir siteye gidiyorsun");
});

Yukarıdaki örnek üzerinde bir

a 

html elemanına tıklama durumunda belirtilen adrese gitmemesi için fonksiyon içerisinde öncelikle

preventDefault 

methodu ile iptal etmekteyiz.

Daha sonra kullanıcıya uyarı pencere içerisinde Farklı bir siteye gidiyorsun diye uyarı vermekteyiz.

preventDefault 

methodu bir nesne üzerindeki olayların doğal akışını, özelliklerini engellemektedir.

addEventListener 

methodu ile html elemanları üzerinde

mouseout

,

mouseover

,

mousemove

,

mousedown

,

load 

vb. gibi kullanımlarda sağlayabilmekteyiz.