Fahami kaedah mengikat peristiwa biasa jQuery-tutorial js-php.cn

Fahami kaedah mengikat peristiwa biasa jQuery

WBOY

Lepaskan： 2024-02-28 08:24:03

asal

967 orang telah melayarinya

Fahami kaedah mengikat peristiwa biasa jQuery

Untuk memahami kaedah pengikatan acara jQuery yang biasa, contoh kod khusus diperlukan

Dalam pembangunan bahagian hadapan, pengikatan acara ialah operasi yang sangat biasa, anda boleh mencapai kesan interaksi halaman, bertindak balas kepada operasi pengguna dan lain-lain fungsi. Dalam jQuery, terdapat banyak cara untuk mengikat peristiwa, termasuk peristiwa mengikat secara langsung, menggunakan kaedah .on(), menggunakan kaedah .delegate() (ditamatkan), menggunakan kaedah .live() (ditamatkan), dsb. Berikut akan memperkenalkan kaedah pengikatan peristiwa biasa ini secara terperinci dan memberikan contoh kod yang sepadan.

Ikat peristiwa secara langsung: Pilih elemen melalui pemilih, dan kemudian gunakan kaedah pengikatan acara jQuery, seperti klik(), alih tetikus(), dsb. untuk mengikat acara secara langsung.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>直接绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").click(function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</head>
<body>
    <button id="btn">点击我</button>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah .on(): Kaedah .on() boleh mengikat peristiwa pada elemen yang dipilih atau kepada elemen yang ditambah secara dinamik.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用.on()方法绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#btn").on('click', function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</head>
<body>
    <button id="btn">点击我</button>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah .delegate() (dihentikan): Gunakan kaedah .delegate() untuk mengikat peristiwa pada elemen anak unsur yang dipilih Ia telah digantikan dengan kaedah .on() dan tidak lagi disyorkan.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用.delegate()方法绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#parent").delegate('#child', 'click', function(){
                alert("你点击了子元素！");
            });
        });
    </script>
</head>
<body>
    <div id="parent">
        <button id="child">点击我</button>
    </div>
</body>
</html>

Salin selepas log masuk

Gunakan kaedah .live() (tidak digunakan lagi): Gunakan kaedah .live() untuk menambahkan peristiwa mengikat elemen secara dinamik pada elemen yang dipilih Ia telah digantikan dengan kaedah .on() dan tidak lagi disyorkan .

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>使用.live()方法绑定事件</title>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script>
        $(document).ready(function(){
            $("#container").append('<button class="btn">点击我</button>');
            $(".btn").live('click', function(){
                alert("你点击了按钮！");
            });
        });
    </script>
</head>
<body id="container">
    <!-- 动态添加的按钮 -->
</body>
</html>

Salin selepas log masuk

Melalui contoh kod di atas, kita boleh melihat operasi khusus kaedah pengikatan peristiwa yang berbeza dalam aplikasi praktikal. Dalam pembangunan sebenar, adalah sangat penting untuk memilih kaedah pengikatan acara yang sesuai mengikut keperluan anda Pada masa yang sama, anda juga harus memberi perhatian kepada kemas kini versi jQuery untuk mengelak daripada menggunakan kaedah usang. Saya harap kandungan di atas dapat membantu semua orang lebih memahami kaedah mengikat acara biasa jQuery.

Atas ialah kandungan terperinci Fahami kaedah mengikat peristiwa biasa jQuery. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!