引言
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開發中，對按鈕的操作事件比較頻繁，搞清楚使用方法，才能更好的解決實際需求。 另外，歡迎加入學習溝通群~