html中<button>綁定點擊事件的幾種方法介紹-html教學-PHP中文網

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

例如以下標籤：

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

登入後複製

一、使用jquery進行綁定

$(&#39;#btn_submit&#39;).click(function(){
});

登入後複製

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

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

登入後複製

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

<p id="test_p">   
<button type="button" value ="测试事件顺序" name="测试事件顺序" id="test_button">测试事件顺序</button></p>
document.getElementById(&#39;test_p&#39;).addEventListener(&#39;click&#39;, function () {        
console.log(&#39;p&#39;);    
},true)    
document.getElementById(&#39;test_button&#39;).addEventListener(&#39;click&#39;, function(){        
console.log(&#39;test1&#39;);    
},false);

登入後複製

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

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

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

登入後複製

然後在

熱門教學

更多>

相關教學

php8，我來也

30分鐘學會網站佈局

尚觀Oracle入門到精通視頻教程

你的第一行UNI-APP程式碼

Flutter 從頭到應用程式啟動

兄弟連新版Linux視頻教程

AXURE 9影片教學（適用於產品經理互動產品設計UI）

零基礎PS影片教學

16天帶你入門UI視頻教程

PS技巧和切片技巧影片教學

阿裡雲環境搭建以及項目上線視頻教程

電腦網路概述－程式設計師必須掌握的基礎知識

程式設計師必備教學——HTTP協定講解

Websocket影片教學

html中

html中綁定點擊事件的幾種方法介紹

html中