Analisis penggunaan acara Bind() dalam JQuery_jquery

Artikel ini menganalisis penggunaan acara Bind() dalam JQuery dengan contoh. Kongsikan dengan semua orang untuk rujukan anda. Analisis khusus adalah seperti berikut:

Mari kita lihat definisinya dahulu:

.bind( eventType [, eventData], handler(eventObject))

Fungsi utama kaedah

.Bind() adalah untuk menyediakan beberapa gelagat kaedah peristiwa pada objek yang terikat kepadanya. Makna tiga parameternya dalam istilah adalah seperti berikut:

eventType ialah jenis acara jenis rentetan, yang merupakan acara yang anda perlu ikat. Jenis sedemikian boleh termasuk yang berikut: kabur, fokus, fokus, fokus, muatkan, ubah saiz, tatal, bongkar, klik, dblklik, tetikus turun, tetikus atas, tetikus alih, alih tetikus, tetikus keluar, tetikus masuk, tetikus biarkan, tukar, pilih, serahkan, kekunci kekunci, tekan kekunci , keyup, ralat. Apa yang perlu diperhatikan di sini ialah kaedah acara dalam JavaScript digunakan di sini, bukan dalam JQuery Kaedah acara dalam JQuery semuanya mempunyai tambahan "on" di hadapan JavaScript, seperti onclick, onblur, dll.

Parameter eventData ialah parameter pilihan, tetapi ia jarang digunakan dalam masa biasa. Jika parameter ini disediakan, maka kita boleh menghantar beberapa maklumat tambahan kepada fungsi pengendali acara. Parameter ini mempunyai kegunaan yang sangat baik, iaitu untuk menangani masalah yang disebabkan oleh penutupan. Saya akan berikan contoh nanti.

Pengendali ialah nombor pemprosesan yang digunakan untuk mengikat Malah, ia juga merupakan fungsi panggil balik, kaedah yang sepadan selepas memproses data.

1. Peristiwa ikatan ringkas () pertama---Hello Word

<input id="BtnFirst"type="button"value="Click Me"/>
<script>
$(function () {
 $("#BtnFirst").bind("click",function(){
  alert("Hello World");
 });
})
</script>

Selepas membuka halaman, klik butang "Klik Saya" dan "Hello World" akan muncul. Ini adalah acara mengikat kami yang paling mudah. Ia sangat mudah.

2. Mengikat berbilang acara

Kami boleh mengikat berbilang acara melalui bind() (sebenarnya, ini ialah pengaturcaraan rantaian yang sangat terkenal dalam JQuery dan Linq). Fungsi utama yang dilaksanakan ialah apabila kita mengklik, "Hello World" muncul, dan apabila kita meninggalkan butang, div dipaparkan.

<div>
<input id="BtnFirst"type="button"value="Click Me"/></div>
<div id="TestDiv"style=" width:200px; height:200px; display:none; ">
</div>
<script>
$(function () {
 $("#BtnFirst").bind("click", function () {
  alert("Hello World");
 }).bind("mouseout", function () {
  $("#TestDiv").show("slow");
 });
})
</script>

Halaman kod ini mudah difahami Apabila butang diklik, "Hello World" muncul dan apabila anda keluar, div dipaparkan. Untuk animasi dalam JQuery, anda boleh menggunakan "perlahan", "cepat" dan "normal". Anda juga boleh menetapkan milisaat yang berkaitan.

3.bind() objek acara

Fungsi panggil balik pengendali boleh menerima parameter Apabila fungsi ini dipanggil, objek acara JavaScript akan dihantar sebagai parameter.

Objek acara ini biasanya merupakan parameter yang tidak perlu dan boleh ditinggalkan, kerana apabila fungsi pengendali acara terikat, anda boleh mengetahui dengan jelas apa yang harus dilakukan apabila ia dicetuskan, dan biasanya maklumat yang mencukupi boleh diperolehi. Kadangkala, walau bagaimanapun, adalah perlu untuk mendapatkan lebih banyak maklumat tentang persekitaran pengguna semasa permulaan acara.

Beri saya contoh daripada laman web rasmi JQuery:

