Properti target Event mengacu kepada elemen di mana event itu awal mula terjadi.
Sebagai contoh ketika event handler ONCLICK ditugaskan di dalam DIV, kemudian ada pengguna mengklik DIV itu, lalu terjadilah event click, maka DIV itu dipertimbangkan sebagai asal muasal event pertama-pertama mulai -- target dari si-event.
Sedangkan untuk properti currentTarget mengacu kepada elemen yang event listener-nya sedang diproses.
Sebagai contoh ada kode berikut:
Untuk perbedaan antara currentTarget dan target adalah:
targetmengacu kepada elemen dimana event itu pertama-tama mulai.Sebagai contoh jika anda menempatkan event listener di <BODY>, dan kemudian anda mengklik <SPAN>,
targetakan mengacu kepada <SPAN>:<HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function HandleEvent(){ alert("target: " + event.target.tagName); } </SCRIPT> </HEAD> <BODY ONCLICK="HandleEvent()"> <P> <A HREF="#">anchor <SPAN>span</SPAN></A> </P> </BODY> </HTML>Selanjutnya masih sama menggunakan contoh kode di atas, sekarang coba anda klik <A> yang mempunyai innerHTML 'anchor',
targetakan mengacu kepada <A>.Jadi jelas untuk
targetakan mengacu kepada elemen dimana event mula-mula terjadi.currentTargetadalah kebalikannya.Sebagai contoh jika anda melampirkan event listener di <BODY>, lalu anda mengklik <SPAN>, untuk
currentTargetmengacu pada <BODY>, sedangkantargetmasih mengacu pada <SPAN>:<HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function HandleEvent() { alert("currentTarget: " + event.currentTarget.tagName); alert("target: " + event.target.tagName); } </SCRIPT> </HEAD> <BODY ONCLICK="HandleEvent()"> <P> <A HREF="#">anchor <SPAN>span</SPAN></A> </P> </BODY> </HTML>Selanjutnya masih sama menggunakan contoh kode di atas, sekarang coba klik <A> yang mempunyai innerHTML 'anchor',
currentTargetmengacu tetap kepada <BODY>, sedangkantargetmengacu pada <A> dan bukan <SPAN>.
Untuk lebih jelasnya jalankan contoh berikut, di mana SPAN, A, P, dan BODY ditambahakan event listener yang sama:
