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控件autocomplete 0.11演示及下载 1月5日已更新
Jan 09 Javascript
利用jQuery插件扩展识别浏览器内核与外壳的类型和版本的实现代码
Oct 22 Javascript
js 控制图片大小核心讲解
Oct 09 Javascript
jquery实现点击文字可编辑并修改保存至数据库
Apr 15 Javascript
node.js中的fs.fsyncSync方法使用说明
Dec 15 Javascript
jQuery实现选项联动轮播效果【附实例】
Apr 19 Javascript
新手学习前端之js模仿淘宝主页网站
Oct 31 Javascript
Vue+webpack项目配置便于维护的目录结构教程详解
Oct 14 Javascript
深入理解vue中的slot与slot-scope
Apr 22 Javascript
Node.js爬虫如何获取天气和每日问候详解
Aug 26 Javascript
layui操作列按钮个数和文字颜色的判断实例
Sep 11 Javascript
Vue 打包体积优化方案小结
May 20 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 远程文件管理,可以给表格排序,遍历目录,时间排序
2009/08/07 PHP
php上的memcache和memcached两个pecl库
2010/03/29 PHP
(PHP实现)只使用++运算实现加法,减法,乘法,除法
2013/06/27 PHP
php使用array_rand()函数从数组中随机选择一个或多个元素
2014/04/28 PHP
Thinkphp将二维数组变为标签适用的一维数组方法总结
2014/10/30 PHP
Jquery练习之表单验证实现代码
2010/12/14 Javascript
jQuery当鼠标悬停时放大图片的效果实例
2013/07/03 Javascript
jquery 模板的应用示例
2013/11/12 Javascript
兼容主流浏览器的iframe自适应高度js脚本
2014/01/10 Javascript
javascript 回调函数详解
2014/11/11 Javascript
详解jQuery移动页面开发中的ui-grid网格布局使用
2015/12/03 Javascript
Angularjs中controller的三种写法分享
2016/09/21 Javascript
JavaScript的new date等日期函数在safari中遇到的坑
2016/10/24 Javascript
javascript 中的事件委托详解
2016/10/25 Javascript
微信小程序 解决swiper不显示图片的方法
2017/01/04 Javascript
Bootstarp 基础教程之表单部分实例代码
2017/02/03 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
微信小程序获取音频时长与实时获取播放进度问题
2018/08/28 Javascript
详解vue中this.$emit()的返回值是什么
2019/04/07 Javascript
vue3.0搭配.net core实现文件上传组件
2020/10/29 Javascript
五句话帮你轻松搞定js原型链
2020/12/09 Javascript
Python中的XML库4Suite Server的介绍
2015/04/14 Python
Python调用C++程序的方法详解
2017/01/24 Python
Python3使用SMTP发送带附件邮件
2020/06/16 Python
Python设计模式之抽象工厂模式原理与用法详解
2019/01/15 Python
python selenium执行所有测试用例并生成报告的方法
2019/02/13 Python
简单了解python变量的作用域
2019/07/30 Python
python实现快递价格查询系统
2020/03/03 Python
Python调用接口合并Excel表代码实例
2020/03/31 Python
基于Python实现简单学生管理系统
2020/07/24 Python
学校十一活动方案
2014/02/01 职场文书
捐款倡议书范文
2014/02/02 职场文书
档案接收函格式
2015/01/30 职场文书
试用期自我评价范文
2015/03/10 职场文书
周一早安温馨问候祝福语!
2019/07/15 职场文书