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.
- mousedown/mouseup: Kullanıcı fare ile tıkladığında ve çektiğinde çalışan olay dinleyicileridir.
- mouseover/mouseout: Kullanıcı fare ile üzerine geldiğinde ve çıktığında çalışan olay dinleyicileridir.
- mousemove: Kullanıcı fare ile üzerinde gezindiği süre boyunca çalışan olay dinleyicisidir.
- 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.
- dblclick: Kullanıcı fare ile çift tıkladığında çalışan olay dinleyicisidir.
- keyup/keydown: Kullanıcı klavyeden herhangi bir tuşa tıkladığında ve çektiğinde çalışan olay dinleyicileridir.