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 避免闭包引发的问题
Mar 17 Javascript
通过js动态操作table(新增,删除相关列信息)
May 23 Javascript
jquery的$getjson调用并获取远程的JSON字符串问题
Dec 10 Javascript
Javascript中的作用域和上下文深入理解
Jul 03 Javascript
jQuery插件datalist实现很好看的input下拉列表
Jul 14 Javascript
jquery实现表单输入时提示文字滑动向上效果
Aug 10 Javascript
纯JS焦点图特效实例(可一个页面多用)
Dec 07 Javascript
Angular中$broadcast和$emit的使用方法详解
May 22 Javascript
利用js编写网页进度条效果
Oct 08 Javascript
微信小程序checkbox组件使用详解
Jan 31 Javascript
微信小程序自定义toast弹窗效果的实现代码
Nov 15 Javascript
ant design vue的form表单取值方法
Jun 01 Vue.js
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函数的实现原理及性能分析(三)
2015/05/13 PHP
Symfony2实现在doctrine中内置数据的方法
2016/02/05 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
手把手编写PHP框架 深入了解MVC运行流程
2016/09/19 PHP
PHP+Ajax实现上传文件进度条动态显示进度功能
2018/06/04 PHP
PHP autoload使用方法及步骤详解
2020/09/05 PHP
JQery jstree 大数据量问题解决方法
2010/03/09 Javascript
JQuery Easyui Tree的oncheck事件实现代码
2010/05/28 Javascript
javascript 使td内容不换行不撑开
2012/11/29 Javascript
JavaScript数据类型之基本类型和引用类型的值
2015/04/01 Javascript
url传递的参数值中包含&amp;时,url自动截断问题的解决方法
2016/08/02 Javascript
javascript 动态脚本添加的简单方法
2016/10/11 Javascript
three.js快速入门【推荐】
2017/01/21 Javascript
原生js实现秒表计时器功能
2017/02/16 Javascript
微信小程序中hidden不生效原因的解决办法
2017/04/26 Javascript
vue项目中导入swiper插件的方法
2018/01/30 Javascript
微信小程序模板(template)使用详解
2018/01/31 Javascript
vue axios登录请求拦截器
2018/04/02 Javascript
vue使用中的内存泄漏【推荐】
2018/07/10 Javascript
vue项目在安卓低版本机显示空白的原因分析(两种)
2018/09/04 Javascript
element-ui中按需引入的实现
2019/12/25 Javascript
element-ui tree结构实现增删改自定义功能代码
2020/08/31 Javascript
python中使用百度音乐搜索的api下载指定歌曲的lrc歌词
2014/07/18 Python
python类和继承用法实例
2015/07/07 Python
python 识别图片中的文字信息方法
2018/05/10 Python
Django REST framework 分页的实现代码
2019/06/19 Python
Python网页解析器使用实例详解
2020/05/30 Python
GUESS盖尔斯法国官网:美国时尚品牌
2016/09/23 全球购物
美国领先的在线邮轮旅游公司:CruiseDirect
2018/06/07 全球购物
HashMap和Hashtable的区别
2013/05/18 面试题
介绍一下MYSQL常用的优化技巧
2012/10/25 面试题
创建学习型党组织实施方案
2014/03/29 职场文书
党的群众路线教育实践活动实施方案
2014/10/31 职场文书
2014年煤矿工作总结
2014/11/24 职场文书
呼兰河传读书笔记
2015/06/30 职场文书
网络研修心得体会
2016/01/08 职场文书