Ringkasan beberapa cara untuk mengikat acara menggunakan jQuery dalam JavaScript_jquery

Semasa proses pembangunan, selalunya perlu menambahkan beberapa acara pada elemen DOM Berikut ialah beberapa cara:

Tulis beberapa butang yang bagus dahulu

//引入JQuery
<script type="text/javascript" src="jquery-1.8.3.min.js"></script>
<span id="tips"></span>
<input type="button" id="btn1" value="OK1" onclick="alert('hello btn1');">
<input type="button" id="btn2" value="OK2" click-type="listener">
<input type="button" id="btn3" value="OK3" click-type="listener">
<input type="button" id="btn4" value="OK4">
<input type="button" id="btn5" value="OK5">
<div id="btn-list">
<input type="button" id="btn6" value="OK6">
<input type="button" id="btn7" value="OK7">
</div>

Kesannya adalah seperti berikut:

1. Gunakan onclick secara langsung dalam btn1 Kaedah ini adalah mudah dan kasar Kelebihannya ialah anda boleh melihat dengan jelas bahawa kaedah ini adalah bersamaan dengan: (. elemen).onclick;

Kelemahan kaedah ini ialah elemen hanya boleh menentukan satu acara sebaris Selepas menambah kod ini, anda akan mendapati bahawa onclick="alert('hello btn1');" ditimpa:

(function(){
  var _btn1 = document.getElementById('btn1'),
    _tips = document.getElementById('tips');
    _btn1.onclick=function(){
      _tips.innerHTML='hello world~';
    };
     
})();

2. Gunakan JS asli untuk mengikat acara kepada berbilang elemen Dalam versi sebelum IE 9, anda perlu menggunakan attachEvent dan bukannya addEventListener

.

(function(){
  var _btns=document.querySelectorAll("[click-type=listener]"), i = 0, len = _btns.length;
     for (i; i < len; ++i) {
      var _btn=_btns[i];
      _btn.addEventListener("click", function (evt) {
        var target = evt.target
        alert('hello '+target.id);
      });
    }
 
})();

3. Kaedah kedua mempunyai logik yang lebih mudah dan kualiti yang lebih tinggi, tetapi jumlah kod lebih besar, dan keserasian IE perlu dipertimbangkan Memandangkan projek kami biasanya menggunakan JQuery, kami boleh menulisnya seperti ini Sekarang:

$("#btn4").click(function(){
  alert("hello btn4");
});
 
$("#btn5").on("click",function(){
  alert("hello btn5");
});

Kaedah on and bind yang digunakan di atas mempunyai kesan yang sama

4. Gunakan pada untuk mengikat satu atau lebih acara kepada berbilang elemen:

$("#btn-list").on("click","input",function(evt){
  alert("hello "+ evt.target.id);
});

Ini adalah kaedah yang paling biasa digunakan dalam pembangunan saya. Ini adalah satu contoh:

/*动态添加几个button*/
(function(){
  for(var i=8;i<10;i++){
    $("#btn-list").append("<input type='button' id='btn"+i+"' value='OK"+i+"'>");
  }
})();

Dengan cara ini, acara klik boleh ditambah secara automatik apabila menambahkan elemen secara dinamik Contohnya, kami sering menggunakan AJAX untuk memuatkan beberapa data dan menambahkannya secara dinamik pada halaman, yang lebih mudah.

Selain itu: agak mudah untuk menggunakan JS asli untuk melaksanakan delegasi acara,

<ul id='list'>
  <li>css</li>
  <li>js</li>
  <li>html</li>
</ul>

(function(){
  var a=document.getElementById('list');
    a.addEventListener('click',function(e){
    var b = e.target; 
    alert(b.innerHTML);
  },false);
})();