事件綁定

HTML中爲button綁定事件的方式有三種。

例如如下標籤：

<button type="submit" id="btn_submit"> submit </button>

1、使用jQuery進行綁定

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

});

 

2、使用原生js綁定

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

}, false);

 

3、直接在button標籤中使用onclick綁定

<button type="submit" id="btn_submit" onclick="btnAction()"> submit </button>

而後在<script>標籤中定義btnAtion的方法

 

<script>
        function btnAction()
        { }

</script>

 

比較：

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

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

速度的瓶頸，除非頁面上綁定事件的元素超過上萬個，不然響應速度就沒必要糾結了，只作個事件綁定仍是很快的。

因此在作負載等要求不那麼嚴格的「小程序」，從維護的角度上，建議用jQuery綁定，簡單清楚，最容易維護。

 

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

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

 

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

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

若是在HTML中用onclick事件混雜js，會致使html前端和js前端的工做混在了一塊兒，難以分離工做任務，

進而難以維護。這種作法臨時調試能夠，但若是正式成品中不該該出現，

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

 

補：在使用jquery綁定時，建議使用：

$(document).on('click', 'li', function(){

    console.log(this)

})

當頁面動態加載一個元素時，該方法效果更佳