JavaScript中点击事件的写法


Posted in Javascript onJune 28, 2016
<button id="btn">click</button>
var btn=document.getElementById('btn');

第一种:

btn.onclick=function(){
alert('hello world');
}

消除事件:btn.onclick=null;//就不会弹出框了

第二种:

btn.addEventListener('click',function(){alert('hello world')},false);
btn.addEventListener('click',function(){alert(this.id)},false);

第三种:

function demo(){

alert('hello');
}
<button id="btn" onclick="demo()">click</button>

下面给大家介绍js触发按钮点击事件

模拟JS触发按钮点击功能

<html> 
  <head> 
    <title>usually function</title> 
  </head> 
  <script> 
function load(){ 
  //下面两种方法效果是一样的 
  document.getElementById("target").onclick(); 
  document.getElementById("target").click(); 
} 
function test(){ 
  alert("test"); 
} 
</script> 
  <body onload="load()"> 
    <button id="target" onclick="test()">test</button> 
  </body> 
<html>

 备注:

btnObj.click()是真正地用程序去点击按钮,触发了按钮的onclick()事件

btnObj.onclick()只是简单地调用了btnObj的onclick所指向的方法,只是调用方法而已,并未触发事件

Javascript 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
jquery mobile事件多次绑定示例代码
Sep 13 Javascript
js实现回放拖拽轨迹从过程上进行分析
Jun 26 Javascript
在HTML代码中使用JavaScript代码的例子
Oct 16 Javascript
JSON字符串和对象之间的转换详解
May 26 Javascript
javascript组合使用构造函数模式和原型模式实例
Jun 04 Javascript
通过XMLHttpRequest和jQuery实现ajax的几种方式
Aug 28 Javascript
jQuery下拉框的简单应用
Jun 24 Javascript
jQuery EasyUI tree增加搜索功能的实现方法
Apr 27 jQuery
基于JS实现限时抢购倒计时间表代码
May 09 Javascript
详解vuejs几种不同组件(页面)间传值的方式
Jun 01 Javascript
JavaScript基于对象方法实现数组去重及排序操作示例
Jul 10 Javascript
js改变style样式和css样式的简单实例
Jun 28 #Javascript
js改变css样式的三种方法推荐
Jun 28 #Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 #Javascript
获取input标签的所有属性的方法
Jun 28 #Javascript
JavaScript ES6的新特性使用新方法定义Class
Jun 28 #Javascript
javascript 常用验证函数总结
Jun 28 #Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 #Javascript
You might like
php获取当前url地址的方法小结
2017/01/10 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
javascript中的对象创建 实例附注释
2011/02/08 Javascript
js动态创建表格,删除行列的小例子
2013/07/20 Javascript
动态加载脚本提升javascript性能
2014/02/24 Javascript
一款基于jQuery的图片场景标注提示弹窗特效
2015/01/05 Javascript
简单介绍jsonp 使用小结
2016/01/27 Javascript
javascript的正则匹配方法学习
2016/02/24 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
BOM系列第二篇之定时器requestAnimationFrame
2016/08/17 Javascript
详解微信小程序开发—你期待的分享功能来了,微信小程序序新增5大功能
2016/12/23 Javascript
js 颜色选择插件
2017/01/23 Javascript
基于BootStrap实现简洁注册界面
2017/07/20 Javascript
基于JS脚本语言的基础语法详解
2017/07/22 Javascript
关于axios如何全局注册浅析
2018/01/14 Javascript
对angularJs中ng-style动态改变样式的实例讲解
2018/09/30 Javascript
为什么要使用Vuex的介绍
2019/01/19 Javascript
微信小程序 swiper 组件遇到的问题及解决方法
2019/05/26 Javascript
Node.js API详解之 module模块用法实例分析
2020/05/13 Javascript
Python中的异常处理学习笔记
2015/01/28 Python
python中使用mysql数据库详细介绍
2015/03/27 Python
简单介绍利用TK在Python下进行GUI编程的教程
2015/04/13 Python
浅谈Python的异常处理
2016/06/19 Python
python+pyqt5编写md5生成器
2019/03/18 Python
浅谈Python type的使用
2019/11/19 Python
法国二手手袋、手表和奢侈珠宝购物网站:Collector Square
2018/07/05 全球购物
什么是Smarty变量操作符?如何使用Smarty变量操作符
2014/07/18 面试题
高中毕业自我鉴定范文
2013/10/02 职场文书
初一地理教学反思
2014/01/16 职场文书
教师党的群众路线教育实践活动个人对照检查材料
2014/09/23 职场文书
领导班子作风建设年个人整改措施
2014/09/29 职场文书
医院领导班子查摆问题对照检查材料思想汇报
2014/10/08 职场文书
判缓刑人员个人思想汇报
2014/10/10 职场文书
七年级作文之关于奶奶
2019/10/29 职场文书
详解Go语言运用广度优先搜索走迷宫
2021/06/23 Python
Windows Server 版本 20H2 于 8 月 9 日停止支持,Win10 版本 21H1 将于 12 月结束支
2022/07/23 数码科技