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类和继承 prototype属性
Sep 03 Javascript
SOSO地图JS画出标注和中心点以html形式运行
Aug 09 Javascript
javascript的parseFloat()方法精度问题探讨
Nov 26 Javascript
解析Javascript小括号“()”的多义性
Dec 03 Javascript
js实现当复选框选择匿名登录时隐藏登录框效果
Aug 14 Javascript
通过正则表达式获取url中参数的简单实现
Jun 07 Javascript
浅谈JQ中mouseover和mouseenter的区别
Sep 13 Javascript
Bootstrap整体框架之JavaScript插件架构
Dec 15 Javascript
微信小程序之绑定点击事件实例详解
Jul 07 Javascript
jQuery实现的表格前端排序功能示例
Sep 18 jQuery
vue实现移动端悬浮窗效果
Dec 01 Javascript
微信小程序判断用户是否需要再次授权获取个人信息
Jul 18 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中使用FFMPEG获取视频缩略图和视频总时长实例
2014/05/04 PHP
php集成套件服务器xampp安装使用教程(适合第一次玩PHP的新手)
2015/06/03 PHP
php实现websocket实时消息推送
2018/03/30 PHP
发布一个基于javascript的动画类 Fx.js
2010/11/05 Javascript
jQuery .attr()和.removeAttr()方法操作元素属性示例
2013/07/16 Javascript
JS图片等比例缩放方法完整示例
2016/08/03 Javascript
使用ajaxfileupload.js实现上传文件功能
2016/08/13 Javascript
jQuery实现单击按钮遮罩弹出对话框效果(2)
2017/02/20 Javascript
JavaScript之Date_动力节点Java学院整理
2017/06/28 Javascript
Vue shopCart 组件开发详解
2018/01/26 Javascript
Vue2.2.0+新特性整理及注意事项
2018/08/22 Javascript
Vue 组件修改根实例的数据的方法
2019/04/02 Javascript
浅谈Vue.js之初始化el以及数据的绑定说明
2019/11/14 Javascript
vue中echarts引入中国地图的案例
2020/07/28 Javascript
解决vue请求接口第一次成功,第二次失败问题
2020/09/08 Javascript
js实现简单的随机点名器
2020/09/17 Javascript
基于vuex实现购物车功能
2021/01/10 Vue.js
[05:40]DOTA2荣耀之路6:Wings最后进攻
2018/05/30 DOTA
利用Python开发实现简单的记事本
2016/11/15 Python
python编程使用selenium模拟登陆淘宝实例代码
2018/01/25 Python
python3+PyQt5自定义视图详解
2018/04/24 Python
Pyqt5自适应布局实例
2019/12/13 Python
Python selenium抓取虎牙短视频代码实例
2020/03/02 Python
HTML 5.1来了 9月份正式发布 更新内容预览
2016/04/26 HTML / CSS
瑞士领先的网上超市:LeShop.ch
2018/11/14 全球购物
澳大利亚和新西兰最大的在线旅行社之一:Aunt Betty
2019/08/07 全球购物
我的求职计划书
2014/01/10 职场文书
安全生产投入制度
2014/01/29 职场文书
学校门卫管理制度
2014/01/30 职场文书
大学生在校学习的自我评价
2014/02/18 职场文书
小学生保护环境倡议书
2014/05/15 职场文书
植树节标语
2014/06/27 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
董事长新年致辞
2015/07/29 职场文书
2015年美容师个人工作总结
2015/10/14 职场文书
广告文案的撰写技巧(实用干货)
2019/08/23 职场文书