登录  /  注册

html中<button>绑定点击事件的几种方法介绍

黄舟
发布: 2017-07-27 14:09:18
原创
38004人浏览过

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>
登录后复制

然后在

来源:php中文网
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn
最新问题
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送
PHP中文网APP
随时随地碎片化学习
PHP中文网抖音号
发现有趣的

Copyright 2014-2024 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号