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ı:
|
1 2 3 4 5 6 7 8 9 |
<div id="test1">TIKLA</div> <script> var nesne= document.getElementById("test1"); nesne.addEventListener("click",function(e){ alert("merhaba"); },false); </script> |
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.
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="kutu1"> <div id="kutu2"> <div id="kutu3"> </div> </div> </div> <script> var kutu1= document.getElementById("kutu1"); var kutu2= document.getElementById("kutu2"); var kutu3= document.getElementById("kutu3"); kutu1.addEventListener("click",function(e){ alert("kutu 1 çalıştı"); },false); kutu2.addEventListener("click",function(e){ alert("kutu 2 çalıştı"); },false); kutu3.addEventListener("click",function(e){ alert("kutu 3 çalıştı"); },false); </script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 |
<div id="kutu1"> <div id="kutu2"> <div id="kutu3"> </div> </div> </div> <script> var kutu1= document.getElementById("kutu1"); var kutu2= document.getElementById("kutu2"); var kutu3= document.getElementById("kutu3"); kutu1.addEventListener("click",function(e){ alert("kutu 1 çalıştı"); },true); kutu2.addEventListener("click",function(e){ alert("kutu 2 çalıştı"); },true); kutu3.addEventListener("click",function(e){ alert("kutu 3 çalıştı"); },true); </script> |
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.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 |
<div id="kutu1"> <div id="kutu2"> <div id="kutu3"> </div> </div> </div> <script> var kutu1= document.getElementById("kutu1"); var kutu2= document.getElementById("kutu2"); var kutu3= document.getElementById("kutu3"); kutu1.addEventListener("click",function(e){ alert("kutu 1 çalıştı"); },false); kutu2.addEventListener("click",function(e){ alert("kutu 2 çalıştı"); },false); kutu3.addEventListener("click",function(e){ e.stopPropagation() ; alert("kutu 3 çalıştı"); },false); </script> |
[…] HTML etiketlerine addEventListener metotu ile olay eklemesi […]
[…] 6.1 addEventListener Kullanımı […]
[…] HTML etiketlerine addEventListener metotu ile olay eklemesi […]
[…] addEventListener konusunu sitede daha önce anlatmıştım. O yazıdan konuyu anlatan bir kaç alıntı yaparak olay kullanımını açıklayalım. […]