Perbedaan Sasaran Event Dan Currenttarget Event

Sunday, September 8th, 2019 - Artikel HTML DOM

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.

Perbedaan Sasaran Event Dan Currenttarget Event | Ahmad Code | 4.5

Html Dom Pendahuluan

Apa itu DOM? Document Object Model (DOM) ialah suatu platform and language-neutral interface yang memperbolehkan jadwal dan script secara dinamis...
Cara Mengakses Node

Node yang dikenal ELEMENT_NODE, ATTRIBUTE_NODE, TEXT_NODE, ENTITY_REFERENCE_NODE, ENTITY_NODE, DOCUMENT_NODE, DOCUMENT_TYPE_NODE, DOCUMENT_FRAGMENT_NODE, NOTATION_NODE, CDATA_SECTION_NODE, PROCESSING_INSTRUCTION_NODE, dan COMMENT_NODE. Dari sekian banyak itu,...
Properti Penyimpan Info Node

Ada banyak properti DOM yang dapat dipakai untuk mengakses suatu node, sesudah itu memanipulasinya dengan JavaScript, contohnya properti itu: nodeName...
Innerhtml

innerHTML dapat dipakai untuk menetapkan atau mengembalikan teks dari suatu elemen. innerHTML bukanlah bab spesifikasi W3C DOM, tetapi properti ini...
Membuat Elemen Gres Dengan Dom

Anda dapat memakai beberapa metode dari DOM untuk membuat elemen, atribut, atau teks. Mereka adalah: createElement() setAttribute() createTextNode() appendChild() Berikut...