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 相关文章推荐
jqPlot 图表中文API使用文档及源码和在线示例
Feb 07 Javascript
Jquery之Bind方法参数传递与接收的三种方法
Jun 24 Javascript
JQuery 给元素绑定click事件多次执行的解决方法
Sep 09 Javascript
js如何改变文章的字体大小
Jan 08 Javascript
探析浏览器执行JavaScript脚本加载与代码执行顺序
Jan 12 Javascript
jquery+ajaxform+springboot控件实现数据更新功能
Jan 22 jQuery
微信小程序实现人脸识别登陆的示例代码
Apr 02 Javascript
ES6入门教程之变量的解构赋值详解
Apr 13 Javascript
vue-devtools的安装和使用步骤详解
Oct 17 Javascript
如何在selenium中使用js实现定位
Aug 18 Javascript
angular *Ngif else用法详解
Dec 15 Javascript
ES2020让代码更优美的运算符 (?.) (??)
Jan 04 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
mysql中存储过程、函数的一些问题
2007/02/14 PHP
PHP中使用CURL伪造来路抓取页面或文件
2011/05/04 PHP
一个经典的PHP验证码类分享
2014/11/18 PHP
PHP不使用递归的无限级分类简单实例
2016/11/05 PHP
javascript编程起步(第七课)
2007/02/27 Javascript
用javascript实现的图片马赛克后显示并切换加文字功能
2007/04/21 Javascript
发一个自己用JS写的实用看图工具实现代码
2008/07/26 Javascript
javascript完美拖拽的实现方法
2013/09/29 Javascript
jQuery javaScript捕获回车事件(示例代码)
2013/11/07 Javascript
JavaScript更改原始对象valueOf的方法
2015/03/19 Javascript
TypeScript具有的几个不同特质
2015/04/07 Javascript
jQuery+Ajax+PHP+Mysql实现分页显示数据实例讲解
2015/09/27 Javascript
javascript新闻跑马灯实例代码
2020/07/29 Javascript
javascript html5轻松实现拖动功能
2017/03/01 Javascript
微信小程序实现页面跳转传递参数(实体,对象)
2019/08/12 Javascript
Vue双向绑定实现原理与方法详解
2020/05/07 Javascript
Nest.js散列与加密实例详解
2021/02/24 Javascript
Python的语言类型(详解)
2017/06/24 Python
快速了解python leveldb
2018/01/18 Python
python3判断url链接是否为404的方法
2018/08/10 Python
python变量命名的7条建议
2019/07/04 Python
Windows 平台做 Python 开发的最佳组合(推荐)
2020/07/27 Python
python如何构建mock接口服务
2021/01/28 Python
用Python匹配HTML tag的时候,<.*>和<.*?>有什么区别
2012/11/04 面试题
元旦晚会上单位领导演讲稿
2014/01/05 职场文书
教师绩效工资方案
2014/02/01 职场文书
中秋节礼品促销方案
2014/02/02 职场文书
就业协议书怎么填
2014/09/15 职场文书
普通党员四风问题对照检查材料
2014/09/27 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
领导班子对照检查剖析材料
2014/10/13 职场文书
pandas 操作 Excel操作总结
2021/03/31 Python
python 命令行传参方法总结
2021/05/25 Python
Python数据可视化之绘制柱状图和条形图
2021/05/25 Python
Spring Cloud Netflix 套件中的负载均衡组件 Ribbon
2022/04/13 Java/Android
MySQL数据管理操作示例讲解
2022/12/24 MySQL