button layui 点击事件_Layui前端框架中的Button添加Click事件

引言

button点击事件有一个type属性，默认type是submit，有时候使用默认会出现页面自动刷新问题。

确定

Internet Explorer 的默认类型是 "button"，而其他浏览器中(包括 W3C 规范)的默认值是 "submit"。这样造成了页面自动刷新。

确定

原因分析：

button,input type=button按钮在IE和w3c，firefox浏览器区别：

当在IE浏览器下面时，button标签按钮，input标签type属性为button的按钮是一样的功能，不会对表单进行任何操作。

但是在W3C浏览器，如Firefox下就需要注意了，button标签按钮会提交表单，而input标签type属性为button不会对表单进行任何操作。

方法一：将button标签更换为input

test

方法二：

test

现在程序最好兼容各个主流浏览器，故请始终为按钮规定 type 属性。

知道了button有两种类型后，我们来看具体使用。

第一种点击事件场景(动态元素)

这种场景适合于动态创建元素后，点击事件。

这里的点击事件是指单纯的点击事件，而不是提交事件，或者是数据表格中内嵌的button，对于这两者，layui是有lay-submit和lay-event这个属性进行支持的，所以这里只能使用最原始的js和jq进行监听点击事件。 layui中button点击事件，分两种：

第一种，js的监听：

回调函数：

$(document).on('click',"#withExport",function(){

layer.msg("按钮点击");

});

第二种button绑定事件(静态和动态)

第二种，jQuery的监听：

$("#withExport").click(function(){

layer.msg("点击事件");

});

这种适合页面加载时就存在的元素。

关于button绑定事件可以总结出以下三种，1和3是静态和动态的区别。

HTML中为button绑定事件的方式有三种。

例如以下标签：

submit

一、使用jQuery进行绑定

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

});

# 这种是无法在动态创建元素的时候使用。

二、使用原生js绑定

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

}, false);

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

submit

此时，type="button"也可以。

然后在

function btnAction()

{ }

比较：

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

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

速度的瓶颈，除非页面上绑定事件的元素超过上万个，否则响应速度就不必纠结了，只做个事件绑定还是很快的。

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

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

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

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

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

如果在HTML中用onclick事件混杂js，会导致html前端和js前端的工作混在了一起，难以分离工作任务，

进而难以维护。这种做法临时调试可以，但如果正式成品中不应该出现，

所以不建议使用onclick标签方式进行绑定事件。

备注：如果说是动态创建的元素，那么只能使用第三种，如果是页面加载时就存在的元素，可以使用第一种。

总结

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