Rumah >hujung hadapan web >tutorial js >Fahami kaedah dan teknik penggunaan delegasi acara dalam jQuery
Fahami kaedah dan teknik penggunaan delegasi acara dalam jQuery
- WBOYasal
- 2024-02-28 14:21:031073semak imbas
Jika anda perlu memahami kaedah dan teknik penggunaan delegasi acara dalam jQuery, anda perlu memahami apa itu delegasi acara. Perwakilan acara ialah teknik yang biasa digunakan yang boleh membantu kami mengendalikan acara untuk sejumlah besar elemen dengan cekap. Melalui delegasi acara, kita boleh mengikat acara dengan elemen induknya, dan kemudian mengendalikan acara pada elemen anak melalui mekanisme menggelegak acara.
Dalam jQuery, delegasi acara boleh dicapai melalui kaedah on(). Berikut akan menunjukkan cara menggunakan delegasi acara jQuery melalui contoh kod tertentu.
Pertama sekali, kami boleh mempertimbangkan senario biasa, iaitu, terdapat berbilang elemen li dalam senarai ul Kami berharap apabila mana-mana elemen li diklik, kandungan teks elemen akan muncul. Pendekatan biasa adalah untuk mengikat acara klik pada setiap elemen li, tetapi jika terdapat banyak elemen li, berbuat demikian akan kelihatan berlebihan.
Menggunakan kaedah perwakilan acara, kita hanya perlu mengikat acara klik pada elemen ul, dan kemudian mengendalikan acara klik subelemen li melalui perwakilan acara. Berikut ialah contoh kod:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>事件委派示例</title>
<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script>
$(document).ready(function() {
$('ul').on('click', 'li', function() {
var text = $(this).text();
alert('您点击了：' + text);
});
});
</script>
</head>
<body>
<ul>
<li>列表项1</li>
<li>列表项2</li>
<li>列表项3</li>
<li>列表项4</li>
</ul>
</body>
</html>Dalam kod ini, kami melaksanakan delegasi acara melalui $('ul').on('click', 'li', pengendali). Apabila mana-mana elemen li dalam elemen ul diklik, peristiwa klik yang terikat pada ul akan dicetuskan, dan melalui mekanisme menggelegak acara, pengendali fungsi pemprosesan akhirnya akan dipanggil untuk mengendalikan acara klik. Dalam fungsi pemprosesan, anda boleh mendapatkan kandungan teks elemen yang diklik melalui $(this).text(), dan kemudian muncul kandungan yang sepadan.
Menggunakan kaedah delegasi acara boleh mengurangkan jumlah kod dan meningkatkan prestasi dengan berkesan, terutamanya apabila memproses sejumlah besar elemen. Saya berharap kod contoh di atas dapat membantu anda memahami dengan lebih baik kaedah dan teknik penggunaan delegasi acara dalam jQuery.
Atas ialah kandungan terperinci Fahami kaedah dan teknik penggunaan delegasi acara dalam jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!