JavaScript中click和onclick本质区别与用法分析


Posted in Javascript onJune 07, 2018

本文实例讲述了JavaScript中click和onclick本质区别与用法。分享给大家供大家参考,具体如下:

原生javascript的click在w3c里边的阐述是DOM button对象,也是html DOM click() 方法,可模拟在按钮上的一次鼠标单击。

button 对象代表 HTML 文档中的一个按钮。button元素没有默认的行为,但是必须有一个 onclick 事件句柄以便使用。

语法:buttonObject.click()

<html>
<head>
<script type="text/javascript">
function clickButton()
 {
 document.getElementById('button1').click()
 }
function alertMsg()
 {
 alert("Button 1 was clicked!")
 }
</script>
</head>
<body onload="clickButton()">
<form>
<input type="button" id="button1" onclick="alertMsg()" value="Button 1" />
</form>
</body>
</html>

onclick是一个事件,Event对象 。支持该事件的 JavaScript 对象:button, document, checkbox, link, radio, reset, submit

HTML DOM Event 对象,代表事件的状态,比如事件在其中发生的元素、键盘按键的状态、鼠标的位置、鼠标按钮的状态。事件通常与函数结合使用,函数不会在事件发生前被执行!

<html>
<body>
  Field1: <input type="text" id="field1" value="Hello World!"><br />
  Field2: <input type="text" id="field2"> <br />
  点击下面的按钮,把 Field1 的内容拷贝到 Field2 中: <br />
  <button onclick="document.getElementById('field2').value=document.getElementById('field1').value">Copy Text</button>
</body>
</html>

区别

前面说了click是一个方法,onclick是一个事件。

而最根本的问题是,方法和事件的区别是什么呢?

其区别在于:

1.事件名前一般都以on开头;

2.方法是程序员写语句直接调用,即显示调用;【可以触发onclick事件】

3.事件不需程序员调用,但是,必须由程序员写一个函数且将该函数赋值给相应的事件,其调用是在相应的事件触发时。【告诉浏览器在鼠标点击时候要做什么】所以调用顺序是:首先方法其次事件。

可以扩展学习和参考的文章:

1.$("").clickonclick的区别示例介绍
地址:https://3water.com/article/55650.htm

2.从零开始学习jQuery (五) jquery事件与事件对象
地址:https://3water.com/article/26331.htm

3.jQuery动态移除与增加onclick属性的方法详解
地址:https://3water.com/article/141648.htm

PS:关于javascript事件说明可参考本站javascript事件与功能说明大全:http://tools.3water.com/table/javascript_event

希望本文所述对大家JavaScript程序设计有所帮助。

Javascript 相关文章推荐
网页javascript精华代码集
Jan 24 Javascript
jQuery(js)获取文字宽度(显示长度)示例代码
Dec 31 Javascript
js输出阴历、阳历、年份、月份、周示例代码
Jan 29 Javascript
Asp.Net之JS生成分页条的方法
Nov 23 Javascript
关于JS Lodop打印插件打印Bootstrap样式错乱问题的解决方案
Dec 23 Javascript
Vue.js仿Metronic高级表格(二)数据渲染
Apr 19 Javascript
vue组件发布到npm简单步骤
Nov 30 Javascript
Vue 开发音乐播放器之歌手页右侧快速入口功能
Aug 08 Javascript
详解使用React.memo()来优化函数组件的性能
Mar 19 Javascript
谈谈JavaScript令人迷惑的==与+
Aug 31 Javascript
详解vue 中 scoped 样式作用域的规则
Sep 14 Javascript
Ajax实现页面无刷新留言效果
Mar 24 Javascript
jQuery动态移除与增加onclick属性的方法详解
Jun 07 #jQuery
使用Vue-cli 3.0搭建Vue项目的方法
Jun 07 #Javascript
vue 国际化 vue-i18n 双语言 语言包
Jun 07 #Javascript
vue cli2.0单页面title修改方法
Jun 07 #Javascript
JS实现同一DOM元素上onClick事件与onDblClick事件并存的解决方法
Jun 07 #Javascript
JavaScript事件委托原理与用法实例分析
Jun 07 #Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 #jQuery
You might like
php截取后台登陆密码的代码
2012/05/05 PHP
一键生成各种尺寸Icon的php脚本(实例)
2017/02/08 PHP
PHP正则表达式函数preg_replace用法实例分析
2020/06/04 PHP
js类中获取外部函数名的方法
2007/08/19 Javascript
function foo的原型与prototype属性解惑
2010/11/19 Javascript
Jquery 模拟用户点击超链接或者按钮的方法
2013/10/25 Javascript
js实现表单及时验证功能 用户信息立即验证
2016/09/13 Javascript
谈谈Vue.js——vue-resource全攻略
2017/01/16 Javascript
教你快速搭建Node.Js服务器的方法教程
2017/03/30 Javascript
基于vue2.0实现的级联选择器
2017/06/09 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
浅谈Angular2 模块懒加载的方法
2017/10/04 Javascript
详解node child_process模块学习笔记
2018/01/24 Javascript
Vue底层实现原理总结
2018/02/17 Javascript
React事件处理的机制及原理
2018/12/03 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
uin-app+mockjs实现本地数据模拟
2020/08/26 Javascript
[01:46]新英雄登场
2019/09/10 DOTA
python 编码规范整理
2018/05/05 Python
python使用folium库绘制地图点击框
2018/09/21 Python
Python 判断图像是否读取成功的方法
2019/01/26 Python
python交互模式下输入换行/输入多行命令的方法
2019/07/02 Python
python3 线性回归验证方法
2019/07/09 Python
django 自定义filter 判断if var in list的例子
2019/08/20 Python
用python生成与调用cntk模型代码演示方法
2019/08/26 Python
Python hashlib模块实例使用详解
2019/12/24 Python
纯css3使用vw和vh实现自适应的方法
2018/02/09 HTML / CSS
阿提哈德航空官方网站:Etihad Airways
2017/01/06 全球购物
大学生咖啡店创业计划书
2014/01/21 职场文书
教师业务学习制度
2014/01/25 职场文书
会计自我鉴定
2014/02/04 职场文书
家居装修公司创业计划书范文
2014/03/20 职场文书
励志广播稿300字(5篇)
2014/09/15 职场文书
2015年司机工作总结
2015/04/23 职场文书
小学英语新课改心得体会
2016/01/22 职场文书
三好学生评选事迹材料(2016精选版)
2016/02/25 职场文书