JavaScript中利用jQuery綁定事件的幾種方式小結(jié)

    這篇文章主要介紹了JavaScript中利用jQuery綁定事件的幾種方式小結(jié),包括不調(diào)用jQuery的"原生js"實(shí)現(xiàn)方式,需要的朋友可以參考下
    開發(fā)過程中經(jīng)常要給DOM元素添加一些事件，下面介紹幾種方式：
    先寫幾個(gè)好看的button
    //引入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>
    效果如下：
    
    1、直接在btn1使用onclick，這種方式稱為內(nèi)聯(lián)事件，簡單粗暴，好處是可以清晰地看到button綁定了click事件；這種方式等同于：(element).onclick；
    這種方式的缺點(diǎn)，一個(gè)元素只能指定一個(gè)內(nèi)聯(lián)事件，添加了這段代碼之后會(huì)發(fā)現(xiàn)onclick="alert('hello btn1');"被覆蓋了：
    (function(){
      var _btn1 = document.getElementById('btn1'),
        _tips = document.getElementById('tips');
        _btn1.onclick=function(){
          _tips.innerHTML='hello world~';
        };
    })();
    2、使用原生JS給多個(gè)元素綁定事件，在 IE 9 之前的版本中，需要使用 attachEvent替代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、第二種方式邏輯比較簡單，逼格會(huì)高一點(diǎn)，但是代碼量比較多，而且還需要考慮IE的兼容性問題，由于我們的項(xiàng)目一般都會(huì)使用到JQuery，所以就可以這樣寫了：
    $("#btn4").click(function(){
      alert("hello btn4");
    });
    $("#btn5").on("click",function(){
      alert("hello btn5");
    });
    上面使用到的on和bind方法效果是一樣的；
    4、使用on，給多個(gè)元素綁定一個(gè)或多個(gè)事件：
    $("#btn-list").on("click","input",function(evt){
      alert("hello "+ evt.target.id);
    });
    這是我現(xiàn)在在開發(fā)中最常用的一種方法，有個(gè)好處，舉個(gè)栗子：
    /*動(dòng)態(tài)添加幾個(gè)button*/
    (function(){
      for(var i=8;i<10;i++){
        $("#btn-list").append("<input type='button' id='btn"+i+"' value='OK"+i+"'>");
      }
    })();
    這樣動(dòng)態(tài)添加元素的時(shí)候可以自動(dòng)添加click事件，比如我們經(jīng)常使用AJAX加載一些數(shù)據(jù)動(dòng)態(tài)添加到頁面上，這樣就簡單多了。
    另外：使用原生JS利用事件委托實(shí)現(xiàn)也比較簡單
    <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);
    })();