在javascript或者jQuery中绑定按钮点击事件,和在HTML 标签中直接调用onclick属性有什么区别?
2016-04-06 15:47
1001 查看
RT,做Web开发经常能遇到需要给一个按钮绑定一个点击事件的情况。
例如HTML标签:
第一种,如果使用jQuery绑定点击事件的一种做法是:
第二种,纯js的做法可以是这样:
第三种,我们也可以直接在button标签中使用onclick,例如:
同时在head或者单独的js文件中定义dosomething()
请问从响应速度,后期维护等方面来看哪一种方法是best practice? 或者在什么情况下这几种方法最合适?
第一个回答:
HTML或原生js是单一对应绑定的,绑多了只留最后一个。jQuery是追加绑定的,绑多少执行多少。这个在每一本jQuery的书中都是首先提到的事情。
在单一绑定的条件下,由于jQuery底层其实也是js实现,所以速度区别并不大。至少“绑定”这个环节并不会成为速度的瓶颈。
总有人认为jQuery只是一堆无用的语法糖……但事实上,按照二八规律,至少80%以上的程序员,在做负载等要求不那么严格的“小程序”。所以从维护的角度上,我建议用jQuery绑定,简单清楚,最容易维护。
原生js,这是真正的熟练者的工具,如果能写明白那可能更不错。
唯一不能容忍的是HTML中用onclick事件混杂js。这样做的结果就是html前端和js前端的工作混在了一起,难以分离工作任务,进而难以维护,“项目毁于各部门的扯皮和推诿之中”。这种做法临时调试可以,但如果正式成品中大范围出现,那么html和js部分的责任人都必须检讨。
——————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————
第二个回答:
第一种和第二种的效果是一样,可以附加多个事件处理函数,并不是只有使用jquery才能做到。 第三种方法不推荐使用,原则上HTML代码只能体现网页的结构,具体的行为应该使用javascript代码进行绑定。
除非页面上绑定事件的元素超过上万个,否则响应速度的时候就不必纠结了,只做个事件绑定还是很快的。我测试了一下,使用addEventListener绑定3000次,耗时3-4毫秒。
如果项目中统一使用jQuery的话,建议使用第一种做法,顺便还解决了IE的不兼容问题。
例如HTML标签:
<button type="submit" id="foo">Bar</button>
第一种,如果使用jQuery绑定点击事件的一种做法是:
$("#foo").click(function(event) { /* Act on the event */});
第二种,纯js的做法可以是这样:
document.getElementById('#foo').addEventListener('click', function() { /* Act on the event */}, false);
第三种,我们也可以直接在button标签中使用onclick,例如:
<button id="foo" onclick="dosomething()">Bar</button>
同时在head或者单独的js文件中定义dosomething()
全选<button href="javascript:void(0);" _xhe_href="javascript:void(0);" class="copyCode btn btn-xs" data-clipboard-text="" function="" dosomething(){="" *="" act="" on="" the="" event="" }"="" data-toggle="tooltip" data-placement="bottom" title="" style="color: rgb(255, 255, 255); font-style: inherit; font-variant: inherit; font-stretch: inherit; font-size: 12px; line-height: 1.5; font-family: inherit; margin: 0px 0px 0px 5px; overflow: visible; cursor: pointer; vertical-align: middle; border: 1px solid transparent; white-space: nowrap; padding-right: 5px; padding-left: 5px; border-radius: 3px; -webkit-user-select: none; box-shadow: rgba(0, 0, 0, 0.2) 0px 1px 2px; background-image: none; background-color: rgba(0, 0, 0, 0.74902);">复制放进笔记[code]function dosomething(){/* Act on the event */}
请问从响应速度,后期维护等方面来看哪一种方法是best practice? 或者在什么情况下这几种方法最合适?
第一个回答:
HTML或原生js是单一对应绑定的,绑多了只留最后一个。jQuery是追加绑定的,绑多少执行多少。这个在每一本jQuery的书中都是首先提到的事情。
在单一绑定的条件下,由于jQuery底层其实也是js实现,所以速度区别并不大。至少“绑定”这个环节并不会成为速度的瓶颈。
总有人认为jQuery只是一堆无用的语法糖……但事实上,按照二八规律,至少80%以上的程序员,在做负载等要求不那么严格的“小程序”。所以从维护的角度上,我建议用jQuery绑定,简单清楚,最容易维护。
原生js,这是真正的熟练者的工具,如果能写明白那可能更不错。
唯一不能容忍的是HTML中用onclick事件混杂js。这样做的结果就是html前端和js前端的工作混在了一起,难以分离工作任务,进而难以维护,“项目毁于各部门的扯皮和推诿之中”。这种做法临时调试可以,但如果正式成品中大范围出现,那么html和js部分的责任人都必须检讨。
——————————————————————————————————————————————————————————————————
——————————————————————————————————————————————————————————————————
第二个回答:
第一种和第二种的效果是一样,可以附加多个事件处理函数,并不是只有使用jquery才能做到。 第三种方法不推荐使用,原则上HTML代码只能体现网页的结构,具体的行为应该使用javascript代码进行绑定。
除非页面上绑定事件的元素超过上万个,否则响应速度的时候就不必纠结了,只做个事件绑定还是很快的。我测试了一下,使用addEventListener绑定3000次,耗时3-4毫秒。
如果项目中统一使用jQuery的话,建议使用第一种做法,顺便还解决了IE的不兼容问题。
相关文章推荐
- jquery学习之add()
- jQuery中height()、innerheight()、outerheight()有什么不同
- 使用 jQuery 复制文字到剪贴板的技巧
- 使用JQuery Mobile时,解决fieldset在页面缩小时不会换行
- JQuery跨域Ajax
- jquery 轮播图
- jQuery诞生记-原理与机制
- jQuery.extend 函数详解
- jquery 获取 combo box 中的值
- jquery中attr和prop的区别
- jQuery validate 添加表单验证方法
- php+jquery+ajax+json的一个最简单实例
- 如何自己开发一款js或者jquery插件
- JQuery_$(document).ready() 与 $(window).load()方法比较
- jQuery/Ajax/PHP/Json 的一个综合例子
- jQuery的ajaxStart方法和ajaxStop方法
- 关于jquery的$.extend(true,{},m,n)的一个小问题
- JQuery中的push和join
- 在jquery的ajax中添加自定义的header信息
- JqueryUI拖拽——”放“API