Summary of several ways to bind events using jQuery in JavaScript_jquery

During the development process, it is often necessary to add some events to DOM elements. Here are several ways:

Write some nice buttons first

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

The effect is as follows:

1. Use onclick directly in btn1. This method is called an inline event. It is simple and crude. The advantage is that you can clearly see that the button is bound to the click event; this method is equivalent to: (element).onclick;

The disadvantage of this method is that an element can only specify one inline event. After adding this code, you will find that onclick="alert('hello btn1');" is overwritten:

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

2. Use native JS to bind events to multiple elements. In versions before IE 9, you need to use attachEvent instead of 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. The second method has simpler logic and higher quality, but the amount of code is larger, and the compatibility of IE needs to be considered. Since our projects generally use JQuery, we can write it like this Now:

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

The on and bind methods used above have the same effect;

4. Use on to bind one or more events to multiple elements:

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

This is the most commonly used method in my development. It has an advantage. Here is an example:

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

In this way, click events can be automatically added when adding elements dynamically. For example, we often use AJAX to load some data and add it dynamically to the page, which is much simpler.

In addition: it is relatively simple to use native JS to implement event delegation,

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