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+HttpHandler实现图片裁剪效果代码(适用于论坛, SNS)
Sep 02 Javascript
JS(JQuery)操作Array的相关方法介绍
Feb 11 Javascript
jQuery 1.9使用$.support替代$.browser的使用方法
May 27 Javascript
自动完成的搜索框javascript实现
Feb 26 Javascript
Javascript中的prototype与继承
Feb 06 Javascript
ES6深入理解之“let”能替代”var“吗?
Jun 28 Javascript
常用的 JS 排序算法 整理版
Apr 05 Javascript
JavaScript实现点击出现图片并统计点击次数功能示例
Jul 23 Javascript
JS数组去重的6种方法完整实例
Dec 08 Javascript
RxJS在TypeScript中的简单使用详解
Apr 13 Javascript
vue element ui validate 主动触发错误提示操作
Sep 21 Javascript
vue实现下载文件流完整前后端代码
Nov 17 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
一个MYSQL操作类
2006/11/16 PHP
PHP实现支持SSL连接的SMTP邮件发送类
2015/03/05 PHP
Yii2创建表单(ActiveForm)方法详解
2016/07/23 PHP
推荐30个新鲜出炉的精美 jQuery 效果
2012/03/26 Javascript
js 3种归并操作的实例代码
2013/10/30 Javascript
原生javascript实现图片弹窗交互效果
2015/01/12 Javascript
js实现的星星评分功能函数
2015/12/09 Javascript
纯js代码制作的网页时钟特效【附实例】
2016/03/30 Javascript
微信小程序 wx.request(接口调用方式)详解及实例
2016/11/23 Javascript
Angular中$state.go页面跳转并传递参数的方法
2017/05/09 Javascript
用最简单的方法判断JavaScript中this的指向(推荐)
2017/09/04 Javascript
Javascript 严格模式use strict详解
2017/09/16 Javascript
微信小程序之数据绑定原理解析
2019/08/14 Javascript
js实现小星星游戏
2020/03/23 Javascript
[01:06:19]DOTA2-DPC中国联赛定级赛 LBZS vs SAG BO3第二场 1月8日
2021/03/11 DOTA
python实现从字符串中找出字符1的位置以及个数的方法
2014/08/25 Python
介绍Python中的fabs()方法的使用
2015/05/14 Python
python互斥锁、加锁、同步机制、异步通信知识总结
2018/02/11 Python
Python3爬虫爬取英雄联盟高清桌面壁纸功能示例【基于Scrapy框架】
2018/12/05 Python
python获取交互式ssh shell的方法
2019/02/14 Python
Django 迁移、操作数据库的方法
2019/08/02 Python
Tensorflow之梯度裁剪的实现示例
2020/03/08 Python
opencv python 图片读取与显示图片窗口未响应问题的解决
2020/04/24 Python
Python命名空间namespace及作用域原理解析
2020/06/05 Python
python使用bs4爬取boss直聘静态页面
2020/10/10 Python
socket.io 和canvas 实现的共享画板功能
2019/05/22 HTML / CSS
365 Tickets英国:全球景点门票
2019/07/06 全球购物
台湾良兴购物网:EcLife
2019/12/01 全球购物
商场经理竞聘演讲稿
2014/01/01 职场文书
庆国庆活动总结
2014/08/28 职场文书
法定代表人授权委托书
2014/09/19 职场文书
2014年审计工作总结
2014/11/17 职场文书
十岁生日答谢词
2015/01/05 职场文书
公司员工体检通知
2015/04/21 职场文书
安全第一课观后感
2015/06/18 职场文书
Nginx本地配置SSL访问的实例教程
2022/05/30 Servers