Rumah >hujung hadapan web >tutorial js >Penjelasan terperinci tentang prinsip dan kaedah pelaksanaan delegasi acara jQuery
Penjelasan terperinci tentang prinsip dan kaedah pelaksanaan delegasi acara jQuery
- 王林asal
- 2024-02-28 18:18:041150semak imbas
Penjelasan terperinci tentang prinsip dan kaedah pelaksanaan delegasi acara jQuery
Dalam pembangunan bahagian hadapan, kami sering menghadapi situasi di mana kami perlu mengendalikan sejumlah besar acara elemen. Pendekatan tradisional adalah untuk mengikat pengendali acara kepada setiap elemen, tetapi apabila bilangan elemen adalah besar, pendekatan ini akan membawa kepada penurunan prestasi halaman. Untuk mengendalikan acara elemen dengan lebih cekap, jQuery menyediakan mekanisme delegasi acara (Delegasi Acara).
Prinsip delegasi acara
Delegasi acara ialah teknologi yang mengikat pengendali acara kepada elemen induk dan menggunakan mekanisme menggelegak acara untuk mengendalikan acara elemen kanak-kanak. Apabila elemen kanak-kanak mencetuskan peristiwa, peristiwa itu akan merambat ke atas di sepanjang pepohon DOM dan akhirnya mencapai elemen induk Elemen induk akan melaksanakan pengendali yang sepadan dengan menentukan elemen sasaran acara tersebut. Pendekatan ini mengurangkan bilangan kali untuk mengikat pengendali acara dan meningkatkan prestasi halaman.
Kaedah delegasi acara
on() kaedah
Kaedah on() jQuery ialah kaedah teras untuk melaksanakan delegasi acara. Delegasi acara dicapai dengan mengikat pengendali acara kepada elemen induk dan menentukan pemilih elemen anak yang mencetuskan acara. on()方法是实现事件委派的核心方法。通过为父元素绑定事件处理程序，并指定触发事件的子元素选择器来实现事件委派。
下面是一个简单的例子：
<!DOCTYPE html>
<html>
<head>
<title>事件委派示例</title>
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("#parent").on("click", "button", function(){
alert("子元素被点击");
});
});
</script>
</head>
<body>
<div id="parent">
<button>点击我</button>
<button>点击我</button>
<button>点击我</button>
</div>
</body>
</html>在这个例子中，我们为父元素#parent绑定了点击事件处理程序，只有当点击子元素button时才会触发事件。
delegate() 方法
在jQuery版本1.7之前，可以使用delegate()方法来实现事件委派。用法类似于on()
$(document).ready(function(){
$("#parent").delegate("button", "click", function(){
alert("子元素被点击");
});
});
Dalam contoh ini, kami mengikat pengendali acara klik pada elemen induk #parent, hanya apabila elemen anak butang diklik >Acara akan dicetuskan sahaja. - kaedah delegate()
- Sebelum jQuery versi 1.7, anda boleh menggunakan kaedah
delegate()untuk melaksanakan delegasi acara. Penggunaannya serupa dengan kaedahon(), tetapi ia lebih mudah apabila berurusan dengan elemen yang ditambah secara dinamik. rrreee
Atas ialah kandungan terperinci Penjelasan terperinci tentang prinsip dan kaedah pelaksanaan delegasi acara jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!