$("").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 相关文章推荐
让FireFox支持innerText的实现代码
Dec 01 Javascript
jquery easyui滚动条部分设置介绍
Sep 12 Javascript
js计算字符串长度包含的中文是utf8格式
Oct 15 Javascript
JavaScript Math.round() 方法
Dec 18 Javascript
BootStrap的Datepicker控件使用心得分享
May 25 Javascript
EXT中单击button按钮grid添加一行(光标位置可设置)的实例代码
Jun 02 Javascript
zTree节点文字过多的处理方法
Nov 24 Javascript
Vue结合Video.js播放m3u8视频流的方法示例
May 04 Javascript
jsonp跨域及实现百度首页联想功能的方法
Aug 30 Javascript
vue 实现LED数字时钟效果(开箱即用)
Dec 08 Javascript
jquery制作的移动端购物车效果完整示例
Feb 24 jQuery
JavaScript基于SVG的图片切换效果实例代码
Dec 15 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
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
PHP实现的oracle分页函数实例
2016/01/25 PHP
Javascript实现DIV滚动自动滚动到底部的代码
2012/03/01 Javascript
js数组转json并在后台对其解析具体实现
2013/11/20 Javascript
自己使用jquery写的一个无缝滚动的插件
2014/04/30 Javascript
Google官方支持的NodeJS访问API,提供后台登录授权
2014/07/29 NodeJs
JS控制表格实现一条光线流动分割行的方法
2015/03/09 Javascript
js实现简单的联动菜单效果
2015/08/19 Javascript
js点击按钮实现带遮罩层的弹出视频效果
2015/12/19 Javascript
Jquery 整理元素选取、常用方法一览表
2016/11/26 Javascript
canvas绘制七巧板
2017/02/03 Javascript
Vue.extend构造器的详解
2017/07/17 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
微信公众号H5支付接口调用方法
2019/01/10 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
ES6小技巧之代替lodash
2019/06/07 Javascript
js实现删除json中指定的元素
2020/09/22 Javascript
vue element实现表格合并行数据
2020/11/30 Vue.js
scrapy自定义pipeline类实现将采集数据保存到mongodb的方法
2015/04/16 Python
解决python删除文件的权限错误问题
2018/04/24 Python
pyqt5 实现在别的窗口弹出进度条
2019/06/18 Python
详解python中的index函数用法
2019/08/06 Python
Python3使用xlrd、xlwt处理Excel方法数据
2020/02/28 Python
python中def是做什么的
2020/06/10 Python
通过实例了解Python异常处理机制底层实现
2020/07/23 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
把富文本的回车转为br标签
2019/08/09 HTML / CSS
求高于平均分的学生学号及成绩
2016/09/01 面试题
中英文自我评价语句
2013/12/20 职场文书
药剂专业学生求职信范文
2013/12/28 职场文书
自荐书范文范例
2014/02/13 职场文书
红领巾广播站广播稿(3篇)
2014/09/20 职场文书
2014年房地产销售工作总结
2014/12/01 职场文书
法制工作总结2015
2015/07/23 职场文书
如何制作自己的原生JavaScript路由
2021/05/05 Javascript
http通过StreamingHttpResponse完成连续的数据传输长链接方式
2022/02/12 Python