Javascript addEventListener Kullanımı

addEventListener nesnelere olay dinleyici ekler, eklenen olay tetiklendiğinde çalışması beklenen fonksiyonu çalıştırır. Bu metodu kullanıcı etkileşimlerinden sonra yapacağımız işlemler için kullanırız.
addEventListener metoduna ihtiyaç duymamızın sebebi javascriptte program çalıştığı anda yorumlanır daha kullanıcı etkileşime girmeden yapılacak işlemler yapılır. Mesela kullanıcı butona tıkladıktan sonra butonun renk değiştirmesini istiyoruz. Butona olay dinleyici eklenmezse program çalışır çalışmaz butonun rengi değişir, olay dinleyici eklenirse butonun rengi tıklama olayı gerçekleştikten sonra değişir.

Sözdizimi:

element.addEventListener(event, function, useCapture);

event: Gerçekleşmesi beklenen olay türünü belirlediğimiz parametredir(click, keydown,resize vb.).
function: Olay gerçekleştikten sonra çalışacak fonksiyonun adı.
useCapture: İç içe nesnelerde olay yayılım türünün kabarcıklanma aşamasında mı  yoksa yakalama aşamasında mı yürütüleceğini belirlediğimiz parametredir. opsiyoneldir. Boolean değer alır.

let buttonEl = document.querySelector("button");
function clickButton() {
 alert("Butona tıkladın");
}
buttonEl.addEventListener("click", clickButton);

Bu kodda addEventListener öncelikle tıklama olayını gerçekleştirmemizi bekledi, tıklama yaptıktan sonra clickButton fonksiyonunu çalıştırdı.

Bu kodda klavye olayını dinlemesini istedik, klavyeden tuşa basıp parmağımızı çektiğimiz anda yazılan rakamın tek mi çift mi olduğunu yazmasını istedik ve bunu anonim fonksiyon ile yaptık.

Nesneye Birden Fazla addEventListener Ekleme

addEventListener ile bir nesneye birden fazla olay dinleyici ekleyebiliriz.

UseCapture

İç içe ve her birine addEventListener eklenmiş nesnelerde bir nesneye tıklandığında diğer nesnelerde çalışır. Bu parametre nesnelerin olay yayılım türünün içten dışa doğru mu yoksa tam tersi şekilde mi çalışacağıyla ilgilidir. false varsayılan değeridir, içten dışa doğru çalışır, bu yayılım türüne bubbling(kabarcıklanma) denir. true dıştan içe doğru çalışır, bu yayılım türüne capturing(yakalama) denir.

Kodda gördüğünüz gibi önce sarı renkteki kutu3 yani içteki kutu çalıştı, ardından turuncu renkteki kutu2 ve en son dıştaki kırmızı renkteki kutu1 çalıştı.

Bu sefer olay yayılım türünü yakalama aşamasında kullandık. Kutuların hepsine tek tek işlem yapmak zorunda kalmamak için for döngüsüne aldık. çalıştığında bu sefer en dıştaki kırmızı renkli kutu1'den en içteki sarı kutu3'e doğru çalıştı.