Layui前端框架中的Button添加Click事件
引⾔
button点击事件有⼀个type属性，默认type是submit，有时候使⽤默认会出现页⾯⾃动刷新问题。
<button class="btn btn-primary" id="btnSubmit" name="btnSubmit"><i class="fa fa-save"></i>确定</button>
Internet Explorer 的默认类型是 "button"，⽽其他浏览器中（包括 W3C 规范）的默认值是 "submit"。这样造成了页⾯⾃动刷新。
<button class="btn btn-primary" type="button" id="btnSubmit" name="btnSubmit"><i class="fa fa-save"></i>确定</button>
原因分析：
button,input type=button按钮在IE和w3c，firefox浏览器区别：
当在IE浏览器下⾯时，button标签按钮，input标签type属性为button的按钮是⼀样的功能，不会对表单进⾏任何操作。
jquery框架定义但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，⽽input标签type属性为button不会对表单进⾏任何操作。
⽅法⼀：将button标签更换为input
<input class="layui-btn test" >test</input>
⽅法⼆：
<button type="button" class="layui-btn test" >test</button>
现在程序最好兼容各个主流浏览器，故请始终为按钮规定 type 属性。
知道了button有两种类型后，我们来看具体使⽤。
第⼀种点击事件场景(动态元素)
这种场景适合于动态创建元素后，点击事件。
这⾥的点击事件是指单纯的点击事件，⽽不是提交事件，或者是数据表格中内嵌的button，对于这两者，layui是有lay-submit和lay-event这个属性进⾏⽀持的，所以这⾥只能使⽤最原始的js和jq进⾏监听
点击事件。 layui中button点击事件，分两种：
第⼀种，js的监听：
<button class="layui-icon layui-icon-export" id="withExport"></button>
回调函数：
$(document).on('click',"#withExport",function(){
layer.msg("按钮点击");
});
第⼆种button绑定事件(静态和动态)
第⼆种，jQuery的监听：
<button class="layui-icon layui-icon-export" id="withExport"></button>
$("#withExport").click(function(){
layer.msg("点击事件");
});
这种适合页⾯加载时就存在的元素。
关于button绑定事件可以总结出以下三种，1和3是静态和动态的区别。
HTML中为button绑定事件的⽅式有三种。
例如以下标签：
<button type="submit" id="btn_submit"> submit </button>
⼀、使⽤jQuery进⾏绑定
$('#btn_submit').click(function(){
});
# 这种是⽆法在动态创建元素的时候使⽤。
⼆、使⽤原⽣js绑定
}, 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代码只能体现⽹页的结构，具体的⾏为应该使⽤代码进⾏绑定。
如果在HTML中⽤onclick事件混杂js，会导致html前端和js前端的⼯作混在了⼀起，难以分离⼯作任务，
进⽽难以维护。这种做法临时调试可以，但如果正式成品中不应该出现，
所以不建议使⽤onclick标签⽅式进⾏绑定事件。
备注：如果说是动态创建的元素，那么只能使⽤第三种，如果是页⾯加载时就存在的元素，可以使⽤第⼀种。
总结
在web开发中，对按钮的操作事件⽐较频繁，搞清楚使⽤⽅法，才能更好的解决实际需求。另外，欢迎加⼊学习沟通~
版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。
发表评论