Layui前端框架中的Button新增Click事件

阿新 • • 發佈：2021-02-13

　　引言

　　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標籤方式進行繫結事件。