开发者社区> 问答> 正文

在javascript或者jQuery中绑定按钮点击事件,和在HTML 标签中直接调用onclick属性有什么区别?

RT,做Web开发经常能遇到需要给一个按钮绑定一个点击事件的情况。

例如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()

function dosomething(){/* Act on the event */}
请问从响应速度,后期维护等方面来看哪一种方法是best practice? 或者在什么情况下这几种方法最合适?

展开
收起
小旋风柴进 2016-03-24 10:48:45 2725 0
1 条回答
写回答
取消 提交回答
  • HTML或原生js是单一对应绑定的,绑多了只留最后一个。jQuery是追加绑定的,绑多少执行多少。这个在每一本jQuery的书中都是首先提到的事情。

    在单一绑定的条件下,由于jQuery底层其实也是js实现,所以速度区别并不大。至少“绑定”这个环节并不会成为速度的瓶颈。

    总有人认为jQuery只是一堆无用的语法糖……但事实上,按照二八规律,至少80%以上的程序员,在做负载等要求不那么严格的“小程序”。所以从维护的角度上,我建议用jQuery绑定,简单清楚,最容易维护。

    原生js,这是真正的熟练者的工具,如果能写明白那可能更不错。

    唯一不能容忍的是HTML中用onclick事件混杂js。这样做的结果就是html前端和js前端的工作混在了一起,难以分离工作任务,进而难以维护,“项目毁于各部门的扯皮和推诿之中”。这种做法临时调试可以,但如果正式成品中大范围出现,那么html和js部分的责任人都必须检讨。

    2019-07-17 19:12:14
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
JavaScript异步编程 立即下载
Delivering Javascript to World 立即下载
编程语言如何演化-以JS的private为例 立即下载