JavaScript_jquery で jQuery を使用してイベントをバインドするいくつかの方法のまとめ

開発プロセス中、DOM 要素にいくつかのイベントを追加することが必要になる場合があります。以下にいくつかの方法があります。

最初に素敵なボタンをいくつか書いてください

//引入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>

効果は次のとおりです:

1. btn1 で直接 onclick を使用します。このメソッドはシンプルで粗雑ですが、このメソッドが以下と同等であることがわかります。要素).onclick;

このメソッドの欠点は、要素にインライン イベントを 1 つしか指定できないことです。このコードを追加すると、onclick="alert('hello btn1');" が上書きされることがわかります。

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

2. ネイティブ JS を使用してイベントを複数の要素にバインドするには、addEventListener

の代わりにattachEventを使用する必要があります。

(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. 2 番目の方法はロジックがシンプルで高品質ですが、コード量が多くなり、IE との互換性を考慮する必要があるため、次のように記述できます。 >

上記で使用した on メソッドと binding メソッドは同じ効果があります。

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

4. on を使用して 1 つ以上のイベントを複数の要素にバインドします:

これは私の開発で最もよく使用される方法です。これには利点があります。

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

この方法では、要素を動的に追加するときにクリック イベントを自動的に追加できます。たとえば、AJAX を使用してデータをロードし、それをページに動的に追加する方がはるかに簡単です。

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

さらに: ネイティブ JS を使用してイベント委任を実装するのは比較的簡単です。

<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);
})();