Properti Event.eventPhase akan mengembalikan 1, 2, atau 3 yang menunjukkan processing phase yang ada dari event ini di dalam event flow.
Sintaks:
Event.eventPhase
- Jika event dicapture menggunakan event listener, awal processing phase dari event adalah CAPTURING_PHASE (1).
- Setelah CAPTURING_PHASE, urutan selanjutnya adalah AT_TARGET (2). Ditahap ini, event akan dikirimkan kepada elemen yang merupakan target asli si-event.
Catatan: Jika CAPTURING_PHASE bukanlah awal processing phase, maka AT_TARGET adalah awal processing phase, jadi CAPTURING_PHASE dilewati.
- Akhirnya, dalam tahap terakhir adalah BUBBLING_PHASE (3), yaitu event akan bubbles up di dalam DOM hierarchy.
Di bawah ini contoh penggunaan properti Event.eventPhase. Sebelumnya di bagian HEAD terdapat satu fungsi:
window.onload = function Init() {
if (document.body.addEventListener) {
document.body.addEventListener("click", CapturedClick, true);
}
}
function CapturedClick(event) {
GetPhase(event, this.tagName);
}
function GetPhase(event, tagName) {
if("eventPhase" in event) {
switch(event.eventPhase) {
case Event.CAPTURING_PHASE:
alert("CAPTURING_PHASE ("+tagName+")");
break;
case Event.AT_TARGET:
alert("AT_TARGET ("+tagName+")");
break;
case Event.BUBBLING_PHASE:
alert("BUBBLING_PHASE ("+tagName+")");
break;
}
}
}
Dan di bagian BODY terdapat:
<BODY ONCLICK="GetPhase(event, this.tagName)">
Klik 'Anchor' untuk melihat <i>processing phase</i> dari event:
<A HREF="#" ONCLICK="GetPhase(event, this.tagName)">Anchor</A>
</BODY>
