HTML中为button绑定事件的方式有三种。
例如以下标签：

<button type="submit" id="btn_submit"> submit </button>

一、使用jquery进行绑定

$('#btn_submit').click(function(){
});

二、使用原生js绑定

（注意：Internet Explorer 8 及更早IE版本不支持 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支持。 这类浏览器版本要使用 attachEvent() 方法来添加事件）

document.getElementById("#btn_submit").addEventListener(‘click’, function(){
}, false);

补充：addEventListener的第三个参数是用于决定事件模型的，当父元素和子元素都绑定了事件时，这个参数决定先触发哪个事件，false为冒泡事件模型：即子元素绑定的事件先响应，父元素绑定的事件后相应，true问捕获事件模型，与冒泡事件模型执行顺序相反，如： 

<div id="test_div">
   <button type="button" value ="测试事件顺序" name="测试事件顺序" id="test_button">测试事件顺序</button>
</div>
 
document.getElementById('test_div').addEventListener('click', function () {
   console.log('div');
},true)
document.getElementById('test_button').addEventListener('click', function(){
   console.log('test1');
},false);

对事件模型不了解的可以查看改链接：JavaScript事件捕获与事件冒泡原理 IE和DOM之间存在哪些主要差别 - dtdxrk - 博客园

三、直接在button标签中使用onclick绑定

<button type="submit" id="btn_submit" οnclick="btnAction()"> submit </button>

然后在<script>标签中定义btnAction的方法 

<script>
   function btnAction()
     { // 执行操作 }
</script>

比较

1、使用jquery绑定，代码简洁，使用方便，事件绑定方式为追加绑定，即绑定多少个方法就执行多少个方法。

在单一绑定的条件下，由于jQuery底层其实也是js实现，所以速度区别并不大。至少“绑定”这个环节并不会成为速度的瓶颈，除非页面上绑定事件的元素超过上万个，否则响应速度就不必纠结了，只做个事件绑定还是很快的。

所以在做负载等要求不那么严格的“小程序”，从维护的角度上，建议用jQuery绑定，简单清楚，最容易维护。

2、使用原生js，代码量稍大，事件绑定方式为复写绑定，即绑定多个只保留最后一个绑定的方法。

原生js，这是真正的熟练者的工具，如果能写明白更好。

3、使用onclick标签绑定，代码量不大，但是html前端和js前端混在一起，不易于维护。

原则上HTML代码只能体现网页的结构，具体的行为应该使用JavaScript代码进绑定。

如果在HTML中用onclick事件混杂js，会导致html前端和js前端的工作混在了一起，难以分离工作任务，进而难以维护。这种做法临时调试可以，但如果正式成品中不应该出现，所以不建议使用onclick标签方式进行绑定事件。

最后

以上就是整齐棒球为你收集整理的html中绑定点击事件的三种方法一、使用jquery进行绑定二、使用原生js绑定三、直接在button标签中使用onclick绑定比较的全部内容，希望文章能够帮你解决html中绑定点击事件的三种方法一、使用jquery进行绑定二、使用原生js绑定三、直接在button标签中使用onclick绑定比较所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。