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 相关文章推荐
google 搜索框添加关键字实现代码
Apr 24 Javascript
jquery插件之定时查询待处理任务数量
May 01 Javascript
javascript自定义函数参数传递为字符串格式
Jul 29 Javascript
深入浅析react native es6语法
Dec 09 Javascript
基于javascript bootstrap实现生日日期联动选择
Apr 07 Javascript
原生js实现简单的模态框示例
Sep 08 Javascript
JavaScript实现的DOM树遍历方法详解【二叉DOM树、多叉DOM树】
May 07 Javascript
Node.js对MongoDB进行增删改查操作的实例代码
Apr 18 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
layui 弹出层回调获取弹出层数据的例子
Sep 02 Javascript
在vscode 中设置 vue模板内容的方法
Sep 02 Javascript
简单谈谈offsetleft、offsetTop和offsetParent
Dec 04 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
$_GET['goods_id']+0 的使用详解
2013/06/06 PHP
php提示Warning:mysql_fetch_array() expects的解决方法
2014/12/16 PHP
php实现判断访问来路是否为搜索引擎机器人的方法
2015/04/15 PHP
ajax上传时参数提交不更新等相关问题
2012/12/11 Javascript
js跑步算法的实现代码
2013/12/04 Javascript
JavaScript闭包实例讲解
2014/04/22 Javascript
关于javaScript注册click事件传递参数的不成功问题
2014/07/18 Javascript
浅谈JavaScript 的执行顺序
2015/08/07 Javascript
javascript中caller和callee详解
2015/08/10 Javascript
简单谈谈Javascript中类型的判断
2015/10/19 Javascript
jQuery包裹节点用法完整示例
2016/09/13 Javascript
微信小程序  生命周期详解
2016/10/27 Javascript
微信小程序 flex实现导航实例详解
2017/04/26 Javascript
angular.js指令中的controller、compile与link函数的不同之处
2017/05/10 Javascript
详解webpack和webpack-simple中如何引入css文件
2017/06/28 Javascript
深入理解Vue router的部分高级用法
2018/08/15 Javascript
详解JS中统计函数执行次数与执行时间
2018/09/04 Javascript
利用d3.js力导布局绘制资源拓扑图实例教程
2019/01/08 Javascript
微信小程序中悬浮窗功能的实现代码
2019/08/02 Javascript
微信小程序防止多次点击跳转(函数节流)
2019/09/19 Javascript
Vue export import 导入导出的多种方式与区别介绍
2020/02/12 Javascript
Python学习之Django的管理界面代码示例
2018/02/10 Python
Python中的asyncio代码详解
2019/06/10 Python
python Tkinter的图片刷新实例
2019/06/14 Python
法国高保真音响和家庭影院商店:Son Video
2019/04/26 全球购物
竞赛口号大全
2014/06/16 职场文书
四风问题班子对照检查材料
2014/09/27 职场文书
2014乡党委副书记党建工作汇报材料
2014/11/02 职场文书
2015年度电厂个人工作总结
2015/05/13 职场文书
2015年公路路政个人工作总结
2015/07/24 职场文书
2016年综治宣传月活动宣传标语口号
2016/03/16 职场文书
python 实现两个变量值进行交换的n种操作
2021/06/02 Python
Python中的turtle画箭头,矩形,五角星
2022/03/16 Python
试用1103暨1103、1101同门大比武 [ DAIWEI ]
2022/04/05 无线电
MYSQL事务的隔离级别与MVCC
2022/05/25 MySQL
Android Gradle 插件自定义Plugin实现注意事项
2022/06/16 Java/Android