Several ways of using jquery binding events in JavaScript summary _jquery

There are several ways to add events to DOM elements during the development process:

Write some nice button first.

Introduce 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, directly in the BTN1 use of onclick, this way called inline events, simple and rough, the advantage is that the button is clearly bound to the Click event, this way is equivalent to: (Element). onclick;

The disadvantage of this approach is that an element can only specify an inline event, and after adding this code, onclick= "alert (' Hello btn1 ') is found." Was covered:

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

2, the use of native JS to a number of elements binding events, in the version prior to IE 9, the need to use attachevent replacement 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 way the logic is relatively simple, the force will be higher, but more code, but also need to consider the compatibility of IE, because our project will generally use jquery, so you can write:

$ ("#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 one of the most commonly used methods I have in development, and one of the advantages of this is to raise a chestnut:

/* Dynamically add several button*/
(function () {for
  (var i=8;i<10;i++) {
    $ ("#btn-list"). Append ("<input type=") Button ' id= ' btn ' +i+ ' ' value= ' OK ' +i+ ' > ';
  }
();

This way, when adding elements dynamically, you can automatically add click events, such as we often use AJAX to load some data dynamically added to the page, which is much simpler.

In addition: the use of native JS, the use of event delegation is also relatively simple,

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