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 鼠标移动上去小三角形滑块缓慢跟随效果
Apr 26 Javascript
javascript中自定义对象的属性方法分享
Jul 12 Javascript
js对列表中第一个值处理与jsp页面对列表中第一个值处理的区别详解
Nov 05 Javascript
jquery选择器使用详解
Apr 08 Javascript
php和js对数据库图片进行等比缩放示例
Apr 28 Javascript
javascript中实现兼容JAVA的hashCode算法代码分享
Aug 11 Javascript
基于jQuery实现数字滚动效果
Jan 16 Javascript
微信小程序 蓝牙的实现实例代码
Jun 27 Javascript
vue中promise的使用及异步请求数据的方法
Nov 08 Javascript
JS中的算法与数据结构之二叉查找树(Binary Sort Tree)实例详解
Aug 16 Javascript
深入理解Antd-Select组件的用法
Feb 25 Javascript
Vant+postcss-pxtorem 实现浏览器适配功能
Feb 05 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
用mysql内存表来代替php session的类
2009/02/01 PHP
使用YUI+Ant 实现JS CSS压缩
2014/09/02 PHP
php防止sql注入简单分析
2015/03/18 PHP
PHP内核探索:哈希表碰撞攻击原理
2015/07/31 PHP
php数组函数array_walk用法示例
2016/05/26 PHP
JavaScript获取页面上被选中文字的方法技巧
2015/03/13 Javascript
JS实现仿新浪微博发布内容为空时提示功能代码
2015/08/19 Javascript
Bootstrap Metronic完全响应式管理模板之菜单栏学习笔记
2016/07/08 Javascript
jQuery实现立体式数字滚动条增加效果
2016/12/21 Javascript
实现一个简单的vue无限加载指令方法
2017/01/10 Javascript
JS之if语句对接事件动作逻辑(详解)
2017/06/28 Javascript
详解angularjs的数组传参方式的简单实现
2017/07/28 Javascript
Vue学习笔记之表单输入控件绑定
2017/09/05 Javascript
node.js中axios使用心得总结
2017/11/29 Javascript
使用vue点击li,获取当前点击li父辈元素的属性值方法
2018/09/12 Javascript
angular中如何绑定iframe中src的方法
2019/02/01 Javascript
用原生 JS 实现 innerHTML 功能实例详解
2019/04/03 Javascript
js 计算图片内点个数的示例代码
2019/04/04 Javascript
Javascript模拟实现new原理解析
2020/03/03 Javascript
在vue中配置不同的代理同时访问不同的后台操作
2020/09/11 Javascript
Vue+element+cookie记住密码功能的简单实现方法
2020/09/20 Javascript
python获取当前运行函数名称的方法实例代码
2017/04/06 Python
名片管理系统python版
2018/01/11 Python
python中virtualenvwrapper安装与使用
2018/05/20 Python
python实现输入的数据在地图上生成热力图效果
2019/12/06 Python
CSS3的Border-radius轻松制作圆角
2012/12/24 HTML / CSS
美国大型的健身社区和补充商店:Bodybuilding.com
2016/09/06 全球购物
MADE法国:提供原创设计师家具
2018/09/18 全球购物
最经典的大学生职业生涯规划范文
2014/03/05 职场文书
县委常委班子对照检查材料思想汇报
2014/09/28 职场文书
2015年会计人员工作总结
2015/05/22 职场文书
小学教师读书笔记
2015/07/01 职场文书
健康教育主题班会
2015/08/14 职场文书
如何用JS实现简单的数据监听
2021/05/06 Javascript
SpringBoot 集成Redis 过程
2021/06/02 Redis
CSS3实现列表无限滚动/轮播效果
2021/06/23 HTML / CSS