html中<button>綁定點擊事件的幾種方法說明

例如以下標(biāo)簽：

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

一、使用jquery進(jìn)行綁定

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

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

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

補充：addEventListener的第三個參數(shù)是用于決定事件模型的，當(dāng)父元素和子元素都綁定了事件時，這個參數(shù)決定先觸發(fā)哪個事件，false為冒泡事件模型：即子元素綁定的事件先響應(yīng)，父元素綁定的事件后相應(yīng)，true問捕獲事件模型，與冒泡事件模型執(zhí)行順序相反，如：

<p id="test_p">   
<button type="button" value ="測試事件順序" name="測試事件順序" id="test_button">測試事件順序</button></p>
document.getElementById('test_p').addEventListener('click', function () {        
console.log('p');    
},true)    
document.getElementById('test_button').addEventListener('click', function(){        
console.log('test1');    
},false);

這個例子的事件模型是捕獲模型，會先執(zhí)行p的事件再執(zhí)行button的事件，這里有個需要注意的地方：決定事件模型的是父元素綁定事件時傳的第三個參數(shù)，如上例中button綁定事件時傳的第三個參數(shù)是不起作用的，除非它又包含了子元素。

三、直接在button標(biāo)簽中使用onclick綁定

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

然后在<script>標(biāo)簽中定義btnAtion的方法

<script>        
function btnAction()        { }
</script>

比較：

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

在單一綁定的條件下，由于jQuery底層其實也是js實現(xiàn)，所以速度區(qū)別并不大。至少“綁定”這個環(huán)節(jié)并不會成為

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

所以在做負(fù)載等要求不那么嚴(yán)格的“小程序”，從維護(hù)的角度上，建議用jQuery綁定，簡單清楚，最容易維護(hù)。

2、使用原生js與jquery相比的話代碼量稍大，但是能讓人進(jìn)一步了解事件綁定的細(xì)節(jié)，對于熟悉原生js的開發(fā)者來說是值得推薦的。

3、使用onclick標(biāo)簽綁定，代碼量不大，但是html前端和js前端混在一起，不易于維護(hù)。

原則上HTML代碼只能體現(xiàn)網(wǎng)頁的結(jié)構(gòu)，具體的行為應(yīng)該使用javascript代碼進(jìn)行綁定。

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

進(jìn)而難以維護(hù)。這種做法臨時調(diào)試可以，但如果正式成品中不應(yīng)該出現(xiàn)，

所以不建議使用onclick標(biāo)簽方式進(jìn)行綁定事件。

以上就是html中<button>綁定點擊事件的幾種方法介紹的詳細(xì)內(nèi)容，更多請關(guān)注php中文網(wǎng)其它相關(guān)文章！