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 相关文章推荐
JS实现在Repeater控件中创建可隐藏区域的代码
Sep 16 Javascript
jQuery实现简单下拉导航效果
Sep 07 Javascript
深入浅析JavaScript中数据共享和数据传递
Apr 25 Javascript
js将滚动条滚动到指定位置的简单实现方法
Jun 25 Javascript
jQuery 3.0十大新特性
Jul 06 Javascript
大白话讲解JavaScript的Promise
Apr 06 Javascript
详解Vuejs2.0 如何利用proxyTable实现跨域请求
Aug 03 Javascript
用jquery获取select标签中选中的option值及文本的示例
Jan 25 jQuery
vue element-ui 绑定@keyup事件无效的解决方法
Mar 09 Javascript
在Vue项目中引入腾讯验证码服务的教程
Apr 03 Javascript
详解基于node.js的脚手架工具开发经历
Jan 28 Javascript
浅谈javascript中的prototype和__proto__的理解
Apr 07 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_Flame(Version:Progress)的原代码
2006/10/09 PHP
IIS+PHP+MySQL+Zend配置 (视频教程)
2006/12/13 PHP
PHP pthreads v3使用中的一些坑和注意点分析
2020/02/21 PHP
PHP生成图表pChart的示例解析
2020/07/31 PHP
PHP的imageTtfText()函数深入详解
2021/03/03 PHP
javascript优先加载笔记代码
2008/09/30 Javascript
javascript 打开页面window.location和window.open的区别
2010/03/17 Javascript
网站导致浏览器崩溃的原因总结(多款浏览器) 推荐
2010/04/15 Javascript
IE 当eval遇上function的处理
2011/08/09 Javascript
jQuery实现form表单reset按钮重置清空表单功能
2012/12/18 Javascript
JavaScript实现按Ctrl键打开新页面
2014/09/04 Javascript
jQuery插件slicebox实现3D动画图片轮播切换特效
2015/04/12 Javascript
javascript针对不确定函数的执行方法
2015/12/16 Javascript
jQuery基于排序功能实现上移、下移的方法
2016/11/26 Javascript
jQuery日期范围选择器附源码下载
2017/05/23 jQuery
jQuery实现键盘回车搜索功能
2017/07/25 jQuery
Vue2.0 slot分发内容与props验证的方法
2017/12/12 Javascript
Vue.set()实现数据动态响应的方法
2018/02/07 Javascript
vue中手机号,邮箱正则验证以及60s发送验证码的实例
2018/03/16 Javascript
Vue.js组件实现选项卡以及切换特效
2019/07/24 Javascript
vue学习笔记之Vue中css动画原理简单示例
2020/02/29 Javascript
easy_install python包安装管理工具介绍
2013/02/10 Python
基于Python对象引用、可变性和垃圾回收详解
2017/08/21 Python
使用python3+xlrd解析Excel的实例
2018/05/04 Python
解决nohup重定向python输出到文件不成功的问题
2018/05/11 Python
Python中的引用知识点总结
2019/05/20 Python
python 实现查找文件并输出满足某一条件的数据项方法
2019/06/12 Python
python数据处理——对pandas进行数据变频或插值实例
2020/04/22 Python
最耐用行李箱,一箱永流传:Briggs & Riley(全球终身保修)
2017/12/07 全球购物
暑期实习鉴定
2013/12/16 职场文书
运动会入场词50字
2014/02/20 职场文书
2014企业年终工作总结
2014/12/23 职场文书
试用期自我评价范文
2015/03/10 职场文书
奖励通知
2015/04/22 职场文书
2019经典广告词集锦!
2019/07/02 职场文书
Redis命令处理过程源码解析
2022/02/12 Redis