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 相关文章推荐
超炫的jquery仿flash导航栏特效
Nov 11 Javascript
jQuery下拉友情链接美化效果代码分享
Aug 26 Javascript
12种JavaScript常用的MVC框架比较分析
Nov 16 Javascript
html5+javascript实现简单上传的注意细节
Apr 18 Javascript
AngularJS 模块化详解及实例代码
Sep 14 Javascript
基于bootstrap实现多个下拉框同时搜索功能
Jul 19 Javascript
Vue中之nextTick函数源码分析详解
Oct 17 Javascript
重学JS之显示强制类型转换详解
Jun 30 Javascript
webpack打包html里面img后src为“[object Module]”问题
Dec 22 Javascript
微信小程序学习总结(四)事件与冒泡实例分析
Jun 04 Javascript
vue-cli 关闭热更新操作
Sep 18 Javascript
vue实现日历表格(element-ui)
Sep 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
Syphon 虹吸式咖啡壶冲煮–拨动法
2021/03/03 冲泡冲煮
十天学会php之第五天
2006/10/09 PHP
php 数组排序 array_multisort与uasort的区别
2011/03/24 PHP
linux实现php定时执行cron任务详解
2013/12/24 PHP
PHP提交表单失败后如何保留已经填写的信息
2014/06/20 PHP
PHP生成等比缩略图类和自定义函数分享
2014/06/25 PHP
wampserver改变默认网站目录的办法
2015/08/05 PHP
PHP封装的多文件上传类实例与用法详解
2017/02/07 PHP
Jquery ajax传递复杂参数给WebService的实现代码
2011/08/08 Javascript
JS中数组Array的用法示例介绍
2014/02/20 Javascript
浅析javascript中function 的 length 属性
2014/05/27 Javascript
javascript DIV实现跟随鼠标移动
2020/03/19 Javascript
Bootstrap 布局组件(全)
2016/07/18 Javascript
React Router基础使用
2017/01/17 Javascript
Javascript实现页面滚动时导航智能定位
2017/05/06 Javascript
详解vue.js之绑定class和style的示例代码
2017/08/24 Javascript
JavaScript实现计算圆周率到小数点后100位的方法示例
2018/05/08 Javascript
vue-cli 引入jQuery,Bootstrap,popper的方法
2018/09/03 jQuery
JS数组去重的6种方法完整实例
2018/12/08 Javascript
微信小程序拍照和摄像功能实现方法示例
2019/02/01 Javascript
element表格翻页第2页从1开始编号(后端从0开始分页)
2019/12/10 Javascript
[13:25]VP vs VICI (BO3)
2018/06/07 DOTA
Python入门必须知道的11个知识点
2018/03/21 Python
Python实现的文本对比报告生成工具示例
2018/05/22 Python
python自动脚本的pyautogui入门学习
2020/04/01 Python
详解Python3.8+PyQt5+pyqt5-tools+Pycharm配置详细教程
2020/11/02 Python
美国时尚在线:Showpo
2017/09/08 全球购物
庆祝教师节活动方案
2014/01/31 职场文书
大学生求职计划书
2014/04/30 职场文书
小学兴趣小组活动总结
2014/07/07 职场文书
大学生上课迟到检讨书
2014/10/15 职场文书
干部考察材料范文
2014/12/24 职场文书
2016年党员干部公开承诺书
2016/03/24 职场文书
浅谈克隆 JavaScript
2021/11/02 Javascript
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
Python实现Matplotlib,Seaborn动态数据图
2022/05/06 Python