Javascript: addEventListener Nedir? Nasıl Kullanılır?

Giriş

Hepinize merhabalar👋
Bu yazımızda HTML öğelerine addEventListener fonksiyonunu ekleyerek bir takım sayfa canlandırma işlemleri yapacağız. Ama öncesinde gelin addEventListener fonksiyonu nasıl çalışıyor ona bakalım.

addEventListener fonksiyonu adından da anlaşılacağı gibi, eklediğiniz HTML elementlerine olay dinleyicisi ekler. Yani kullanıcı sayfada herhangi bir işlem yaptığında(click vb.) istediğimiz aksiyonları alabilmemizi sağlar.

Kullanım(syntax)

Kullanımı oldukça basittir.

element.("olay", fonksiyon, kabarcıklanma)

element: Olayın gerçekleşeceği bileşen(button vb.)
olay: Seçilen elementte hangi eventin dinlenileceği(click, doubleclick vb.).
fonksiyon: Olay tetiklendiğinde çalışacak kodlar.
Kabarcıklanma: İç içe girmiş iki elementinizin olduğunu ve aşağıdaki görseldeki gibi btn1 ve btn2'e click eventi atadığınızı düşünün.

btn1'e bastığı zaman ne olacak? Ben söyleyeyim;
Hem btn1 için tanımlanmış kodlar, hem de btn2 için tanımlanmış kodlar çalışacak.
Bunun sırasını değiştirmek için true veya false boolean değerlerini kullanıyoruz. Default olarak(bir şey yazmıyorsa) false geliyor demektir.
btn2'nin çalışmasını istemediğimiz zaman ise btn2 kodlarının içerisine event.stopPropagation() fonksiyonunu eklememiz yeterli olacaktır..

Örnek kullanım:

document.querySelector("button").addEventListener("click",function(){
    //click tetiklendiğinde çalışacak kodlar.
})

En Yaygın Eventler

Gelin şimdi de en yaygın kullanılan olaylara bir göz atalım.

1. mousedown/mouseup: Kullanıcı fare ile tıkladığında ve çektiğinde çalışan olay dinleyicileridir.

2. mouseover/mouseout: Kullanıcı fare ile üzerine geldiğinde ve çıktığında çalışan olay dinleyicileridir.

3. mousemove: Kullanıcı fare ile üzerinde gezindiği süre boyunca çalışan olay dinleyicisidir.

4. click: Kullanıcı fare ile tıkladığında çalışan olay dinleyicisidir. mousedown ve mouseup bunun bir dinleyici de birleşmiş hâlidir. Yani kullanıcı click yapıp çektiği anda çalışan bir olay dinleyicisidir.

5. dblclick: Kullanıcı fare ile çift tıkladığında çalışan olay dinleyicisidir.

6. keyup/keydown: Kullanıcı klavyeden herhangi bir tuşa tıkladığında ve çektiğinde çalışan olay dinleyicileridir.

Ve daha fazlası için;

Event reference | MDN

This topic provides an index to the main sorts of events you might be interested in (animation, clipboard, workers etc.) along with the main classes that implement those sorts of events. At the end is a flat list of all documented events.

MDN

Okuduğunuz için teşekkürler!🚀