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 DOM 元素ID就是全局变量
Sep 20 Javascript
基于jquery的has()方法以及与find()方法以及filter()方法的区别详解
Apr 26 Javascript
一个JavaScript递归实现反转数组字符串的实例
Oct 14 Javascript
jQuery中element选择器用法实例
Dec 29 Javascript
JavaScript控制listbox列表框的项目上下移动的方法
Mar 18 Javascript
在JavaScript中处理字符串之link()方法的使用
Jun 08 Javascript
Node.js静态文件服务器改进版
Jan 10 Javascript
Jquery ui datepicker设置日期范围,如只能隔3天【实现代码】
May 04 Javascript
JS自定义滚动条效果简单实现代码
Oct 27 Javascript
实例解析Vue.js下载方式及基本概念
May 11 Javascript
Node.JS在命令行中检查Chrome浏览器是否安装并打开指定网址
May 21 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自动更新新闻DIY
2006/10/09 PHP
PHP编码转换函数 自动转换字符集支持数组转换
2012/12/16 PHP
深入php list()函数的详解
2013/06/05 PHP
php制作unicode解码工具(unicode编码转换器)代码分享
2013/12/24 PHP
PHPStrom中实用的功能和快捷键大全
2015/09/23 PHP
JS 面向对象的5钟写法
2009/07/31 Javascript
在html页面上拖放移动标签
2010/01/08 Javascript
JQuery Dialog(JS 模态窗口,可拖拽的DIV)
2010/02/07 Javascript
JavaScript与Div对层定位和移动获得坐标的实现代码
2010/09/08 Javascript
jquery打开直接跳到网页最下面、最低端实现代码
2013/04/22 Javascript
jquery将一个表单序列化为一个对象的方法
2014/01/03 Javascript
c#+jquery实现获取radio和checkbox的值
2020/09/12 Javascript
Javascript6中字符串的四个新用法分享
2016/09/11 Javascript
利用JS判断字符串是否含有数字与特殊字符的方法小结
2016/11/25 Javascript
基于Angularjs+mybatis实现二级评论系统(仿简书)
2017/02/13 Javascript
微信小程序实现animation动画
2018/01/26 Javascript
详解vue-cli 2.0配置文件(小结)
2019/01/14 Javascript
微信小程序跨页面数据传递事件响应实现过程解析
2019/12/19 Javascript
JS实现网站吸顶条
2020/01/08 Javascript
微信小程序学习总结(二)样式、属性、模板操作分析
2020/06/04 Javascript
JavaScript的垃圾回收机制与内存管理
2020/08/06 Javascript
Python采用Django开发自己的博客系统
2020/09/29 Python
Python实现获取邮箱内容并解析的方法示例
2018/06/16 Python
Python 3.8 新功能大揭秘【新手必学】
2020/02/05 Python
python目标检测给图画框,bbox画到图上并保存案例
2020/03/10 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
给朋友的道歉信
2014/01/09 职场文书
学习新党章思想汇报
2014/01/09 职场文书
上课迟到检讨书100字
2014/01/11 职场文书
海飞丝的广告词
2014/03/20 职场文书
我们的节日国庆活动方案
2014/08/19 职场文书
地道战观后感400字
2015/06/04 职场文书
2016公司中秋节寄语
2015/12/07 职场文书
入党转正申请书范文
2019/05/20 职场文书
PyCharm配置KBEngine快速处理代码提示冲突、配置命令问题
2021/04/03 Python
JS实现简单控制视频播放倍速的实例代码
2021/04/18 Javascript