HTML中為button繫結事件的方式有三種。

例如以下標籤：

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

一、使用jquery進行繫結

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

});

二、使用原生js繫結，（注意：Internet Explorer 8 及更早IE版本不支援 addEventListener() 方法，Opera 7.0 及 Opera 更早版本也不支援。 這類瀏覽器版本要使用 attachEvent() 方法來新增事件）

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

}, false);

補充：addEventListener的第三個引數是用於決定事件模型的，當父元素和子元素都綁定了事件時，這個引數決定先觸發哪個事件，false為冒泡事件模型：即子元素繫結的事件先響應，父元素繫結的事件後相應，true問捕獲事件模型，與冒泡事件模型執行順序相反，如：

<div id="test_div">
   <button type="button" value ="測試事件順序" name="測試事件順序" id="test_button">測試事件順序</button>
</div>

document.getElementById('test_div').addEventListener('click', function () {
        console.log('div');
    },true)
    document.getElementById('test_button').addEventListener('click', function(){
        console.log('test1');
    },false);

這個例子的事件模型是捕獲模型，會先執行div的事件再執行button的事件，這裡有個需要注意的地方：決定事件模型的是父元素繫結事件時傳的第三個引數，如上例中button繫結事件時傳的第三個引數是不起作用的，除非它又包含了子元素。

三、直接在button標籤中使用onclick繫結

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

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

</script>

比較：

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

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

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

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

2、使用原生js與jquery相比的話程式碼量稍大，但是能讓人進一步瞭解事件繫結的細節，對於熟悉原生js的開發者來說是值得推薦的。

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

原則上HTML程式碼只能體現網頁的結構，具體的行為應該使用javascript程式碼進行繫結。

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

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

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