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去除空格的几种方法
Oct 03 Javascript
国外Lightbox v2.03.3 最新版 下载
Oct 17 Javascript
JavaScript判断用户是否对表单进行了修改的方法
Mar 18 Javascript
JS中使用 after 伪类清除浮动实例
Mar 01 Javascript
微信小程序中使用javascript 回调函数
May 11 Javascript
ajax+node+request爬取网络图片的实例(宅男福利)
Aug 28 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 jQuery
微信小程序新闻网站详情页实例代码
Jan 10 Javascript
vue中 v-for循环的用法详解
Feb 19 Javascript
JS实现随机点名器
Apr 12 Javascript
vuex Module将 store 分割成模块的操作
Dec 07 Vue.js
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使用CURL获取302跳转后的地址实例
2014/05/04 PHP
PHP实现获取客户端IP并获取IP信息
2015/03/17 PHP
麦鸡的TAB切换功能结合了javascript和css
2007/12/17 Javascript
Extjs EditorGridPanel中ComboBox列的显示问题
2011/07/04 Javascript
使用js对select动态添加和删除OPTION示例代码
2013/08/12 Javascript
用jquery修复在iframe下的页面锚点失效问题
2014/08/22 Javascript
javascript和jquery实现用户登录验证
2016/05/04 Javascript
对js eval()函数的一些见解
2016/08/15 Javascript
JS插件plupload.js实现多图上传并显示进度条
2016/11/29 Javascript
jquery网页加载进度条的实现
2017/06/01 jQuery
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
JS基于封装函数实现的表格分页完整示例
2018/06/26 Javascript
vue使用监听实现全选反选功能
2018/07/06 Javascript
在vue中安装使用vux的教程详解
2018/09/16 Javascript
JS module的导出和导入的实现代码
2019/02/25 Javascript
vue视图不更新情况详解
2019/05/16 Javascript
[14:03]2017DOTA2亚洲邀请赛开幕式:12神兵演绎水墨中华
2017/04/01 DOTA
python的构建工具setup.py的方法使用示例
2017/10/23 Python
python+matplotlib实现鼠标移动三角形高亮及索引显示
2018/01/15 Python
python统计多维数组的行数和列数实例
2018/06/23 Python
pandas如何处理缺失值
2019/07/31 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
Urban Outfitters德国官网:美国跨国生活方式零售公司
2018/05/21 全球购物
介绍下Lucene建立索引的过程
2016/03/02 面试题
会计电算一体化个人简历的自我评价
2013/10/15 职场文书
数控专业推荐信范文
2013/12/02 职场文书
会计员岗位职责
2014/03/15 职场文书
什么是就业协议书
2014/04/17 职场文书
小学校长汇报材料
2014/08/20 职场文书
殡葬服务心得体会
2014/09/11 职场文书
事业单位人员的自我评价范文
2014/09/21 职场文书
2015年英语教师工作总结
2015/05/20 职场文书
商务英语邮件开头问候语
2015/11/10 职场文书
如何做好员工培训计划?
2019/07/09 职场文书
标会主持词应该怎么写?
2019/08/15 职场文书
Mysql中存储引擎的区别及比较
2021/06/04 MySQL