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 相关文章推荐
学习YUI.Ext 第二天
Mar 10 Javascript
判断客户端浏览器是否安装了Flash插件的多种方法
Aug 11 Javascript
Firefox中autocomplete=&quot;off&quot; 设置不起作用Bug的解决方法
Mar 25 Javascript
提高javascript效率 一次判断,而不要次次判断
Mar 30 Javascript
JSONP 跨域访问代理API-yahooapis实现代码
Dec 02 Javascript
Javascript自定义排序 node运行 实例
Jun 05 Javascript
老生常谈jquery id选择器和class选择器的区别
Feb 12 Javascript
图解Javascript——作用域、作用域链、闭包
Mar 21 Javascript
jQuery序列化后的表单值转换成Json
Jun 16 jQuery
Vue+axios实现统一接口管理的方法
Jul 23 Javascript
Vue2.0 实现歌手列表滚动及右侧快速入口功能
Aug 08 Javascript
在vue-cli创建的项目中使用sass操作
Aug 10 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
CakePHP去除默认显示的标题及图标的方法
2008/10/22 PHP
基于simple_html_dom的使用小结
2013/07/01 PHP
PHP源码分析之变量的存储过程分解
2014/07/03 PHP
php中常量DIRECTORY_SEPARATOR用法深入分析
2014/11/14 PHP
利用js实现选项卡的特别效果的实例
2013/03/03 Javascript
jQuery setTimeout()函数使用方法
2013/04/07 Javascript
JS限制Textarea文本域字符个数的具体实现
2013/08/02 Javascript
JavaScript中的依赖注入详解
2015/03/18 Javascript
JavaScript声明变量名的语法规则
2015/07/10 Javascript
JavaScript为事件句柄绑定监听函数实例详解
2015/12/15 Javascript
去除字符串左右两边的空格(实现代码)
2016/05/12 Javascript
轻松实现js弹框显示选项
2016/09/13 Javascript
jquery中用jsonp实现搜索框功能
2016/10/18 Javascript
原生js实现对Ajax的封装(仿jquery)
2017/01/22 Javascript
学习使用Bootstrap页面排版样式
2017/05/11 Javascript
vue.js项目中实用的小技巧汇总
2017/11/29 Javascript
详解Koa中更方便简单发送响应的方式
2018/07/20 Javascript
vue-cli3搭建项目的详细步骤
2018/12/05 Javascript
vue-cli 为项目设置别名的方法
2019/10/15 Javascript
Vue的data、computed、watch源码浅谈
2020/04/04 Javascript
JS定时器如何实现提交成功提示功能
2020/06/12 Javascript
echarts 使用formatter 修改鼠标悬浮事件信息操作
2020/07/20 Javascript
JS遍历树层级关系实现原理解析
2020/08/31 Javascript
js实现弹幕墙效果
2020/12/10 Javascript
[51:36]Optic vs Newbee 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
用python读写excel的方法
2014/11/18 Python
Python企业编码生成系统总体系统设计概述
2019/07/26 Python
Python类的动态绑定实现原理
2020/03/21 Python
华为消费者德国官方网站:HUAWEI德国
2020/11/03 全球购物
中年人生感言
2014/02/04 职场文书
岗位聘任书范文
2014/03/29 职场文书
环保倡议书范文
2014/05/12 职场文书
2014党的群众路线教育实践活动总结材料
2014/10/31 职场文书
2014年客服工作总结与计划
2014/12/09 职场文书
继承公证书格式
2015/01/26 职场文书
2016年度员工工作表现评语
2015/12/02 职场文书