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 相关文章推荐
动态加载iframe
Jun 16 Javascript
基于jQuery的Tab选项框效果代码(插件)
Mar 01 Javascript
jQuery 对Select的操作备忘记录
Jul 04 Javascript
js 事件截取enter按键页面提交事件示例代码
Mar 04 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
JavaScript仿商城实现图片广告轮播实例代码
Feb 06 Javascript
JavaScript操作HTML DOM节点的基础教程
Mar 11 Javascript
浅谈JS之tagNaem和nodeName
Sep 13 Javascript
浅谈Vue.js中的v-on(事件处理)
Sep 05 Javascript
在vue项目中引入highcharts图表的方法(详解)
Mar 05 Javascript
深入了解js原型模式
May 30 Javascript
超详细小程序定位地图模块全系列开发教学
Nov 24 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 smarty模板引擎的6个小技巧
2014/04/24 PHP
24条货真价实的PHP代码优化技巧
2016/07/28 PHP
php中字符串和整数比较的操作方法
2019/06/06 PHP
laravel 实现用户登录注销并限制功能
2019/10/24 PHP
js 函数的执行环境和作用域链的深入解析
2009/11/01 Javascript
详解js图片轮播效果实现原理
2015/12/17 Javascript
基于canvas实现的绚丽圆圈效果完整实例
2016/01/26 Javascript
Angular ng-repeat指令实例以及扩展部分
2016/12/26 Javascript
js实现百度登录框鼠标拖拽效果
2017/03/07 Javascript
JS 60秒后重新发送验证码的实例讲解
2017/07/26 Javascript
薪资那么高的Web前端必看书单
2017/10/13 Javascript
原生JS实现小小的音乐播放器
2017/10/16 Javascript
jQuery实现的粘性滚动导航栏效果实例【附源码下载】
2017/10/19 jQuery
浅谈JsonObject中的key-value数据解析排序问题
2017/12/06 Javascript
vue配置接口域名方法总结
2019/05/12 Javascript
layui动态渲染生成select的option值方法
2019/09/23 Javascript
JsonProperty 的使用方法详解
2019/10/11 Javascript
微信小程序接入腾讯云验证码的方法步骤
2020/01/07 Javascript
如何实现iframe父子传参通信
2020/02/05 Javascript
mpvue网易云短信接口实现小程序短信登录的示例代码
2020/04/03 Javascript
vue的hash值原理也是table切换实例代码
2020/12/14 Vue.js
简单文件操作python 修改文件指定行的方法
2013/05/15 Python
从零学python系列之数据处理编程实例(二)
2014/05/22 Python
Python中的包和模块实例
2014/11/22 Python
Python中对列表排序实例
2015/01/04 Python
python正则分析nginx的访问日志
2017/01/17 Python
值得收藏,Python 开发中的高级技巧
2018/11/23 Python
解决python3 Pycharm上连接数据库时报错的问题
2018/12/03 Python
Python生成一个迭代器的实操方法
2019/06/18 Python
简单了解python反射机制的一些知识
2019/07/13 Python
python生成器/yield协程/gevent写简单的图片下载器功能示例
2019/10/28 Python
Python类如何定义私有变量
2020/02/03 Python
基于PyTorch的permute和reshape/view的区别介绍
2020/06/18 Python
承办会议欢迎词
2014/01/17 职场文书
中学生的1000字检讨书
2014/10/11 职场文书
Python pygame实现中国象棋单机版源码
2021/06/20 Python