Javascript中绑定click事件的四种方式介绍


Posted in Javascript onOctober 26, 2018

一:HTML中添加onclick

<button id="vv" onclick="myfunction()" >哈哈</button>

二:JS中定义函数绑定事件!

var funcc = function () {
  alert('我爱编程')
  }
var aa = document.getElementById('vv')
aa.onclick = funcc

三:直接定义函数与内容

document.getElementById('vv').onclick = function () {
  alert('hasssshhaa ')
  }

四:利用addEventListener

document.getElementById('vv').addEventListener('click',funcc);
//或者:
document.getElementById('vv').addEventListener('click',function () {
  alert('hahah')
  })

总结

以上就是这篇文章的全部内容了,希望本文的内容对大家的学习或者工作具有一定的参考学习价值,谢谢大家对三水点靠木的支持。如果你想了解更多相关内容请查看下面相关链接

Javascript 相关文章推荐
javascript 写类方式之六
Jul 05 Javascript
js创建对象的几种常用方式小结(推荐)
Oct 24 Javascript
js自执行函数的几种不同写法的比较
Aug 16 Javascript
js打开windows上的可执行文件示例
May 27 Javascript
js中let和var定义变量的区别
Feb 08 Javascript
webpack下实现动态引入文件方法
Feb 22 Javascript
node.js中fs文件系统目录操作与文件信息操作
Feb 24 Javascript
用POSTMAN发送JSON格式的POST请求示例
Sep 04 Javascript
解决vue2 在mounted函数无法获取prop中的变量问题
Nov 15 Javascript
详解关于微信setData回调函数中的坑
Feb 18 Javascript
JS中实现一个下载进度条及播放进度条的代码
Jun 10 Javascript
微信小程序云开发如何实现数据库自动备份实现
Aug 16 Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 #Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 #jQuery
详解ES6 系列之异步处理实战
Oct 26 #Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 #Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 #Javascript
js使用formData实现批量上传
Mar 27 #Javascript
详解webpack打包时排除其中一个css、js文件或单独打包一个css、js文件(两种方法)
Oct 26 #Javascript
You might like
PHP 柱状图实现代码
2009/12/04 PHP
探讨PHP删除文件夹的三种方法
2013/06/09 PHP
PHP获取当前文件的父目录方法汇总
2016/07/21 PHP
thinkphp跨库操作的简单代码实例
2016/09/22 PHP
php实现的redis缓存类定义与使用方法示例
2017/08/09 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
jQuery 数据缓存data(name, value)详解及实现
2010/01/04 Javascript
BOM与DOM的区别分析
2010/10/26 Javascript
eclipse如何忽略js文件报错(附图)
2013/10/30 Javascript
Js实现双击鼠标自动滚动屏幕的示例代码
2013/12/14 Javascript
js 剪切板应用clipboardData详细解析
2013/12/17 Javascript
js中for in的用法示例解析
2013/12/25 Javascript
原生javaScript做得动态表格(注释写的很清楚)
2013/12/29 Javascript
JavaScript字符串对象replace方法实例(用于字符串替换或正则替换)
2014/10/16 Javascript
jQuery Ajax使用实例
2015/04/16 Javascript
利用JavaScript的AngularJS库制作电子名片的方法
2015/06/18 Javascript
JavaScript数组对象赋值用法实例
2015/08/04 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
浅谈js中子页面父页面方法 变量相互调用
2016/08/04 Javascript
Javascript实现代码折叠功能
2016/08/25 Javascript
详解基于vue-cli优化的webpack配置
2017/11/06 Javascript
vue init webpack myproject构建项目 ip不能访问的解决方法
2018/03/20 Javascript
django的登录注册系统的示例代码
2018/05/14 Python
Python单元测试unittest的具体使用示例
2018/12/17 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
pyecharts调整图例与各板块的位置间距实例
2020/05/16 Python
python基于opencv 实现图像时钟
2021/01/04 Python
Html5 postMessage实现跨域消息传递
2016/03/11 HTML / CSS
HTML5实现获取地理位置信息并定位功能
2015/04/25 HTML / CSS
美国演唱会订票网站:Ticketmaster美国
2017/10/05 全球购物
领先的英国注册在线药房 :Simply Meds Online
2019/03/28 全球购物
行政管理专业求职信
2014/07/06 职场文书
研究生就业推荐表导师评语
2014/12/31 职场文书
2015年小班保育员工作总结
2015/05/27 职场文书
隐形的翅膀观后感
2015/06/10 职场文书
导游词之崇武古城
2019/10/07 职场文书