JavaScript addEventListener yöntemi, bir kullanıcı bir düğmeyi tıkladığında olduğu gibi, belirli bir olay gerçekleştiğinde çağrılacak işlevleri ayarlamanıza olanak tanır. Olaylar, kullanıcı veya tarayıcı bir sayfayı manipüle ettiğinde gerçekleşen eylemlerdir. Örneğin, tarayıcı bir belgeyi yüklemeyi bitirdiğinde bir load olayı, bir kullanıcı bir sayfadaki bir düğmeyi tıklarsa, bir click olayı gerçekleşmiş olur.
JavaScript, addEventListener yöntemi bir olay işleyicisi sağlar. Bu işleyici, olayları izlemek istediğiniz belirli bir HTML öğesine eklenebilir.
HTML DOM olayları listesine buradan ulaşabilirsiniz.
Kullanımı:
element.addEventListener(olay, fonksiyon, kabarcıklanma)
Olay: Olayın adını belirten bir tür (load, click, mouseover, keypress gibi)
Fonksiyon: Olay algılandığında çalıştırılacak işlevi belirtir
Peki addEventListener 3. parametre nedir?
Kabarcıklanma: Olayı yakalama esnasında isteğe bağlı bir Boolean bir değer alır (true veya false), varsayılan olarak false değerini almaktadır. Burada vereceğiniz değer iç içe geçmiş elementlerde dışa doğru ya da içe doğru kabarcıklanma sağlar. Bu değer hangi olayın ilk olarak yürütüleceğini belirlemektedir.
Örneğin, aşağıdaki resimde olduğu gibi iç içe geçmiş elementlerimiz olduğunu ve bu elementlerin herbirine “click” eventi atadığımızı düşünelim. Biz addEventListener 3. parametre olarak “false” değeri atadığımızda en içteki mavi kutuya yani 3.kutuya tıkladığımızda önce mavi kutu > sonra gri > en son yeşil kutu eventi çalışacaktır. Şayet değeri “true” olarak atarsak, bu sefer event sıralaması tam tersi olacak şekilde içeriden dışarıya doğru değil, dışarıdan içeri doğru çalıştıracaktır. Tabi bu akış tıkladığınız kutudan başlayacak şekilde olmaktadır.
Peki biz herhangi bir aşamada bu kabarcıklanma olayını durdurmak istersek ne yapmalıyız? Bu durumda yardımımıza event.stopPropagation özelliği koşuyor. Bu değeri atadığımız işlev de olay akışı duracaktır.
Aşağıdaki örnekten kendiniz de inceleyebilir, denemeler yapabilirsiniz.
See the Pen
addEventListener Kullanımı by Hakan (@hbaykara)
on CodePen.
Bubbling and capturing (Kabarcıklanma ve Yakalama) nedir? Detaylı anlatımına buradan ulaşabilirsiniz.