Mengikat peristiwa (bind()) dan mengalih keluar acara (unbind()) dalam JQuery_jquery

Kadang-kadang selepas acara dilaksanakan, jika anda ingin membatalkan kesan acara, anda boleh mengendalikannya melalui kaedah tertentu. Sebagai contoh, kaedah bind() (peristiwa mengikat) dan unbind() (mengalih keluar peristiwa yang ditambahkan melalui kaedah bind()) digunakan untuk mengalih keluar kesan peristiwa.

Sebagai contoh, kes berikut:

Salin kod Kod adalah seperti berikut:

<script type="text/javascript">
$(fungsi(){
$('#btn').bind("klik", function(){
                                                                                                                                                                                                                                                                                                                            melalui                }).bind("klik", function(){
                                                                                                                                                                                                                                                                                                                                                                                    melalui                }).bind("klik", function(){
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            });
})
</skrip>



bahagian html:

Salin kod Kod adalah seperti berikut: <badan>

<button id="btn">Klik Saya</button>

<div id="test"></div>
</body>



Apabila butang btn diklik, tiga peristiwa klik dicetuskan Kaedah append() di sini menghantar kandungan tiga perenggan ke lapisan div.

Kaedah append() menambahkan kandungan yang ditentukan ke penghujung elemen yang dipilih (masih secara dalaman). Ia masih berbeza daripada kaedah html() Kaedah html() mengubah kandungan keseluruhan elemen dan bukannya menambahkan kandungan pada penghujung elemen. Kaedah text() adalah serupa dengan kaedah html(), tetapi perbezaannya ialah kod html boleh ditulis dalam kaedah html() dan boleh dihuraikan dengan betul, manakala text() hanya boleh merawat kod html sebagai biasa. rentetan.

Setiap kali anda mengklik di sini, acara akan dilaksanakan untuk menambah perenggan pada penghujung lapisan div. Kod berikut membatalkan kesan acara Anda boleh memadamkan acara untuk membatalkan kesan klik:

Salin kod Kod adalah seperti berikut: <script type="text/javascript">

$(fungsi(){

$('#btn').bind("klik", function(){
                                                                                                                                                                                                                                                                                                                            melalui                }).bind("klik", function(){
                                                                                                                                                                                                                                                                                                                                                                                   melalui                }).bind("klik", function(){
                                                                                                                                                                                                                                                                                                                                                                                                                                                                            });
$('#delAll').klik(fungsi(){
                   $('#btn').lepas ikatan("klik");
});
})
</skrip>

             $('#btn').unbind("click"); La fonction de ce code est d'annuler l'événement click sous l'élément btn. Ce n'est pas seulement valable pour la méthode bind(), c'est également valable pour la méthode click(). D'un certain point de vue, bind("click",function(){}) et click(function(){}) sont équivalents.

Vous pouvez également supprimer des événements spécifiques pour des méthodes spécifiques. Vous pouvez vous référer au code suivant :

Copier le code Le code est le suivant :

<script type="text/javascript">
$(fonction(){
          $('#btn').bind("click", myFun1 = function(){
à travers                }).bind("clic", myFun2 = function(){
à travers                }).bind("clic", myFun3 = function(){
à travers               });
         $('#delTwo').click(function(){
                  $('#btn').unbind("click",myFun2);
});
})
</script>



Le deuxième paramètre de la méthode unbind() est le nom de la fonction d'exécution correspondant à l'événement. Après exécution, seul l'événement myFun2 est supprimé, et les deux autres événements click sont exécutés normalement.

Il existe également une méthode one() qui est similaire à la méthode bind(). La différence est que la méthode one() n'est exécutée qu'une seule fois. Liez un gestionnaire d'événements unique à un événement spécifique (comme un clic) pour chaque élément correspondant. Le code est le suivant :

Copier le code Le code est le suivant : <script type="text/javascript">

$(fonction(){

         $('#btn').one("clic", function(){
à travers                }).one("clic", function(){
à travers                }).one("clic", function(){
à travers               });
})
</script>



Exécuté une seule fois après avoir cliqué. Cliquer à nouveau ne déclenchera pas l’effet. C'est la seule méthode.

Ce qui précède représente l'intégralité du contenu de cet article. J'espère que cet article pourra aider tout le monde à mieux comprendre les événements de liaison et de suppression de jQuery,