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 相关文章推荐
jQuery表单验证插件formValidator(改进版)
Feb 03 Javascript
Ext修改GridPanel数据和字体颜色、css属性等
Jun 13 Javascript
JavaScript按值删除数组元素的方法
Apr 24 Javascript
javascript结合canvas实现图片旋转效果
May 03 Javascript
jQuery使用正则表达式限制文本框只能输入数字
Jun 18 Javascript
JS跨域交互(jQuery+php)之jsonp使用心得
Jul 01 Javascript
详解vue组件化开发-vuex状态管理库
Apr 10 Javascript
es6中Promise 对象基本功能与用法实例分析
Feb 23 Javascript
Vue如何基于es6导入外部js文件
May 15 Javascript
vue 二维码长按保存和复制内容操作
Sep 22 Javascript
JavaScript本地储存:localStorage、sessionStorage、cookie的使用
Oct 13 Javascript
vue常用高阶函数及综合实例
Feb 25 Vue.js
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将某个目录下面的所有文件罗列出来的方法详解
2013/06/21 PHP
php集成环境xampp中apache无法启动问题解决方案
2014/11/18 PHP
php正则去除网页中所有的html,js,css,注释的实现方法
2016/11/03 PHP
jquery 弹出层实现代码
2009/10/30 Javascript
使用jquery为table动态添加行的实现代码
2011/03/30 Javascript
如何让页面加载完成后执行js
2013/06/26 Javascript
js解决弹窗问题实现班级跳转DIV示例
2014/01/06 Javascript
JS表单验证的代码(常用)
2016/04/08 Javascript
JavaScript数组方法总结分析
2016/05/06 Javascript
bootstrap网页框架的使用方法
2016/05/10 Javascript
全面了解JavaScript的数据类型转换
2016/07/01 Javascript
Bootstrap CSS布局之表格
2016/12/17 Javascript
js实现做通讯录的索引滑动显示效果和滑动显示锚点效果
2017/02/18 Javascript
Vue.js实现双向数据绑定方法(表单自动赋值、表单自动取值)
2018/08/27 Javascript
在Vue中获取组件声明时的name属性方法
2018/09/12 Javascript
JS实现的新闻列表自动滚动效果示例
2019/01/30 Javascript
使用React-Router实现前端路由鉴权的示例代码
2020/07/26 Javascript
vue配置多代理服务接口地址操作
2020/09/08 Javascript
django开发之settings.py中变量的全局引用详解
2017/03/29 Python
Python使用字典的嵌套功能详解
2019/02/27 Python
python 堆和优先队列的使用详解
2019/03/05 Python
VSCode配合pipenv搞定虚拟环境的实现方法
2020/05/17 Python
python中uuid模块实例浅析
2020/12/29 Python
open_basedir restriction in effect. 原因与解决方法
2021/03/14 PHP
CSS3 icon font完全指南(CSS3 font 会取代icon图标)
2013/01/06 HTML / CSS
英国独特的时尚和生活方式品牌:JOY
2018/03/17 全球购物
茱莉蔻美国官网:Jurlique美国
2020/11/24 全球购物
.NET面试题:什么是反射
2016/09/30 面试题
房地产促销活动方案
2014/03/01 职场文书
骨干教师考核方案
2014/05/09 职场文书
2014银行领导班子四风对照检查材料思想汇报
2014/09/25 职场文书
2014年电厂个人工作总结
2014/11/27 职场文书
Python 高级库15 个让新手爱不释手(推荐)
2021/05/15 Python
源码解读Spring-Integration执行过程
2021/06/11 Java/Android
mysql timestamp比较查询遇到的坑及解决
2021/11/27 MySQL
Windows Server 修改远程桌面端口的实现
2022/06/25 Servers