Penjelasan terperinci tentang prinsip dan kaedah pelaksanaan delegasi acara jQuery-tutorial js-php.cn

Penjelasan terperinci tentang prinsip dan kaedah pelaksanaan delegasi acara jQuery

王林

Lepaskan： 2024-02-28 18:18:04

asal

1091 orang telah melayarinya

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>

Salin selepas log masuk

在这个例子中，我们为父元素#parent绑定了点击事件处理程序，只有当点击子元素button时才会触发事件。

delegate() 方法

在jQuery版本1.7之前，可以使用delegate()方法来实现事件委派。用法类似于on()

Berikut ialah contoh mudah:

$(document).ready(function(){
    $("#parent").delegate("button", "click", function(){
        alert("子元素被点击");
    });
});

Salin selepas log masuk

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 kaedah on(), tetapi ia lebih mudah apabila berurusan dengan elemen yang ditambah secara dinamik.

Amalan terbaik

🎜Cuba ikat pengendali acara dengan elemen induk yang paling hampir dengan elemen sasaran untuk mengelakkan kehilangan prestasi semasa acara menggelegak. 🎜🎜Apabila menggunakan delegasi acara, beri perhatian kepada pemilihan elemen sasaran dengan betul untuk mengelak daripada mencetuskan acara secara tidak sengaja. 🎜🎜🎜Melalui delegasi acara, kami boleh mengendalikan sejumlah besar acara elemen dengan lebih cekap dan meningkatkan prestasi halaman. Pada masa yang sama, delegasi acara juga boleh memudahkan logik kod dan menjadikan kod lebih mudah untuk dikekalkan dan dikembangkan. Saya harap artikel ini dapat membantu pembaca memahami dan menggunakan teknologi delegasi acara dengan lebih baik. 🎜

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!