JavaScript中利用jQuery绑定事件的几种方式小结_jquery
程序员文章站
2022-04-08 16:57:29
...
开发过程中经常要给DOM元素添加一些事件,下面介绍几种方式:
先写几个好看的button
//引入JQuery
效果如下:
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"); } })();
这样动态添加元素的时候可以自动添加click事件,比如我们经常使用AJAX加载一些数据动态添加到页面上,这样就简单多了。
另外:使用原生JS利用事件委托实现也比较简单,
- css
- js
- html
下一篇: PHP如何使用Memcached命令
推荐阅读
-
jquery中获取元素的几种方式小结_jquery
-
jquery中获取元素的几种方式小结_jquery
-
浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
-
JavaScript:Ajax在Django中的应用、jquery事件绑定、jquery事件委托、serialize、serializeArray获取form的输入值
-
关于Jquery中的bind(),on()绑定事件方式总结
-
jQuery中bind和live以及delegate与on绑定事件的方式与区别详解
-
浅谈Jquery中的bind(),live(),delegate(),on()绑定事件方式
-
jquery中validate与form插件提交的方式小结_javascript技巧
-
JavaScript中利用jQuery绑定事件的几种方式小结_jquery
-
jQuery绑定事件的几种实现方式_jquery