首頁 >web前端 >js教程 >JavaScript中利用jQuery綁定事件的幾種方式小結_jquery

JavaScript中利用jQuery綁定事件的幾種方式小結_jquery

WBOY
WBOY原創
2016-05-16 15:12:041259瀏覽

開發過程中常常要為DOM元素增加一些事件,以下介紹幾種方式:

先寫幾個好看的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>

效果如下:

201636142316641.png (263×69)

1、直接在btn1使用onclick,這種方式稱為內聯事件,簡單粗暴,好處是可以清楚地看到button綁定了click事件;這種方式等同於:(element).onclick;

這種方式的缺點,一個元素只能指定一個內聯事件,添加了這段程式碼之後會發現onclick="alert('hello btn1');"被覆蓋了:

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

2、使用原生JS給多個元素綁定事件,在 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、第二種方式邏輯比較簡單,逼格會高一點,但是程式碼量比較多,而且還需要考慮IE的相容性問題,由於我們的專案一般都會使用到JQuery,所以就可以這樣寫了:

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

上面使用到的on和bind方法效果是一樣的;

4、使用on,給多個元素綁定一個或多個事件:

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

這是我現在在開發中最常用的一種方法,有個好處,舉個栗子:

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

這樣動態加入元素的時候可以自動加入click事件,例如我們常使用AJAX載入一些資料動態加入到頁面上,這樣就簡單多了。

另外:使用原生JS利用事件委託實作也比較簡單,

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


陳述:
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn