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中判断对象类型的几种方法总结
Nov 11 Javascript
字段太多jquey快速清空表单内容方法
Aug 21 Javascript
Vue计算属性的学习笔记
Mar 22 Javascript
Javascript ES6中对象类型Sets的介绍与使用详解
Jul 17 Javascript
ES6新增的math,Number方法
Aug 06 Javascript
vue中eventbus被多次触发以及踩过的坑
Dec 02 Javascript
jQuery实现获取选中复选框的值实例详解
Jun 28 jQuery
vue.js轮播图组件使用方法详解
Jul 03 Javascript
JavaScript常见鼠标事件与用法分析
Jan 03 Javascript
原来JS还可以这样拆箱转换详解
Feb 01 Javascript
javascript数组去重方法总结(推荐)
Mar 20 Javascript
JavaScript简易计算器制作
Jan 17 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的5个入手程序
2006/11/23 PHP
深入理解JavaScript系列(42):设计模式之原型模式详解
2015/03/04 Javascript
JavaScript蒙板(model)功能的简单实现代码
2016/08/04 Javascript
Vue.js第一天学习笔记(数据的双向绑定、常用指令)
2016/12/01 Javascript
JS中setTimeout和setInterval的最大延时值详解
2017/02/13 Javascript
js date 格式化
2017/02/15 Javascript
基于Vue实例对象的数据选项
2017/08/09 Javascript
原生JS实现日历组件的示例代码
2017/09/22 Javascript
JQuery选中select组件被选中的值方法
2018/03/08 jQuery
vue element项目引入icon图标的方法
2018/06/06 Javascript
Vue点击切换颜色的方法
2018/09/13 Javascript
JavaScript的查询机制LHS和RHS解析
2019/08/16 Javascript
用js编写留言板
2020/03/17 Javascript
ES6函数和数组用法实例分析
2020/05/23 Javascript
JavaScript如何操作css
2020/10/24 Javascript
[01:28]2014DOTA2国际邀请赛中国区预选赛四大豪门直升机抵达会场
2014/05/24 DOTA
[59:32]Liquid vs Fnatic 2019国际邀请赛淘汰赛败者组BO1 8.20.mp4
2020/07/19 DOTA
对python以16进制打印字节数组的方法详解
2019/01/24 Python
set在python里的含义和用法
2019/06/24 Python
Python 实例方法、类方法、静态方法的区别与作用
2019/08/14 Python
淘宝秒杀python脚本 扫码登录版
2019/09/19 Python
Python StringIO如何在内存中读写str
2020/01/07 Python
Python常用数字处理基本操作汇总
2020/09/10 Python
使用Python实现音频双通道分离
2020/12/25 Python
CSS3教程(1):什么是CSS3
2009/04/02 HTML / CSS
收集的22款给力的HTML5和CSS3帮助工具
2012/09/14 HTML / CSS
HTML5 canvas基本绘图之文字渲染
2016/06/27 HTML / CSS
Haglöfs瑞典官方网站:haglofs火柴棍,欧洲顶级户外品牌
2018/10/18 全球购物
Bravofly德国:预订廉价航班和酒店
2019/09/22 全球购物
母亲七十大寿答谢词
2014/01/18 职场文书
党员四风剖析材料
2014/08/27 职场文书
党员群众路线对照检查材料
2014/08/31 职场文书
2014年煤矿工人工作总结
2014/12/08 职场文书
《称赞》教学反思
2016/02/17 职场文书
Python3中PyQt5简单实现文件打开及保存
2021/06/10 Python
一文弄懂MySQL中redo log与binlog的区别
2022/02/15 MySQL