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表单常用验证集合
Jan 16 Javascript
在javascript中实现函数数组的方法
Dec 25 Javascript
node.js中的path.normalize方法使用说明
Dec 08 Javascript
javascript实现通过表格绘制颜色填充矩形的方法
Apr 21 Javascript
AngularJs concepts详解及示例代码
Sep 01 Javascript
canvas绘制表盘时钟
Jan 23 Javascript
详解Vue中使用v-for语句抛出错误的解决方案
May 04 Javascript
jQuery 禁止表单用户名、密码自动填充功能
Oct 30 jQuery
浅谈vue项目优化之页面的按需加载(vue+webpack)
Dec 11 Javascript
layerui代码控制tab选项卡,添加,关闭的实例
Sep 04 Javascript
关于JS解构的5种有趣用法
Sep 05 Javascript
javascript设计模式 ? 访问者模式原理与用法实例分析
Apr 26 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
深入理解require与require_once与include以及include_once的区别
2013/06/05 PHP
PHP session文件独占锁引起阻塞问题解决方法
2015/05/12 PHP
配置eAccelerator和XCache扩展来加速PHP程序的执行
2015/12/22 PHP
php注册登录系统简化版
2020/12/28 PHP
php判断是否为ajax请求的方法
2016/11/29 PHP
PHP自动补全表单的两种方法
2017/03/06 PHP
PHP无限极分类函数的实现方法详解
2017/04/15 PHP
js中关于String对象的replace使用详解
2011/05/24 Javascript
Javascript 浮点运算精度问题分析与解决
2014/03/26 Javascript
jQuery学习总结之jQuery事件
2014/06/30 Javascript
JavaScript SweetAlert插件实现超酷消息警告框
2016/01/28 Javascript
Bootstrap轮播插件简单使用方法介绍
2016/06/21 Javascript
bootstrap网格系统使用方法解析
2017/01/13 Javascript
jQuery为DOM动态追加事件的方法
2017/02/16 Javascript
BACKBONE.JS 简单入门范例
2017/10/17 Javascript
在Vue项目中引入腾讯验证码服务的教程
2018/04/03 Javascript
JS+CSS3实现的简易钟表效果示例
2019/04/13 Javascript
vue-cli脚手架的.babelrc文件用法说明
2020/09/11 Javascript
javascript自定义加载loading效果
2020/09/15 Javascript
Python yield 使用方法浅析
2017/05/20 Python
python实现八大排序算法(1)
2017/09/14 Python
python3+dlib实现人脸识别和情绪分析
2018/04/21 Python
pip命令无法使用的解决方法
2018/06/12 Python
Python zip函数打包元素实例解析
2019/12/11 Python
Numpy与Pytorch 矩阵操作方式
2019/12/27 Python
python Plotly绘图工具的简单使用
2020/03/03 Python
做一个能自适应高度的textarea的示例代码
2019/09/06 HTML / CSS
生育关怀行动实施方案
2014/03/26 职场文书
经贸日语专业自荐信
2014/09/02 职场文书
公积金接收函格式
2015/01/30 职场文书
中学生学习保证书
2015/02/26 职场文书
穆斯林的葬礼读书笔记
2015/06/26 职场文书
运动会报道稿大全
2015/07/23 职场文书
2016大学生优秀志愿者事迹材料
2016/02/25 职场文书
MySQL索引篇之千万级数据实战测试
2021/04/05 MySQL