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 相关文章推荐
飞鱼(shqlsl) javascript作品集
Dec 16 Javascript
用ADODB.Stream转换
Jan 22 Javascript
javascript使用eval或者new Function进行语法检查
Oct 16 Javascript
jQuery使用hide方法隐藏页面上指定元素的方法
Mar 30 Javascript
JavaScript实现将xml转换成html table表格的方法
Apr 17 Javascript
浅析函数声明和函数表达式——函数声明的声明提前
May 03 Javascript
javascript表单事件处理方法详解
May 15 Javascript
下一代Bootstrap的5个特点 超酷炫!
Jun 17 Javascript
AngularJs ng-repeat 嵌套如何获取外层$index
Sep 21 Javascript
Seajs是什么及sea.js 由来,特点以及优势
Oct 13 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
vue.js项目 el-input 组件 监听回车键实现搜索功能示例
Aug 25 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中全局变量global和$GLOBALS[]的区别分析
2012/08/06 PHP
使用php发送有附件的电子邮件-(PHPMailer使用的实例分析)
2013/04/26 PHP
PHP开发中AJAX技术的简单应用
2015/12/11 PHP
PHP Header失效的原因分析及解决方法
2016/11/16 PHP
PHP读取word文档的方法分析【基于COM组件】
2017/08/01 PHP
php读取本地json文件的实例
2018/03/07 PHP
js+FSO遍历文件夹下文件并显示
2007/03/07 Javascript
javascript实现unicode和字符的互相转换
2007/07/18 Javascript
JQuery 构建客户/服务分离的链接模型中Table中的排序分析
2010/01/22 Javascript
TreeView 用法(有代码)(asp.net)
2011/07/15 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
使用apply方法实现javascript中的对象继承
2013/12/16 Javascript
微信小程序 自定义对话框实例详解
2017/01/20 Javascript
深入研究React中setState源码
2017/11/17 Javascript
解决js ajax同步请求造成浏览器假死的问题
2018/01/18 Javascript
Angular5中调用第三方库及jQuery的添加的方法
2018/06/07 jQuery
vscode中vue-cli项目es-lint的配置方法
2018/07/30 Javascript
JS实现图片幻灯片效果代码实例
2020/05/21 Javascript
[00:38]TI珍贵瞬间系列(二):笑
2020/08/26 DOTA
python批量提交沙箱问题实例
2014/10/08 Python
Python实现从脚本里运行scrapy的方法
2015/04/07 Python
python字符串连接方法分析
2016/04/12 Python
Django 创建后台,配置sqlite3教程
2019/11/18 Python
Pytorch 的损失函数Loss function使用详解
2020/01/02 Python
Python日期格式和字符串格式相互转换的方法
2020/02/18 Python
使用python检查yaml配置文件是否符合要求
2020/04/09 Python
Python通过kerberos安全认证操作kafka方式
2020/06/06 Python
Python如何绘制日历图和热力图
2020/08/07 Python
Python新建项目自动添加介绍和utf-8编码的方法
2020/12/26 Python
Numpy中的数组搜索中np.where方法详细介绍
2021/01/08 Python
耐克美国官网:Nike.com
2016/08/01 全球购物
全球领先的美容用品专卖店:Beauty Plus Salon
2018/09/04 全球购物
mysql_pconnect()和mysql_connect()有什么区别
2012/05/25 面试题
美术国培研修感言
2014/02/12 职场文书
《猴子种树》教学反思
2014/02/14 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书