Perbedaan Sasaran Event Dan Currenttarget Event
Properti target Event mengacu kepada elemen di mana event itu awal mula terjadi.
Sebagai teladan saat event handler ONCLICK ditugaskan di dalam DIV, kemudian ada pengguna mengklik DIV itu, kemudian terjadilah event click, maka DIV itu dipertimbangkan sebagai asal muasal event pertama-pertama mulai — sasaran dari si-event.
Sedangkan untuk properti currentTarget mengacu kepada elemen yang event listener-nya sedang diproses.
Sebagai teladan ada isyarat berikut:
Untuk perbedaan antara currentTarget
dan target
adalah:
target
mengacu kepada elemen dimana event itu pertama-tama mulai.Sebagai teladan jikalau anda menempatkan event listener di <BODY>, dan kemudian anda mengklik <SPAN>,
target
akan 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 memakai teladan isyarat di atas, kini coba anda klik <A> yang memiliki innerHTML ‘anchor’,
target
akan mengacu kepada <A>.Jadi terang untuk
target
akan mengacu kepada elemen dimana event mula-mula terjadi.currentTarget
ialah kebalikannya.Sebagai teladan jikalau anda melampirkan event listener di <BODY>, kemudian anda mengklik <SPAN>, untuk
currentTarget
mengacu pada <BODY>, sedangkantarget
masih 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 memakai teladan isyarat di atas, kini coba klik <A> yang memiliki innerHTML ‘anchor’,
currentTarget
mengacu tetap kepada <BODY>, sedangkantarget
mengacu pada <A> dan bukan <SPAN>.
Untuk lebih jelasnya jalankan teladan berikut, di mana SPAN, A, P, dan BODY ditambahakan event listener yang sama: