Pengendalian Acara Langsung lwn. Diwakilkan dalam jQuery .on(): Pendekatan Mana Yang Perlu Anda Pilih?

Pengendalian Acara Langsung lwn. Diwakilkan dalam jQuery .on()

kaedah .on() jQuery menyediakan dua pendekatan pengendalian peristiwa yang berbeza: langsung dan diwakilkan. Perbezaannya terletak pada skop pengendalian acara.

Pengendalian Acara Langsung

Dalam pengendalian acara langsung, pengendali acara terikat terus kepada elemen sasaran. Ini bermakna bahawa pengendali hanya dilaksanakan apabila peristiwa itu berlaku secara langsung pada elemen itu, bukan pada mana-mana keturunannya. Contohnya:

$("div#target span.green").on("click", function() {
   alert($(this).attr("class") + " is clicked");
});

Pengendalian Acara yang Diwakilkan

Dalam pengendalian acara yang diwakilkan, pengendali acara terikat pada elemen nenek moyang dan pemilih menentukan elemen keturunan yang harus mencetuskan pengendali. Ini membolehkan pengendali mengendalikan peristiwa yang berlaku di mana-mana dalam skop yang ditentukan. Contohnya:

$("div#target").on("click", "span.green", function() {
   alert($(this).attr("class") + " is clicked");
});

Perbezaan utama ialah dalam kes 1, setiap rentang bertanggungjawab secara langsung untuk mengendalikan acaranya sendiri. Dalam kes 2, elemen kontena (div#target) diwakilkan tanggungjawab untuk mengendalikan acara untuk elemen anaknya (span.green).

Contoh Perbandingan

The contoh yang disediakan menunjukkan perbezaan antara pengendalian acara langsung dan diwakilkan dalam konteks mengklik rentang hijau dalam div#target. Kedua-dua kaedah mencapai gelagat yang sama untuk memaklumkan kelas rentang yang diklik.

Pendekatan Terus:

• Setiap rentang hijau terikat kepada pengendali acara kliknya sendiri.
• Rentang hijau baharu yang dibuat dalam div#target tidak akan mempunyai pengendali acara terikat kepada mereka.

Pendekatan Diwakilkan:

• Pengendali acara terikat kepada div#target, dengan span.green sebagai pemilih yang diwakilkan.
• Klik pada mana-mana rentang hijau sedia ada atau akan datang dalam div#target akan dikendalikan.
• Div#target bertanggungjawab untuk mengendalikan acara bagi pihak semua elemen anaknya yang sepadan dengan span.green.

Atas ialah kandungan terperinci Pengendalian Acara Langsung lwn. Diwakilkan dalam jQuery .on(): Pendekatan Mana Yang Perlu Anda Pilih?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!