$("").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 相关文章推荐
JavaScript URL参数读取改进版
Jan 16 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
动态创建script标签实现跨域资源访问的方法介绍
Feb 28 Javascript
Node.js node-schedule定时任务隔多少分钟执行一次的方法
Feb 10 Javascript
javascript清空table表格的方法
May 14 Javascript
利用D3.js实现最简单的柱状图示例代码
Dec 09 Javascript
ReactNative实现图片上传功能的示例代码
Jul 11 Javascript
js实现canvas图片与img图片的相互转换的示例
Aug 31 Javascript
基于vue cli 通过命令行传参实现多环境配置
Jul 12 Javascript
vue-router权限控制(简单方式)
Oct 29 Javascript
JS控制GIF图片的停止与显示
Oct 24 Javascript
JavaScript函数Call、Apply原理实例解析
Feb 17 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
PHP实现微信公众平台音乐点播
2014/03/20 PHP
PHP中把有符号整型转换为无符号整型方法
2015/05/27 PHP
PHP PDOStatement::nextRowset讲解
2019/02/01 PHP
ExtJS 刷新后如何默认选中刷新前最后一次选中的节点
2014/04/03 Javascript
基于jQuery实现select下拉选择可输入附源码下载
2016/02/03 Javascript
详解Backbone.js框架中的模型Model与其集合collection
2016/05/05 Javascript
JS检测页面中哪个HTML标签触发点击事件的方法
2016/06/17 Javascript
快速解决js动态改变dom元素属性后页面及时渲染的问题
2016/07/06 Javascript
jquery实现图片切换代码
2016/10/13 Javascript
简单实现node.js图片上传
2016/12/18 Javascript
JavaScript利用Date实现简单的倒计时实例
2017/01/12 Javascript
JavaScript实现二叉树定义、遍历及查找的方法详解
2017/12/20 Javascript
JS计算两个时间相差分钟数的方法示例
2018/01/10 Javascript
JS实现的input选择图片本地预览功能示例
2018/08/29 Javascript
Vue实现购物车详情页面的方法
2019/08/20 Javascript
jQuery实现可以扩展的日历
2020/12/01 jQuery
python获取当前计算机cpu数量的方法
2015/04/18 Python
Python计算字符宽度的方法
2016/06/14 Python
python pandas中对Series数据进行轴向连接的实例
2018/06/08 Python
在Python中通过getattr获取对象引用的方法
2019/01/21 Python
Python异步操作MySQL示例【使用aiomysql】
2019/05/16 Python
python之MSE、MAE、RMSE的使用
2020/02/24 Python
Dr. Martens马汀博士澳大利亚官网:马丁靴鼻祖
2019/07/02 全球购物
自动化系在校本科生求职信
2013/10/23 职场文书
财务会计人员求职的自我评价
2014/01/13 职场文书
函授本科自我鉴定
2014/02/04 职场文书
高中生职业规划范文
2014/03/09 职场文书
《蝙蝠和雷达》教学反思
2014/04/23 职场文书
幼儿教师演讲稿
2014/05/06 职场文书
群众路线班子对照检查材料
2014/09/25 职场文书
五一劳动节活动总结
2015/02/09 职场文书
自主招生推荐信格式模板
2015/03/24 职场文书
2016春季运动会通讯稿
2015/07/18 职场文书
用Python提取PDF表格的方法
2021/04/11 Python
HTML5页面音频自动播放的实现方式
2021/06/21 HTML / CSS
python接口测试返回数据为字典取值方式
2022/02/12 Python