Bagaimana untuk melaksanakan penyingkiran acara dalam DOM dalam JQuery_jquery

Contoh dalam artikel ini menerangkan kaedah pengalihan keluar acara dalam DOM dalam JQuery. Kongsikan dengan semua orang untuk rujukan anda. Butirannya adalah seperti berikut:

Anda boleh mengikat berbilang acara pada elemen yang sama, atau anda boleh mengikat acara yang sama kepada berbilang elemen. Andaikan terdapat elemen pada halaman web.

$(function(){
 $('#btn').bind("click", function(){
     $('#test').append("<p>我的绑定函数1</p>");
   }).bind("click", function(){
     $('#test').append("<p>我的绑定函数2</p>");
   }).bind("click", function(){
     $('#test').append("<p>我的绑定函数3</p>");
  });
})

1． Alih keluar acara yang didaftarkan sebelum ini pada elemen butang

Mula-mula lihat kod di bawah Klik butang "Padam Semua Acara" untuk memadamkan acara btn di atas:

<script type="text/javascript">
 $(function(){
  $('#btn').bind("click", function(){
      $('#test').append("<p>我的绑定函数1</p>");
    }).bind("click", function(){
      $('#test').append("<p>我的绑定函数2</p>");
    }).bind("click", function(){
      $('#test').append("<p>我的绑定函数3</p>");
   });
  $('#delAll').click(function(){
    $('#btn').unbind("click");
  });
 })
</script>

<button id="btn">点击我</button>
<div id="test"></div>
<button id="delAll">删除所有事件</button>

Mari kita lihat struktur sintaks kaedah unbind(): unbind([type] [, data]);

Parameter pertama ialah jenis acara, dan parameter kedua ialah fungsi yang akan dialih keluar Butirannya adalah seperti berikut:

Jika tiada parameter, padamkan semua peristiwa terikat.
Jika jenis acara disediakan sebagai parameter, hanya peristiwa terikat jenis itu dialih keluar.
Jika fungsi pengendali diluluskan apabila pengikatan diluluskan sebagai parameter kedua, hanya pengendali peristiwa khusus ini akan dipadamkan.

2． Alih keluar salah satu acara elemen Mula-mula anda perlu menentukan pembolehubah untuk fungsi pemprosesan tanpa nama ini.

<script type="text/javascript">
 $(function(){
  $('#btn').bind("click", myFun1 = function(){
      $('#test').append("<p>我的绑定函数1</p>");
    }).bind("click", myFun2 = function(){
      $('#test').append("<p>我的绑定函数2</p>");
    }).bind("click", myFun3 = function(){
      $('#test').append("<p>我的绑定函数3</p>");
   });
  $('#delTwo').click(function(){
    $('#btn').unbind("click",myFun2);
  });
 })
</script>

<button id="btn">点击我</button>
<div id="test"></div>
<button id="delTwo">删除第二个事件</button>

Selain itu, untuk situasi di mana pengikatan hanya perlu dicetuskan sekali dan kemudian dilepaskan serta-merta, JQuery menyediakan kaedah trengkas - kaedah one(). Kaedah one() boleh mengikat fungsi pengendali kepada elemen. Apabila fungsi pemprosesan dicetuskan sekali, ia dipadamkan serta-merta. Iaitu, pada setiap objek, fungsi pengendali acara hanya akan dilaksanakan sekali.

Struktur kaedah one() adalah serupa dengan kaedah bind() dan penggunaannya adalah sama dengan kaedah bind() Struktur sintaksnya adalah seperti berikut: satu (jenis, [data], fn) ;

<script type="text/javascript">
 $(function(){
  $('#btn').one("click", function(){
      $('#test').append("<p>我的绑定函数1</p>");
    }).one("click", function(){
      $('#test').append("<p>我的绑定函数2</p>");
    }).one("click", function(){
      $('#test').append("<p>我的绑定函数3</p>");
   });
 })
</script>

<button id="btn">点击我</button>
<div id="test"></div>

Selepas menggunakan kaedah one() untuk mengikat acara klik pada elemen , fungsi pemprosesan hanya akan dilaksanakan apabila pengguna mengklik butang untuk kali pertama dan klik berikutnya tidak akan berfungsi lagi.

Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.