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实现iframe动态调整高度的代码
Jan 06 Javascript
兼容FireFox 的 js 日历 支持时间的获取
Mar 04 Javascript
jQuery之选项卡的简单实现
Feb 28 Javascript
node.js学习之base64编码解码
Oct 21 Javascript
js实现楼层导航功能
Feb 23 Javascript
封装运动框架实战左右与上下滑动的焦点轮播图(实例)
Oct 17 Javascript
微信小程序使用map组件实现获取定位城市天气或者指定城市天气数据功能
Jan 22 Javascript
Vuex持久化插件(vuex-persistedstate)解决刷新数据消失的问题
Apr 16 Javascript
详解vue 在移动端体验上的优化解决方案
May 20 Javascript
JavaScript箭头函数中的this详解
Jun 19 Javascript
vue移动端使用canvas签名的实现
Jan 15 Javascript
使用JavaScript获取Django模板指定键值数据
May 27 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
1 Tube Radio
2021/03/02 无线电
windows下开发并编译PHP扩展的方法
2011/03/18 PHP
PHP新手入门学习方法
2011/05/08 PHP
PHP程序级守护进程的实现与优化的使用概述
2013/05/02 PHP
浅析php插件 HTMLPurifier HTML解析器
2013/07/01 PHP
翻译整理的jQuery使用查询手册
2007/03/07 Javascript
js 动态文字滚动的例子
2011/01/17 Javascript
js三种排序算法分享
2012/08/16 Javascript
checkbox使用示例
2013/08/23 Javascript
jquery浏览器滚动加载技术实现方案
2014/06/03 Javascript
window.location.href的用法(动态输出跳转)
2014/08/09 Javascript
ubuntu下安装nodejs以及升级的办法
2015/05/08 NodeJs
JQuery实现鼠标移动图片显示描述层的方法
2015/06/25 Javascript
跟我学习javascript解决异步编程异常方案
2015/11/23 Javascript
使用JQuery中的trim()方法去掉前后空格
2016/09/16 Javascript
vue脚手架vue-cli的学习使用教程
2017/06/06 Javascript
Vue表单输入绑定的示例代码
2018/11/01 Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
2020/02/27 Javascript
vue3为什么要用proxy替代defineProperty
2020/10/19 Javascript
使用Python实现博客上进行自动翻页
2017/08/23 Python
Python爬虫获取整个站点中的所有外部链接代码示例
2017/12/26 Python
Pandas将列表(List)转换为数据框(Dataframe)
2020/04/24 Python
Python爬虫获取页面所有URL链接过程详解
2020/06/04 Python
HTML5实时语音通话聊天MP3压缩传输3KB每秒
2019/08/28 HTML / CSS
测绘工程本科生求职信
2013/10/10 职场文书
材料采购员岗位职责
2013/12/17 职场文书
《台湾的蝴蝶谷》教学反思
2014/02/20 职场文书
劳模先进事迹材料
2014/12/24 职场文书
董事长助理岗位职责
2015/02/11 职场文书
2015年银行柜员工作总结报告
2015/04/01 职场文书
网吧管理制度范本
2015/08/05 职场文书
教师节祝酒词
2015/08/11 职场文书
数据结构课程设计心得体会
2016/01/15 职场文书
一看就懂的MySQL的聚簇索引及聚簇索引是如何长高的
2021/05/25 MySQL
你真的了解redis为什么要提供pipeline功能
2021/06/22 Redis
MySQL 四种连接和多表查询详解
2021/07/16 MySQL