Web UI網頁前端介面(layui) 與 JS 事件綁定(CSS ID)

資料來源: https://www.cnblogs.com/liudinglong/p/14397739.html

JQUERY 選擇器 https://reurl.cc/Xm7gE7

CSS教學－CSS選擇器套用樣式的優先權順序 https://reurl.cc/v6V27o

javascript 函數種類與兩數相加對應範例 https://reurl.cc/Oj9ooR

第一種，純js的監聽:

<button class="layui-icon layui-icon-export" id="withExport"></button>

$(document).on('click',"#withExport",function(){
        layer.msg("按钮点击");
 }); 

 
第二種，jQuery的監聽：

<button class="layui-icon layui-icon-export" id="withExport"></button>

$("#withExport").click(function(){
    layer.msg("点击事件");
});

比較：

1、使用jquery綁定，代碼簡潔，使用方便，事件綁定方式為追加綁定，即綁定多少個方法就執行多少個方法。

在單一綁定的條件下，由於jQuery底層其實也是js實現，所以速度區別並不大。 至少「綁定」這個環節並不會成為

速度的瓶頸，除非頁面上綁定事件的元素超過上萬個，否則回應速度就不必糾結了，只做個事件綁定還是很快的。

所以在做負載等要求不那麼嚴格的“小程式”，從維護的角度上，建議用jQuery綁定，簡單清楚，最容易維護。

2、使用原生js，代碼量稍大，事件綁定方式為復寫綁定，即綁定多個只保留最後一個綁定的方法。

原生js，這是真正的熟練者的工具，如果能寫明白更好。

3、使用onclick標籤綁定，代碼量不大，但是html前端和js前端混在一起，不易於維護。

原則上HTML代碼只能體現網頁的結構，具體的行為應該使用JavaScript代碼進行綁定。

如果在HTML中用onclick事件混雜js，會導致html前端和js前端的工作混在了一起，難以分離工作任務，

進而難以維護。 這種做法臨時調試可以，但如果正式成品中不應該出現，

所以不建議使用onclick標籤方式進行綁定事件。