JavaScript中利用jQuery绑定事件的几种方式小结

前端技术 2023/09/06 JavaScript

开发过程中经常要给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>

效果如下：

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


本文地址：https://www.stayed.cn/item/15393

转载请注明出处。

本站部分内容来源于网络,如侵犯到您的权益,请 联系我

我的博客

人生若只如初见，何事秋风悲画扇。

我的标签

随笔档案