Rumah >hujung hadapan web >tutorial js >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
$(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
<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
Saya harap artikel ini akan membantu pengaturcaraan jQuery semua orang.