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 相关文章推荐
Javascript调用C#代码
Jan 17 Javascript
JQuery插件开发示例代码
Nov 06 Javascript
关闭页面时window.location事件未执行的原因分析及解决方案
Sep 01 Javascript
js 操作符汇总
Nov 08 Javascript
node.js中的fs.readdir方法使用说明
Dec 17 Javascript
jquery动态增加删减表格行特效
Nov 20 Javascript
JQuery核心函数是什么及使用方法介绍
May 03 Javascript
深入学习jQuery中的data()
Dec 22 Javascript
webpack配置proxyTable时pathRewrite无效的解决方法
Dec 13 Javascript
jquery登录的异步验证操作示例
May 09 jQuery
vue实践---vue不依赖外部资源实现简单多语操作
Sep 21 Javascript
jquery自定义组件实例详解
Dec 31 jQuery
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字符串过滤,转换函数代码
2012/05/01 PHP
关于zend studio 出现乱码问题的总结
2013/06/23 PHP
Symfony2创建页面实例详解
2016/03/18 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
ThinkPHP中调用PHPExcel的实现代码
2017/04/08 PHP
JavaScript 用cloneNode方法克隆节点的代码
2012/10/15 Javascript
让AJAX不依赖后端接口实现方案
2012/12/03 Javascript
javascript定时变换图片实例代码
2013/03/17 Javascript
jQuery中parentsUntil()方法用法实例
2015/01/07 Javascript
jquery操作angularjs对象
2015/06/26 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JS函数定义方式的区别介绍
2016/03/22 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
以BootStrap Tab为例写一个前端组件
2017/07/25 Javascript
详解vue项目的构建,打包,发布全过程
2017/11/23 Javascript
Nuxt项目支持eslint+pritter+typescript的实现
2019/05/20 Javascript
layui--js控制switch的切换方法
2019/09/03 Javascript
vue中是怎样监听数组变化的
2020/10/24 Javascript
Python使用poplib模块和smtplib模块收发电子邮件的教程
2016/07/02 Python
pandas中Timestamp类用法详解
2017/12/11 Python
深入理解Python 关于supper 的 用法和原理
2018/02/28 Python
详解python 注释、变量、类型
2018/08/10 Python
在Python中使用defaultdict初始化字典以及应用方法
2018/10/31 Python
python3检查字典传入函数键是否齐全的实例
2020/06/05 Python
在keras里面实现计算f1-score的代码
2020/06/15 Python
Python txt文件常用读写操作代码实例
2020/08/03 Python
CSS3 滤镜 webkit-filter详细介绍及使用方法
2012/12/27 HTML / CSS
日本最新流行服饰网购:Nissen
2016/07/24 全球购物
英国Office鞋店德国网站:在线购买鞋子、靴子和运动鞋
2018/12/19 全球购物
大专毕业生简历的自我评价
2013/10/20 职场文书
公司总经理岗位职责
2014/03/15 职场文书
企业群众路线教育实践活动心得体会
2014/11/03 职场文书
机关干部纪律作风整顿心得体会
2016/01/23 职场文书
如何写好闭幕词
2019/04/02 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
Redis实战高并发之扣减库存项目
2022/04/14 Redis