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:

<BODY><P><A HREF="#">anchor <SPAN>span</SPAN></A></P></BODY>

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>, sedangkan target 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>, sedangkan target mengacu pada <A> dan bukan <SPAN>.

Untuk lebih jelasnya jalankan teladan berikut, di mana SPAN, A, P, dan BODY ditambahakan event listener yang sama:

<HTML> <HEAD> <SCRIPT TYPE="text/javascript"> function HandleEvent() { alert("target: " + event.target.tagName); alert("currentTarget: " + event.currentTarget.tagName); } </SCRIPT> </HEAD> <BODY ONCLICK="HandleEvent()"> <P ONCLICK="HandleEvent()"> <A HREF="#" ONCLICK="HandleEvent()">anchor <SPAN ONCLICK="HandleEvent()">span</SPAN></A> </P> </BODY> </HTML>

Demikian yang dapat kami share kepada sobat source code aplikasi pada kesempatan ini, semoga dapat bermanfaat dan bisa menjadi referensi pemrograman bagi anda. Jangan lupa like Fan Page kami, dan SUBSCRIBE Channel Youtube kami untuk dapatkan update source code aplikasi terbaru.

Ahmad Code