myNotlar Logo

Element.addEventListener()


Firefox Opera

addEventListener metodu, herhangi bir olayın dinlenerek, gerçekleştiği zaman bir fonksiyona yönlendirilmesini sağlar.

Sözdizimi

element.addEventListener ( Tip, Fonksiyon, Yakala )
TipString olarak olay tipi.
FonksiyonDinleyici parametrelerinin de aktarıldığı, olay tetiklendiği zaman çağırılacak fonksiyonu belirler.
YakalaOlayın aşağıya doğrumu yoksa yukarıya doğrumu yakalanacağını belirler. true ise aşağı doğru, false ise yukarı doğru yakalanır.

DOM ağaç yapısında olaylar, kökten (document nesnesinden) hedef elemente doğru sevk edilir ve tekrar document nesnesine geri döner. Bu sevk işlemi sırasında olayın gerçekleştiği elemente ulaşana kadar geçen bütün elementlerde, ilgili olay için bir olay dinleyicisi mevcutsa bu elementlere de olayın gerçekleştiği bildirilir. Yakala seçeneği burada olayın hedef elemente giderken mi yoksa document nesnesine dönerken mi yakalanacağını belirler. true hedefe giderken, false ise dönerken yakalanacağını belirtir.

 document -> body -> table -> tr -> td -> div

Aşağıdaki örnek, document nesnesine, bir tabloya ve tablo hücresi içine yerleştirilmiş div elementine olay dinleyicisi kaydedilerek farklı fonksiyonlara yönlendirilmesini ve olayların gerçekleşme sırasını göstermektedir.

<table id="OrnekTablo">
<tr>
   <td>
      <div id="OrnekKutu" style="width:200px; height:100px; background-color:#FF3333;"></div>
   </td>
</tr>
</table>

<script type="text/javascript">
function docYakala(olay)
{
	alert("DOCUMENT tıklandı!\nHedef : " + olay.target + "\nGüncel Hedef : " + olay.currentTarget);
}
function divYakala(olay)
{
	alert("DIV tıklandı!\nHedef : " + olay.target + "\nGüncel Hedef : " + olay.currentTarget);
}
function tabloYakala(olay)
{
	alert("TABLE tıklandı!\nHedef : " + olay.target + "\nGüncel Hedef : " + olay.currentTarget);
}

document.getElementById('OrnekKutu').addEventListener("click",divYakala, true);
document.getElementById('OrnekTablo').addEventListener("click",tabloYakala, false);
document.addEventListener("click",docYakala, true);

</script>
<--<--
document->body->table->tr->td->div
-->-->
Test Edin
Lütfen kutuya tıklayınız.
İlgili Başlıklar
 
myNotlar Hakkında
Telif Hakkı © 2007-2009 mynotlar.com Tüm Hakları Saklıdır. Kopyalanamaz. Yayınlanamaz.
E-Posta : support@myNotlar.com

| Tek Kişilik Oyunlar | Sudoku | Oyunlar |