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的按钮是一样的功能，不会对表单进行任何操作。

但是在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绑定

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开发中，对按钮的操作事件比较频繁，搞清楚使用方法，才能更好的解决实际需求。 另外，欢迎加入学习沟通群~