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 相关文章推荐
JS location几个方法小姐
Jul 09 Javascript
jQuery插件分享之分页插件jqPagination
Jun 06 Javascript
javascript函数中的3个高级技巧
Sep 22 Javascript
使用Ajax生成的Excel文件并下载的实例
Nov 21 Javascript
JS和canvas实现俄罗斯方块
Mar 14 Javascript
angular4模块中给标签添加背景图的实现方法
Sep 15 Javascript
微信小程序实现折叠面板
Jan 31 Javascript
浅谈webpack打包过程中因为图片的路径导致的问题
Feb 21 Javascript
jQuery实现下拉菜单动态添加数据点击滑出收起其他功能
Jun 14 jQuery
JavaScript实现的简单Tab点击切换功能示例
Jul 06 Javascript
原生JS实现无缝轮播图片
Jun 24 Javascript
动态实现element ui的el-table某列数据不同样式的示例
Jan 22 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程序实现支持页面后退的两种方法
2008/06/30 PHP
PHP开发的一些注意点总结
2010/10/12 PHP
php iconv() : Detected an illegal character in input string
2010/12/05 PHP
PHP表单验证的3个函数ISSET()、empty()、is_numeric()的使用方法
2011/08/22 PHP
PHP序列号生成函数和字符串替换函数代码
2012/06/07 PHP
PHP 二维数组根据某个字段排序的具体实现
2014/06/03 PHP
PHP使用星号替代用户名手机和邮箱的实现代码
2018/02/07 PHP
Laravel find in set排序实例
2019/10/09 PHP
动态调用css文件——jquery的应用
2007/02/20 Javascript
js 实现打印网页中定义的部分内容的代码
2010/04/01 Javascript
juqery 学习之五 文档处理 插入
2011/02/11 Javascript
IE的fireEvent方法概述及应用
2013/02/22 Javascript
jquery实现submit提交表单
2015/02/03 Javascript
Vuejs第七篇之Vuejs过渡动画案例全面解析
2016/09/05 Javascript
整理一些最近经常遇到的前端面试题
2017/04/25 Javascript
bootstrapTable+ajax加载数据 refresh更新数据
2018/08/31 Javascript
vue-cli构建vue项目的步骤详解
2019/01/27 Javascript
[01:02:20]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第二场 8.15
2019/08/16 DOTA
Python中Django发送带图片和附件的邮件
2017/03/31 Python
python线程池threadpool使用篇
2018/04/27 Python
Django跨域请求CSRF的方法示例
2018/11/11 Python
使用opencv将视频帧转成图片输出
2019/12/10 Python
浅谈numpy中np.array()与np.asarray的区别以及.tolist
2020/06/03 Python
详解Python 最短匹配模式
2020/07/29 Python
带有css3动画效果的兼容多浏览器简单导航条示例
2014/01/26 HTML / CSS
东方红海科技面试题软件测试方面
2012/02/08 面试题
出纳岗位职责范本
2013/12/01 职场文书
大一新生军训时的自我评价分享
2013/12/05 职场文书
教师求职自荐书
2014/06/14 职场文书
预备党员思想汇报1000字
2014/10/07 职场文书
党的群众路线教育实践活动个人对照检查材料(医生)
2014/11/05 职场文书
工程竣工验收申请报告
2015/05/15 职场文书
2016年保险公众宣传日活动总结
2016/04/05 职场文书
go:垃圾回收GC触发条件详解
2021/04/24 Golang
Python函数中的不定长参数相关知识总结
2021/06/24 Python
mysql 生成连续日期及变量赋值
2022/03/20 MySQL