$("").click与onclick的区别示例介绍


Posted in Javascript onSeptember 25, 2014

Html代码

<script type="text/javascript"> 
$(function(){ 
$("#btn4").click(function(){ 
$("#btn3").click(); 
}); 
}); 
function change(){ 
alert("onclick"); 
} 
</script> 

<button id="btn3" onclick="change()">dd</button> 
<button id="btn4">ee</button>

区别:

1.onclick是绑定事件,告诉浏览器在鼠标点击时候要做什么

click本身是方法作用是触发onclick事件,只要执行了元素的click()方法,就会触发onclick事件。如上诉代码所示,当点击'ee'按钮时,会触发'dd'的onclick事件(正常来说得按'dd'按钮才触发'dd'的onclick事件),原因就是因为

$("#btn4").click(function(){
$("#btn3").click();
});

点击'ee'按钮时,代码内部调用了'dd'的click()方法,从而触发了'dd'的onclick事件。

2.click()方法的主要作用是触发调用click方法元素onclick事件。此外,如果在click方法定义了如下代码

$("#btn3").click(function(){
alert("*****");
});

click方法中的function代码会在onclick事件执行完后执行,此时click方法起到追加事件的作用。实例如下

Html代码

<script type="text/javascript"> 
$(function(){ 
$("#btn3").click(function(){ 
alert("aa"); 
}); 
}); 
function change(){ 
alert("bb"); 
} 
</script> 
<button id="btn3" onclick="change()">dd</button>

弹出框的弹出顺序先是'bb',然后是'aa'.

Javascript 相关文章推荐
jQuery实现动画效果的实例代码
May 07 Javascript
js实现背景图片感应鼠标变化的方法
Feb 28 Javascript
AngularJS基础 ng-non-bindable 指令详细介绍
Aug 02 Javascript
Node.js读取文件内容示例
Mar 07 Javascript
JS中定位 position 的使用实例代码
Aug 06 Javascript
Node.js readline模块与util模块的使用
Mar 01 Javascript
JS/HTML5游戏常用算法之碰撞检测 包围盒检测算法详解【圆形情况】
Dec 13 Javascript
基于Taro的微信小程序模板消息-获取formId功能模块封装实践
Jul 15 Javascript
js实现提交前对列表数据的增删改查
Jan 16 Javascript
基于JS+HTML实现弹窗提示是否确认提交功能
Jun 17 Javascript
js实现直播点击飘心效果
Aug 19 Javascript
vue路由实现登录拦截
Mar 24 Vue.js
Jquery设置attr的disabled属性控制某行显示或者隐藏
Sep 25 #Javascript
javascritp添加url参数将参数加入到url中
Sep 25 #Javascript
jQuery将多条数据插入模态框的示例代码
Sep 25 #Javascript
jQuery如何获取同一个类标签的所有值(默认无法获取)
Sep 25 #Javascript
jquery动态分页效果堪比时光网
Sep 25 #Javascript
浅析js预加载/延迟加载
Sep 25 #Javascript
深入了解Node.js中的一些特性
Sep 25 #Javascript
You might like
Smarty+QUICKFORM小小演示
2007/02/25 PHP
PHP简洁函数小结
2011/08/12 PHP
thinkphp模板输出技巧汇总
2014/11/24 PHP
php计算2个日期的差值函数分享
2015/02/02 PHP
thinkPHP2.1自定义标签库的导入方法详解
2016/07/20 PHP
PHP实现的简单排列组合算法应用示例
2017/06/20 PHP
php制作圆形用户头像的实例_自定义封装类源代码
2017/09/18 PHP
PHP依赖注入原理与用法分析
2018/08/21 PHP
破除一些网站复制、右键限制
2006/11/04 Javascript
JS 树形递归实例代码
2010/05/18 Javascript
jQuery学习笔记之jQuery的事件
2010/12/22 Javascript
jQuery对表单的操作代码集合
2011/04/06 Javascript
DWZ table的原生分页浅谈
2013/03/01 Javascript
js有序数组的连接问题
2013/10/01 Javascript
jquery实现checkbox 全选/全不选的通用写法
2014/02/22 Javascript
详解AngularJS中的表格使用
2015/06/16 Javascript
canvas实现图片根据滑块放大缩小效果
2017/02/24 Javascript
js实现字符全排列算法的简单方法
2017/05/01 Javascript
基于vue和bootstrap实现简单留言板功能
2020/05/30 Javascript
Vue elementui字体图标显示问题解决方案
2020/08/18 Javascript
python数组复制拷贝的实现方法
2015/06/09 Python
Python使用Paramiko模块编写脚本进行远程服务器操作
2016/05/05 Python
Django REST为文件属性输出完整URL的方法
2017/12/18 Python
Tensorflow使用支持向量机拟合线性回归
2018/09/07 Python
Matplotlib中文乱码的3种解决方案
2018/11/15 Python
HTML5自定义属性前缀data-及dataset的使用方法(html5 新特性)
2017/08/24 HTML / CSS
GAP美国官网:美国休闲时尚品牌
2016/08/26 全球购物
Theo + George官方网站:都柏林时尚品牌
2019/04/08 全球购物
Ben Sherman官方网站:英国男装品牌
2019/10/22 全球购物
保安自我鉴定范文
2013/12/08 职场文书
《三峡》教学反思
2014/03/01 职场文书
雏鹰争章活动总结
2014/05/09 职场文书
求职信怎么写
2014/05/23 职场文书
入党函调证明材料
2014/12/24 职场文书
重阳节主题班会
2015/08/17 职场文书
幼儿园2016圣诞节活动总结
2016/03/31 职场文书