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中<button>绑定点击事件的几种方法介绍