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输入邮箱自动提示实例代码
Jan 13 Javascript
jQuery实现高亮显示网页关键词的方法
Aug 07 Javascript
jQuery 调用WebService 实例讲解
Jun 28 Javascript
详解javascript事件绑定使用方法
Oct 20 Javascript
Bootstrap实现圆角、圆形头像和响应式图片
Dec 14 Javascript
js实现截图保存图片功能的代码示例
Feb 16 Javascript
JavaScript中 DOM操作方法小结
Apr 25 Javascript
node+koa实现数据mock接口的方法
Sep 20 Javascript
关于Google发布的JavaScript代码规范你要知道哪些
Apr 04 Javascript
vue实现选项卡及选项卡切换效果
Apr 24 Javascript
JS实现倒计时图文效果
Nov 17 Javascript
js获取url页面id,也就是最后的数字文件名
Sep 25 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
二次元帅气男生排行榜,只想悄悄收藏系列
2020/03/04 日漫
在PHP中使用模板的方法
2008/05/24 PHP
php 动态执行带有参数的类方法
2009/04/10 PHP
php中AES加密解密的例子小结
2014/02/18 PHP
php/JS实现的生成随机密码(验证码)功能示例
2019/06/06 PHP
php7 图形用户界面GUI 开发示例
2020/02/22 PHP
JQuery写动态树示例代码
2013/07/31 Javascript
jQuery取id有.的值的方法
2014/05/21 Javascript
jquery插件orbit.js实现图片折叠轮换特效
2015/04/14 Javascript
jquery实现点击弹出带标题栏的弹出层(从右上角飞入)效果
2015/09/19 Javascript
JavaScript获取当前cpu使用率的方法
2015/12/15 Javascript
js实现精确到秒的倒计时效果
2016/05/29 Javascript
jQuery中弹出iframe内嵌页面元素到父页面并全屏化的实例代码
2016/12/27 Javascript
jQuery实现的鼠标滚轮控制图片缩放功能实例
2017/10/14 jQuery
VueJs监听window.resize方法示例
2018/01/17 Javascript
vue获取元素宽、高、距离左边距离,右,上距离等还有XY坐标轴的方法
2018/09/05 Javascript
详解jQuery如何实现模糊搜索
2019/05/10 jQuery
js通过循环多张图片实现动画效果
2019/12/19 Javascript
详解python如何调用C/C++底层库与互相传值
2016/08/10 Python
Python爬虫实现抓取京东店铺信息及下载图片功能示例
2018/08/07 Python
Python 实现某个功能每隔一段时间被执行一次的功能方法
2018/10/14 Python
对Python 获取类的成员变量及临时变量的方法详解
2019/01/22 Python
python列表删除和多重循环退出原理详解
2020/03/26 Python
Python实现简单猜数字游戏
2021/02/03 Python
input元素的url类型和email类型简介
2012/07/11 HTML / CSS
html5的canvas方法使用指南
2014/12/15 HTML / CSS
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
天美时手表加拿大官网:Timex加拿大
2016/09/01 全球购物
法国大使拉杆箱官网:DELSEY Paris
2018/03/20 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
C#中有没有静态构造函数,如果有是做什么用的?
2016/06/04 面试题
学校七一活动方案
2014/01/19 职场文书
小学毕业典礼主持词
2014/03/27 职场文书
运输服务质量承诺书
2014/03/27 职场文书
平面设计专业求职信
2014/08/09 职场文书
小学五年级语文上册教学计划
2015/01/22 职场文书