<style> 
 p {background:yellow;font-weight:bold;cursor:pointer;3 padding:5px;}
 p.over {background:#ccc;}
 span {color:red;}
</style>
<p>Click or double click here.</p>
<span></span>
<script>
 $("p").bind("click", function(event){
  var str = "( " + event.pageX + ", " + event.pageY + " )";
  $("span").text("Click happened! " + str);
 });
 $("p").bind("dblclick", function(){
  $("span").text("Double-click happened in " + this.nodeName);
 });
 $("p").bind("mouseenter mouseleave", function(event){
  $(this).toggleClass("over");
 });
</script>

Fungsi utama di sini ialah untuk memaparkan koordinat semasa berbanding halaman dalam teg span apabila pengguna mengklik pada objek p Acara acara digunakan di sini. Masukkan parameter.

4.unbind() acara

unbind([type],[data],Handler) ialah operasi terbalik bind() dan mengalih keluar acara terikat daripada setiap elemen padanan. Jika tiada parameter, semua peristiwa terikat akan dipadamkan. Anda boleh menyahikat acara tersuai yang anda daftarkan dengan bind(). Jika jenis acara disediakan sebagai parameter, hanya peristiwa terikat jenis itu dialih keluar. Jika pengendali diluluskan sebagai hujah kedua semasa mengikat, hanya pengendali peristiwa tertentu itu akan dialih keluar.

<body onclick="MyBodyClick()">
 <div onclick="MyClickOut()">
  <div onclick="MyClickInner()">
   <span id="MySpan">I love JQuery!! </span>
  </div>
 </div>
 <span id="LooseFocus">失去焦点</span>
</body>
<script>
function MyClickOut() {
 alert("outer Div");
}
function MyClickInner() {
 alert("Inner Div");
}
function MyBodyClick() {
 alert("Body Click");
}
var foo = function () {
 alert("I'm span.");
}
$(function () {
 $("#MySpan").bind("click", foo);
})  
$(function () {
 $("#LooseFocus").unbind("click", foo);
})
</script>

Kod di atas juga mudah difahami Apabila tetikus pengguna kekal pada span, acara klik span dibatalkan. Jadi, pada akhirnya ia hanya akan muncul amaran di dalam badan.

Akhir sekali, mari kita fahami secara ringkas penggunaan satu () acara Sebenarnya, satu dan mengikat adalah sama, kedua-duanya dijana untuk acara mengikat. Satu pada dasarnya sama seperti bind. Perbezaannya ialah apabila memanggil jQuery.event.add, fungsi pemprosesan acara berdaftar dilaraskan sedikit. Satu dipanggil jQuery.event.proxy untuk memproksi fungsi pemprosesan acara masuk. Apabila acara mencetuskan panggilan ke fungsi ejen ini, acara itu mula-mula dipadamkan daripada cache, dan kemudian fungsi acara berdaftar dilaksanakan. Berikut ialah permohonan penutupan, di mana rujukan fungsi acara yang didaftarkan oleh fn diperolehi.

Peraturan Penggunaan:

one(type,[data],fn)

Ikat pengendali acara sekali pada acara tertentu (seperti klik) untuk setiap elemen yang dipadankan. Pengendali acara ini dilaksanakan sekali sahaja pada setiap objek. Peraturan lain adalah sama seperti fungsi bind(). Pengendali acara ini akan menerima objek acara, yang boleh digunakan untuk menghalang kelakuan lalai. Jika anda ingin membatalkan kelakuan lalai dan menghalang acara daripada menggelegak, pengendali acara mesti mengembalikan palsu.

Siarkan pelaksanaan kod bind dan satu masing-masing Pembaca boleh membuat sedikit perbandingan:

Pelaksanaan kod Bind():

bind : function(type, data, fn) { 
 return type == "unload" ? this.one(type,data,fn) : this.each(function(){
 //fn || data, fn && data实现了data参数可有可无 
  jQuery.event.add(this, type, fn || data, fn && data); 
 }); 
}

Pelaksanaan kod One():

one : function(type, data, fn) { 
 var one = jQuery.event.proxy(fn || data, function(event) { 
  jQuery(this).unbind(event, one); 
  return (fn || data).apply(this, arguments);
 //this->当前的元素 
 }); 
 return this.each(function() { 
  jQuery.event.add(this, type, one, fn && data); 
 }); 
}

5.最后呢，其实想在贴一个冒泡事件，因为在处理绑定事件的时候，如果调用内部的事件 有可能会触发外面的事件，所以给大伙一个借鉴吧。

这里可以参考一下javascript事件冒泡的文章：《JavaScript 事件冒泡简介及应用》。

简单的说，何为冒泡事件？其实，简单的理解是，也可以说是事件传播，它会从内部的控件广播到父类的元素，然后接着一直往上到祖先级别的元素。

则 冒泡实例代码：

<body onclick="MyBodyClick()">
 <div onclick="MyClickOut()">
  <div onclick="MyClickInner()">
    <span id="MySpan">
     I love JQuery!!
    </span>
  </div>
 </div>
</body>
<script type="text/javascript">
 function MyClickOut() {
  alert("outer Div");
 }
 function MyClickInner() {
  alert("Inner Div");
 }
 function MyBodyClick() {    
  alert("Body Click");
 }
 $(function () {
  $("#MySpan").bind("click", function (event) {
   alert("I'm span");
   event.stopPropagation();
 });
</script>

希望本文所述对大家的jQuery程序设计有所帮助。