引言
button点击事件有一个type属性，默认type是submit，有时候使用默认会出现页面自动刷新问题。
代码语言：javascript复制<button class="btn btn-primary" id="btnSubmit" name="btnSubmit"><i class="fa fa-save"></i>确定</button>Internet Explorer 的默认类型是 "button"，而其他浏览器中（包括 W3C 规范）的默认值是 "submit"。这样造成了页面自动刷新。
代码语言：javascript复制<button class="btn btn-primary" type="button" id="btnSubmit" name="btnSubmit"><i class="fa fa-save"></i>确定</button>原因分析：
代码语言：javascript复制button,input type=button按钮在IE和w3c，firefox浏览器区别：
当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。
但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。方法一：将button标签更换为input
代码语言：javascript复制<input class="layui-btn test" >test</input>方法二：
代码语言：javascript复制<button type="button" class="layui-btn test" >test</button>现在程序最好兼容各个主流浏览器，故请始终为按钮规定 type 属性。
知道了button有两种类型后，我们来看具体使用。
第一种点击事件场景(动态元素)
这种场景适合于动态创建元素后，点击事件。
这里的点击事件是指单纯的点击事件，而不是提交事件，或者是数据表格中内嵌的button，对于这两者，layui是有lay-submit和lay-event这个属性进行支持的，所以这里只能使用最原始的js和jq进行监听点击事件。 layui中button点击事件，分两种：
第一种，js的监听：
代码语言：javascript复制<button class="layui-icon layui-icon-export" id="withExport"></button>回调函数：
代码语言：javascript复制$(document).on('click',"#withExport",function(){
layer.msg("按钮点击");
});第二种button绑定事件(静态和动态)
第二种，jQuery的监听：
代码语言：javascript复制<button class="layui-icon layui-icon-export" id="withExport"></button>$("#withExport").click(function(){
layer.msg("点击事件");
});这种适合页面加载时就存在的元素。
关于button绑定事件可以总结出以下三种，1和3是静态和动态的区别。
代码语言：javascript复制HTML中为button绑定事件的方式有三种。
例如以下标签：
<button type="submit" id="btn_submit"> submit </button>
一、使用jQuery进行绑定
$('#btn_submit').click(function(){
});
# 这种是无法在动态创建元素的时候使用。
二、使用原生js绑定
document.getElementById("#btn_submit").addEventListener(‘click’, function(){
}, false);
三、直接在button标签中使用onclick绑定
<button type="submit" id="btn_submit" οnclick="btnAction()"> submit </button>
此时，type="button"也可以。
然后在<script>标签中定义btnAtion的方法
<script>
function btnAction()
{ }
</script> 比较： 1、使用jquery绑定，代码简洁，使用方便，事件绑定方式为追加绑定，即绑定多少个方法就执行多少个方法。 在单一绑定的条件下，由于jQuery底层其实也是js实现，所以速度区别并不大。至少“绑定”这个环节并不会成为 速度的瓶颈，除非页面上绑定事件的元素超过上万个，否则响应速度就不必纠结了，只做个事件绑定还是很快的。 所以在做负载等要求不那么严格的“小程序”，从维护的角度上，建议用jQuery绑定，简单清楚，最容易维护。 2、使用原生js，代码量稍大，事件绑定方式为复写绑定，即绑定多个只保留最后一个绑定的方法。 原生js，这是真正的熟练者的工具，如果能写明白更好。 3、使用onclick标签绑定，代码量不大，但是html前端和js前端混在一起，不易于维护。 原则上HTML代码只能体现网页的结构，具体的行为应该使用JavaScript代码进行绑定。 如果在HTML中用onclick事件混杂js，会导致html前端和js前端的工作混在了一起，难以分离工作任务， 进而难以维护。这种做法临时调试可以，但如果正式成品中不应该出现， 所以不建议使用onclick标签方式进行绑定事件。
备注：如果说是动态创建的元素，那么只能使用第三种，如果是页面加载时就存在的元素，可以使用第一种。
总结
在web开发中，对按钮的操作事件比较频繁，搞清楚使用方法，才能更好的解决实际需求。 另外，欢迎加入学习沟通群~
