Penjelasan terperinci tentang contoh penggunaan jQuery binding event listener bind dan mengalih keluar event listener unbind

Penjelasan terperinci tentang contoh penggunaan jQuery binding event listener bind dan mengalih keluar event listener unbind_jquery

WBOY

Lepaskan： 2016-05-16 15:19:13

asal

1976 orang telah melayarinya

Contoh dalam artikel ini menerangkan penggunaan jQuery binding event listener bind dan mengalih keluar event listener unbind. Kongsikan dengan semua orang untuk rujukan anda, butirannya adalah seperti berikut:

Di sini masing-masing gunakan bind(eventType,[data],Listener)//data sebagai parameter pilihan, acara yang terikat dengan kaedah one() dipadamkan secara automatik selepas dicetuskan sekali, unbind(eventType,Listener),

Contoh:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<title>unbind(eventType,listener)</title>
<style type="text/css">
<!--
img{
 border:1px solid #000000;
}
input{
 border:1px solid #570000;
}
-->
</style>
<script language="javascript" src="jquery.min.js"></script>
<script language="javascript">
$(function(){
 var fnMyFunc1; //函数变量
 $("img")
 .bind("click",fnMyFunc1 = function(){ //赋给函数变量
  $("#show").append("<div>点击事件1</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件2</div>");
 })
 .bind("click",function(){
  $("#show").append("<div>点击事件3</div>");
 });
 $("input[type=button]").click(function(){
 $("img").unbind("click",fnMyFunc1); //移除事件监听myFunc1
 });
});
</script>
</head>
<body>
 <img src="11.jpg"> <input type="button" value="移除事件1">
 <div id="show"></div>
</body>
</html>

Salin selepas log masuk

Lihat kod ujian ini sekali lagi:

<body>
<input type="button" name="aaa" value="点击我">
<input type="checkbox" name="checkbox1">
</body>

Salin selepas log masuk

Kod JQuery:

$().ready(function(){
for (var i = 0; i < 3; i++) {
$("input[type='button']").click(function(){
alert("aaaa");
});
}
}

Salin selepas log masuk

alert("aaaa") akan dilaksanakan tiga kali Dalam acara bersarang, jika anda tidak mahu melihat situasi sedemikian, anda perlu melumpuhkan acara peringkat atas pada masa ini, anda boleh memperkenalkan bind dan melepaskan fungsi untuk menyelesaikan masalah.

Memperkenalkan fungsi:

for (var i = 0; i < 3; i++) {
$("input[type='button']").unbind("click");
$("input[type='button']").bind("click", function(){
alert("aaa");
});
}

Salin selepas log masuk

alert("aaa"); hanya dilaksanakan sekali.

Kaedah bind() menambah satu atau lebih pengendali acara pada elemen yang dipilih dan menentukan fungsi untuk dijalankan apabila peristiwa berlaku
Kaedah unbind() mengalih keluar pengendali acara bagi elemen yang dipilih. Keupayaan untuk mengalih keluar semua atau pengendali acara terpilih, atau menamatkan pelaksanaan fungsi tertentu apabila peristiwa berlaku.

event ialah jenis acara, jenisnya termasuk: blur, flcus, load, resize, scroll, unload, click, dblclikc, mousedown, mouseup, mousemove, mouseover, mouseout, mouseenter, mouseleave, change , pilih , serahkan, kekunci kekunci, tekan kekunci, kekunci kekunci, ralat, dsb., sudah tentu ia juga boleh menjadi nama tersuai.

data ialah parameter pilihan dan nilai atribut event.data dihantar ke objek data tambahan objek acara.
fungsi ialah fungsi pemprosesan yang digunakan untuk mengikat.

Tatabahasa:

$(selector).bind(acara,data,fungsi)

Acara dan fungsi mesti menunjuk kepada coretan kod berikut untuk penjelasan:

Contoh 1: Padamkan semua acara p

Salin kod Kod adalah seperti berikut:

$("p").unbind();

Contoh 2: Padamkan acara klik p

Salin kod Kod adalah seperti berikut:

$("p").unbind("click");

Contoh 2: Fungsi ujian dicetuskan selepas memadamkan peristiwa klik unsur p dan fungsi ujian dicetuskan selepas menambah peristiwa klik unsur p

$("p").unbind("click",test);
$("p").bind("click",test);

Salin selepas log masuk

Nota: Untuk mentakrifkan .bind() anda mesti menentukan acara dan fungsi apa

Sekarang mari kita lihat demo ringkas Keseluruhan div mempunyai klik untuk meruntuhkan dan mengembangkan acara Jika anda ingin mengklik pada pautan tetapi tidak mencetuskan acara klik div, anda perlu melumpuhkan acara klik div apabila pautan. dicetuskan Di sini I Acara tetikus pautan digunakan untuk menyahikat dan memadam acara div. Ini belum berakhir Pada masa ini, selagi tetikus memasuki kawasan pautan, acara klik div akan dipadamkan Kami juga perlu menambah pemulihan acara klik div apabila tetikus bergerak keluar kawasan pautan. Kodnya adalah seperti berikut:

$(function(){ var Func = function(){
  $(".com2").toggle(200); }
  $(".test").click(Func)
  $(".test a").mouseenter(function(){
    $(".test").unbind(); //删除.test的所有事件
  });
  $(".test a").mouseleave(function(){
    $(".test").bind("click",Func); //添加click事件
  });
});

Salin selepas log masuk

acara ialah jenis acara
…
fungsi ialah fungsi pemprosesan yang digunakan untuk mengikat.

Pembaca yang berminat dengan lebih banyak kandungan yang berkaitan dengan acara jQuery boleh menyemak topik khas tapak ini: "Ringkasan penggunaan dan teknik acara biasa jQuery"

Saya harap artikel ini akan membantu semua orang dalam pengaturcaraan jQuery.