Javascript addeventlistener kullanımı

Sezai AlkanFrontend Developer

JavaScript #javascript #js #addeventlistener

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.