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 相关文章推荐
用js脚本控制asp.net下treeview的NodeCheck的实现代码
Mar 02 Javascript
jQuery防止重复绑定事件的解决方法
May 14 Javascript
使用jquery/js获取iframe父子级、同级获取元素的方法
Aug 05 Javascript
真正好用的js验证上传文件大小的简单方法
Oct 27 Javascript
微信小程序 devtool隐藏的秘密
Jan 21 Javascript
JavaScript箭头(arrow)函数详解
Jun 04 Javascript
谈谈对vue响应式数据更新的误解
Aug 01 Javascript
node跨域请求方法小结
Aug 25 Javascript
JS实现利用闭包判断Dom元素和滚动条的方向示例
Aug 26 Javascript
layer.js open 隐藏滚动条的例子
Sep 05 Javascript
超简单的微信小程序轮播图
Nov 22 Javascript
vue组件库的在线主题编辑器的实现思路
Apr 03 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
我的论坛源代码(一)
2006/10/09 PHP
PHP中查询SQL Server或Sybase时TEXT字段被截断的解决方法
2009/03/10 PHP
关于页面优化和伪静态
2009/10/11 PHP
php中根据某年第几天计算出日期年月日的代码
2011/02/24 PHP
CodeIgniter输出中文乱码的两种解决办法
2014/06/12 PHP
功能强大的php文件上传类
2016/08/29 PHP
自写的利用PDO对mysql数据库增删改查操作类
2018/02/19 PHP
php集成开发环境详解
2019/09/24 PHP
javascript 数组的方法集合
2008/06/05 Javascript
HTA版JSMin(省略修饰语若干)基于javascript语言编写
2009/12/24 Javascript
jQuery瀑布流插件Wookmark使用实例
2014/04/02 Javascript
jQuery功能函数详解
2015/02/01 Javascript
jQuery实现按钮只点击一次后就取消点击事件绑定的方法
2015/06/26 Javascript
解决js函数闭包内存泄露问题的办法
2016/01/25 Javascript
jQuery toggle 代替方法
2016/03/22 Javascript
js严格模式总结(分享)
2016/08/22 Javascript
JavaScript实现事件的中断传播和行为阻止方法示例
2017/01/20 Javascript
基于Vue2的独立构建与运行时构建的差别(详解)
2017/12/06 Javascript
vue脚手架中配置Sass的方法
2018/01/04 Javascript
浅谈手写node可读流之流动模式
2018/06/01 Javascript
纯JS实现出生日期[年月日]下拉菜单效果
2018/06/01 Javascript
微信小程序实现点击导航条切换页面
2020/11/19 Javascript
[02:36]DOTA2混沌骑士 英雄基础教程
2013/11/26 DOTA
Python脚本在Appium库上对移动应用实现自动化测试
2015/04/17 Python
python 执行shell命令并将结果保存的实例
2018/05/11 Python
python多线程并发实例及其优化
2019/06/27 Python
python设计tcp数据包协议类的例子
2019/07/23 Python
解决在keras中使用model.save()函数保存模型失败的问题
2020/05/21 Python
俄罗斯皮肤健康中心:Pharmacosmetica.ru
2020/02/22 全球购物
智能室内花园:Click & Grow
2021/01/29 全球购物
家长给小学生的评语
2014/01/30 职场文书
遗失说明具结保证书
2015/02/26 职场文书
一个都不能少观后感
2015/06/04 职场文书
导游词之嵊泗列岛
2019/10/30 职场文书
根德5570型九灯四波段立体声收音机是电子管收音机的楷模 ? 再论5570
2022/04/05 无线电
Golang原生rpc(rpc服务端源码解读)
2022/04/07 Golang