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

这篇文章主要介绍了JavaScript中利用jQuery绑定事件的几种方式小结,包括不调用jQuery的"原生js"实现方式,需要的朋友可以参考下

开发过程中经常要给DOM元素添加一些事件，下面介绍几种方式：

先写几个好看的button

 //引入JQuery

效果如下：

201636142316641.png-600 (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

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

这样动态添加元素的时候可以自动添加click事件，比如我们经常使用AJAX加载一些数据动态添加到页面上，这样就简单多了。

另外：使用原生JS利用事件委托实现也比较简单，

  css
js
html
 (function(){ var a=document.getElementById('list'); a.addEventListener('click',function(e){ var b = e.target; alert(b.innerHTML); },false); })();

以上就是JavaScript中利用jQuery绑定事件的几种方式小结的详细内容，更多请关注0133技术站其它相关文章！