Pazartesi , 24 Temmuz 2017
Anasayfa » JavaScript » JavaScript addEventListener Kullanımı

JavaScript addEventListener Kullanımı

HTML dökümanı üzerinde belirtilen elementi dinleyip, istenilen olay gerçekleştiğinde bir metod çalıştırmak için kullanılır.

Aslında özetle DOM nesnelerine olay atamak için kullanılır.

Bu yazıda addEventListener kullanımı ve isteğe bağlı bubbling( kabarcıklama) özelliğini anlatacağım.  addEventListener kullanırken son parametreyi genellikle false yapmışızdır. true olsa ne olur onu da inceleyeceğiz.

Kullanımı:

element.addEventListener(olay,fonksiyon,kabarcıklanma);

olay: dinlenecek etikete ait olan hareketlilik. örn: click,mouseover,keypress, cut,scroll,dragenter vs. tüm olay listesine ulaşmak için tıklayın.

fonksiyon :dinlenen olay gerçekleştiğinde çalıştırılacak olan metod adı yada anonim fonksiyon

kabarcıklanma: içi içe olan etiketlerin her birinde olay tanımlanmışsa baştan sonra doğru olayları çalıştırıp çalıştırmyacağı.(true/false alır)

 

Basit kullanımı:

test1 nesnesine tıklandığında anonim bir fonksiyon tetikleniyor.

 

Şimdi gelelim bubbling kavramını aşağıdaki resimde incelemeye. Turuncu(kutu 1),sarı (kutu 2) ve (kırmızı(kutu 3) olarak isimlendirilmiştir.

Bu üç etiket sırasıyla bir biri içindedir. kutu1 > kutu2 > kutu3 şeklinde bir biri içinde durmaktadır. Her etikete bir click olayı ve anonim tanımlama yapılmıştır. Son parametre olan kabarcıklama ilk örnekte false olarak işaretlendiğinde fonksyionlar sırasıyla içeriden dışarıya doğru etkilenen etiketlerde çalıştırılacaktır.

 

 

screenshot_6

1.Durum: kabarcıklanma false yazılıp, kutu3(kırmızı) nesnesine tıklandığında önce kutu3 > kutu2 > kutu1 metodları sırasıyla çalıştırılacaktır.

 

2.Durum kabarcıklanma true olarak yazılırsa, bu seferde etkilenen etiketler metodları içeriden dışarıya doğru değil, dışarıdan içeri doğru çalıştıracaktır. Yine örneğimizdeki kabarcıklamayı true olarak değiştirdiğimizde ve kutu3 (kırmızı) nesnesine tıkladığımızda kutu1 > kutu2 >kutu3 şekilde metodlar çalıştırılacaktır.

Bu durum addEventListener ile bubbling parametresini değiştirerek hangi etiketlerin nasıl etkilendiğini görmüş olduk. Eğer bir etiketin ebeveynlerinde metod yoksa bubbling önemli olmayacaktır. Fakat olay atayacağımız etiketin ebeveynlerinde olaylar varsa bubbling değerinin true/false olma durumu önemli olacaktır.

stopPropagation:

Peki burada kutu3(kırmızı) etikete tıkladığımda ebeveynlerindeki olayları kontrol etmesin istersem ne yapmalıyım.

Bunun içinde Event.stopPropagation metodu işimizi görmektedir. Bubbling değerini false yaparak tıkladığımız etiketten olay kontrolüne başlamasını sağlayıp çalışan metoda Event.stopPropagation metodunu yazıyoruz.

Örnek kullanım: Örnekte kutu3(kırmızı)  etikete tıkladığımızda sadece kutu3 çalışacak ve e.stopPropagation();  değeri ile aşağı doğru kabarcıklanmayı engellemiş olacağız.

 

 

Hakkında Hayri

İlginizi Çekebilir

JQuery Checked Kullanımı

Bu örneğimizde JQuery ile checkbox kullanarak resim gizleyip göstermeyi yapacağız. Bunun için ilk olarak JQuery’nin sitesinden …

Bir Cevap Yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir