event.eventPhase

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!

İlgili Başlıklar