attachEvent() metodu, herhangi bir olayın dinlenerek, gerçekleştiği zaman bir fonksiyona yönlendirilmesini sağlar.
Sözdizimi
sonuc = element.attachEvent( Tip, Fonksiyon )
| Tip | 'on' öneki ile birllikte onclick ve onfocus gibi string tipinde olay adı. |
| Fonksiyon | Olay tetiklendiği zaman çağrılacak fonksiyon veya çalıştırılacak kod. |
Dönüş Değeri
| sonuc | Olay dinleyicisi elemente başarılı bir şekilde eklenirse true, eklenemezse false döner. |
addEventListener() fonksiyonundan farklı olarak attachEvent() fonksiyonunda yakalama ve dönüş evreleri belirtilememektedir. attachEvent() fonksiyonu ile eklenen olay yönetim fonksiyonu, Olay hedefe ulaştıktan sonra dönüş evresinde gerçekleşir. attachEvent() ile olay dinleyicilerinin birbirlerinden önce veya sonra eklenmesi çalışma/çağrılma sıralarını etkilemeyecektir. Çalışma/çağrılma sırası DOM ağaç yapısına göre ve olay elemente ulaştıktan sonra dönüş evresinde gerçekleşecektir.
Aşağıdaki örnek, bir tablo ve tablo sütunu içine yerleştirilmiş bir div elementine ayrı ayrı "click" olaylarını dinlemek için attachEvent() ile olay dinleyicisi eklenerek farklı fonksiyonlara yönlendirilmesini ve olayların gerçekleşme sırasını göstermektedir.
<style type="text/css">
#OrnekTablo {
background-color:#339933;
}
#OrnekTablo tr td {
padding:10px;
}
#OrnekKutu {
width:200px;
height:100px;
background-color:#FF3333;
}
</style>
<table id="OrnekTablo">
<tr id="ornekTabloSatir">
<td id="ornekTabloSutun">
<div id="OrnekKutu"></div>
</td>
</tr>
</table>
<script type="text/javascript">
function divYakala(olay)
{
alert("DIV tıklandı!" + "\n" + "Hedef : " + olay.srcElement.id);
}
function tabloYakala(olay)
{
alert("TABLE tıklandı!" + "\n" + "Hedef : " + olay.srcElement.id);
}
document.getElementById('OrnekTablo').attachEvent("onclick", tabloYakala);
document.getElementById('OrnekKutu').attachEvent("onclick", divYakala);
</script>
Test Edin