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

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

WBOY

Freigeben： 2016-05-16 15:12:04

Original

1240 Leute haben es durchsucht

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>

Nach dem Login kopieren

Der Effekt ist wie folgt:

201636142316641.png (263×69)

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren

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

Nach dem Login kopieren