Résumé de plusieurs façons de lier des événements à l'aide de jQuery dans JavaScript_jquery

Pendant le processus de développement, il est souvent nécessaire d'ajouter des événements aux éléments DOM. Voici plusieurs manières :

Écrivez d'abord de jolis boutons

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

L'effet est le suivant :

1. Utilisez onclick directement dans btn1. Cette méthode est appelée un événement en ligne. L'avantage est que vous pouvez clairement voir que le bouton est lié à l'événement click ; élément).onclick;

L'inconvénient de cette méthode est qu'un élément ne peut spécifier qu'un seul événement en ligne. Après avoir ajouté ce code, vous constaterez que onclick="alert('hello btn1');" est écrasé :

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

2. Utilisez JS natif pour lier des événements à plusieurs éléments. Dans les versions antérieures à IE 9, vous devez utiliser attachEvent au lieu de 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. La deuxième méthode a une logique plus simple et une qualité supérieure, mais la quantité de code est plus importante et la compatibilité d'IE doit être prise en compte Puisque nos projets utilisent généralement JQuery, nous pouvons l'écrire comme ceci :

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

Les méthodes on et bind utilisées ci-dessus ont le même effet

4. Utilisez on pour lier un ou plusieurs événements à plusieurs éléments :

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

C'est la méthode la plus couramment utilisée dans mon développement. Elle présente un avantage.

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

De cette façon, les événements de clic peuvent être automatiquement ajoutés lors de l'ajout dynamique d'éléments. Par exemple, nous utilisons souvent AJAX pour charger certaines données et les ajouter dynamiquement à la page, ce qui est beaucoup plus simple.

De plus : il est relativement simple d'utiliser du JS natif pour mettre en œuvre la délégation d'événements,

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