event.eventPhase özelliği, olay akışı sırasındaki aktif evrenin tamsayı olarak değerini verir.
Sözdizimi
evre = event.eventPhase
Dönüş Değeri
| evre | 1, 2 veya 3 tamsayı değerlerinden biri döner. |
event.eventPhase özelliği, Event nesnesinin tamsayı tabanlı numaralandırma (enumeration) sabitini döndürür. Bu sabit değerleri hem tamsayı hem de isim karşılaştırmaların da kullanabilirsiniz. Tamsayı değerlerin okunabilir isim değerleri aşağıdaki gibidir.
- 1 = Event.CAPTURING_PHASE
- 2 = Event.AT_TARGET
- 3 = Event.BUBBLING_PHASE
Aşağıdaki örnek, içiçe yerleştirilmiş üç div elementinde click olayının akışını göstermektedir.
<style type="text/css">
.kutubicim
{
padding:5px;
margin:5px;
text-align:center;
font-weight:bold;
}
</style>
<table><tr><td valign="top" align="center">
<div id="AnaDiv" class="kutubicim" style="width:180px; background-color:#77AA00;">
AnaDiv
<div id="AltDiv-1" class="kutubicim" style="background-color:#99CC00;">
AltDiv-1
<div id="AltDiv-2" class="kutubicim" style="height:70px; background-color:#AAFF00;">
AltDiv-2
<br/><br/>
Tıkla Bana!
</div>
</div>
</div>
<input type="button" value="Temizle" onClick="bilgiIslem('temizle');" style="width:90%;"/>
<script type="text/javascript">
var AnaDiv = document.getElementById('AnaDiv');
var AltDiv1 = document.getElementById('AltDiv-1');
var AltDiv2 = document.getElementById('AltDiv-2');
function bilgiIslem(param)
{
if(param == "temizle")
document.getElementById('bilgiKutu').innerHTML = "";
else
document.getElementById('bilgiKutu').innerHTML += param + "<br/>";
}
function kontrol(olay)
{
switch(olay.eventPhase)
{
case olay.CAPTURING_PHASE: // 1
bilgiIslem(olay.currentTarget.id + " elementinde olay yakalanıyor.");
break;
case olay.AT_TARGET: // 2
bilgiIslem(olay.currentTarget.id + " elementi, hedef element.");
break;
case olay.BUBBLING_PHASE: // 3
bilgiIslem(olay.currentTarget.id + " elementinde olay dönüyor.");
}
}
AnaDiv.addEventListener("click", kontrol, true); // Yakalama
AnaDiv.addEventListener("click", kontrol, false); // Dönüş
AltDiv1.addEventListener("click", kontrol, true); // Yakalama
AltDiv1.addEventListener("click", kontrol, false); // Dönüş
AltDiv2.addEventListener("click", kontrol, true); // Yakalama
AltDiv2.addEventListener("click", kontrol, false); // Dönüş
</script>
Test Edin
AnaDiv
AltDiv-1
AltDiv-2
Tıkla Bana!
|
|