Zusammenfassung verschiedener Möglichkeiten zum Binden von Ereignissen mithilfe von jQuery in JavaScript_jquery

Während des Entwicklungsprozesses ist es oft notwendig, einige Ereignisse zu DOM-Elementen hinzuzufügen. Hier gibt es mehrere Möglichkeiten:

Schreiben Sie zuerst ein paar schöne Schaltflächen

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

Der Effekt ist wie folgt:

1. Diese Methode wird als Inline-Ereignis bezeichnet. Der Vorteil besteht darin, dass die Schaltfläche an das Klick-Ereignis gebunden ist. element).onclick;

Der Nachteil dieser Methode besteht darin, dass ein Element nur ein Inline-Ereignis angeben kann. Nach dem Hinzufügen dieses Codes werden Sie feststellen, dass onclick="alert('hello btn1');" überschrieben wird

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

2. Verwenden Sie natives JS, um Ereignisse an mehrere Elemente zu binden. In Versionen vor IE 9 müssen Sie attachmentEvent anstelle von addEventListener verwenden

(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. Die zweite Methode hat eine einfachere Logik und eine höhere Qualität, erfordert jedoch mehr Code und die Kompatibilität von IE muss berücksichtigt werden. Da unsere Projekte im Allgemeinen JQuery verwenden, können wir sie jetzt wie folgt schreiben:

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

Die oben verwendeten Methoden on und bind haben den gleichen Effekt

4. Verwenden Sie on, um ein oder mehrere Ereignisse an mehrere Elemente zu binden:

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

Dies ist die in meiner Entwicklung am häufigsten verwendete Methode. Sie hat einen Vorteil:

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

Auf diese Weise können Klickereignisse automatisch hinzugefügt werden, wenn Elemente dynamisch hinzugefügt werden. Beispielsweise verwenden wir häufig AJAX, um einige Daten zu laden und dynamisch zur Seite hinzuzufügen, was viel einfacher ist.

Außerdem: Es ist relativ einfach, natives JS zur Implementierung der Ereignisdelegation zu verwenden,

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