$("").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 相关文章推荐
js的event详解。
Sep 06 Javascript
IE和Firefox在JavaScript应用中的兼容性探讨
Apr 01 Javascript
jquery ready()的几种实现方法小结
Jun 18 Javascript
jQuery学习笔记 操作jQuery对象 CSS处理
Sep 19 Javascript
使用jQuery ajaxupload插件实现无刷新上传文件
Apr 23 jQuery
jQuery 点击获取验证码按钮及倒计时功能
Sep 20 jQuery
微信小程序云开发详细教程
May 16 Javascript
Vue+Element-UI实现上传图片并压缩
Nov 26 Javascript
js通过循环多张图片实现动画效果
Dec 19 Javascript
redux处理异步action解决方案
Mar 22 Javascript
JS将指定的某个字符全部转换为其他字符实例代码
Oct 13 Javascript
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
thinkphp验证码的实现(form、ajax实现验证)
2016/07/28 PHP
使用PHPStorm+XDebug搭建单步调试环境
2017/11/19 PHP
php如何实现数据库的备份和恢复
2020/11/30 PHP
JQuery自定义事件的应用 JQuery最佳实践
2010/08/01 Javascript
ExtJs GridPanel简单的增删改实现代码
2010/08/26 Javascript
javascript编码的几个方法详细介绍
2013/01/06 Javascript
浅析hasOwnProperty方法的应用
2013/11/20 Javascript
jquery的clone方法应用于textarea和select的bug修复
2014/06/26 Javascript
jquery操作HTML5 的data-*的用法实例分享
2014/08/17 Javascript
javascript中的Base64、UTF8编码与解码详解
2015/03/18 Javascript
js窗口关闭提示信息(兼容IE和firefox)
2015/10/23 Javascript
jsonp跨域请求数据实现手机号码查询实例分析
2015/12/12 Javascript
jQuery获取父元素节点、子元素节点及兄弟元素节点的方法
2016/04/14 Javascript
Javascript删除指定元素节点的方法
2016/06/21 Javascript
移动端翻页插件dropload.js(支持Zepto和jQuery)
2016/07/27 Javascript
JavaScript正则替换HTML标签功能示例
2017/03/02 Javascript
nodejs+mongodb+vue前后台配置ueditor的示例代码
2018/01/02 NodeJs
Vue 开发音乐播放器之歌手页右侧快速入口功能
2018/08/08 Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
2018/10/26 jQuery
js实现3D旋转相册
2020/08/02 Javascript
Python格式化css文件的方法
2015/03/10 Python
在Python的Django框架中加载模版的方法
2015/07/16 Python
利用scrapy将爬到的数据保存到mysql(防止重复)
2018/03/31 Python
python 实现返回一个列表中出现次数最多的元素方法
2019/06/11 Python
解决Pycharm 导入其他文件夹源码的2种方法
2020/02/12 Python
如何在mac版pycharm选择python版本
2020/07/21 Python
教师找工作推荐信
2013/11/23 职场文书
体育教师自荐信范文
2013/12/16 职场文书
迟到检讨书400字
2014/01/13 职场文书
黄继光的英雄事迹材料
2014/02/13 职场文书
《夏夜多美》教学反思
2014/02/17 职场文书
学校做一个有道德的人活动方案
2014/08/23 职场文书
2014年统计工作总结
2014/11/21 职场文书
2015年园林绿化工作总结
2015/05/23 职场文书
保险公司2016开门红口号集锦
2015/12/24 职场文书
Python实现老照片修复之上色小技巧
2021/10/16 Python