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 相关文章推荐
CheckBox 如何实现全选?
Jun 23 Javascript
javascript编程起步(第二课)
Feb 27 Javascript
模仿jQuery each函数的链式调用
Jul 22 Javascript
js常用代码段收集
Oct 28 Javascript
getComputedStyle与currentStyle获取样式(style/class)
Mar 19 Javascript
浏览器页面区域大小的js获取方法
Sep 21 Javascript
JavaScript排序算法动画演示效果的实现方法
Oct 18 Javascript
jQuery根据ID、CLASS、等获取对象的实例
Dec 04 Javascript
JS实现的简单tab切换功能完整示例
Jun 20 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
解决vue cli4升级sass-loader(v8)后报错问题
Jul 30 Javascript
详解JavaScript 的执行机制
Sep 18 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实现图的邻接矩阵表示及几种简单遍历算法分析
2017/11/24 PHP
身份证号码前六位所代表的省,市,区, 以及地区编码下载
2007/04/12 Javascript
document.body.scrollTop 值总为0的解决方法 比较常见的标准问题
2009/11/30 Javascript
javaScript call 函数的用法说明
2010/04/09 Javascript
超级24小时弹窗代码 24小时退出弹窗代码 100%弹窗代码(IE only)
2010/06/11 Javascript
初识javascript 文档碎片
2010/07/13 Javascript
jquery关于页面焦点的定位(文本框获取焦点时改变样式 )
2010/09/10 Javascript
Knockout数组(observable)使用详解示例
2013/11/15 Javascript
js验证整数加保留小数点的简单实例
2013/12/02 Javascript
深入探讨JavaScript、JQuery屏蔽网页鼠标右键菜单及禁止选择复制
2014/06/10 Javascript
yepnope.js使用详解及示例分享
2014/06/23 Javascript
Javascript基础之数组的使用
2016/05/13 Javascript
Javascript使用SWFUpload进行多文件上传
2016/11/16 Javascript
完美解决IE不支持Data.parse()的问题
2016/11/24 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
浅谈vue2 单页面如何设置网页title
2017/11/08 Javascript
基于JS实现操作成功之后自动跳转页面
2020/09/25 Javascript
python中import学习备忘笔记
2017/01/24 Python
import的本质解析
2017/10/30 Python
python使用matplotlib画饼状图
2018/09/25 Python
Python 脚本获取ES 存储容量的实例
2018/12/27 Python
Python Lambda函数使用总结详解
2019/12/11 Python
使用Matplotlib绘制不同颜色的带箭头的线实例
2020/04/17 Python
Django多数据库联用实现方法解析
2020/11/12 Python
html5时钟实现代码
2010/10/22 HTML / CSS
澳大利亚在线性感内衣商店:Fantasy Lingerie
2021/02/07 全球购物
制衣厂各岗位职责
2013/12/02 职场文书
房地产还款计划书
2014/01/10 职场文书
学校门卫管理制度
2014/01/30 职场文书
四年大学生活的自我评价范文
2014/02/07 职场文书
物业工程部主管岗位职责
2015/04/16 职场文书
2015年秘书个人工作总结
2015/04/25 职场文书
会计手工模拟做账心得体会
2016/01/22 职场文书
员工工作心得体会
2019/05/07 职场文书
vue3使用vue-router的完整步骤记录
2021/06/20 Vue.js
Netty客户端接入流程NioSocketChannel创建解析
2022/03/25 Java/Android