$("").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 相关文章推荐
多次注册事件会导致一个事件被触发多次的解决方法
Aug 12 Javascript
JavaScript合并两个数组并去除重复项的方法
Jun 13 Javascript
老生常谈JavaScript 函数表达式
Sep 01 Javascript
JS键盘版计算器的制作方法
Dec 03 Javascript
canvas滤镜效果实现代码
Feb 06 Javascript
基于jQuery实现一个marquee无缝滚动的插件
Mar 09 Javascript
JS利用cookies设置每隔24小时弹出框
Apr 20 Javascript
如何在vue中使用ts的示例代码
Feb 28 Javascript
vue组件实现进度条效果
Jun 06 Javascript
uni-app从安装到卸载的入门教程
May 15 Javascript
微信小程序实现上传多张图片、删除图片
Jul 29 Javascript
javascript中layim之查找好友查找群组
Feb 06 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 empty() 检查一个变量是否为空
2011/11/10 PHP
Thinkphp+smarty+uploadify实现无刷新上传
2015/07/30 PHP
解决PHP里大量数据循环时内存耗尽的方法
2015/10/10 PHP
PHP进程通信基础之信号量与共享内存通信
2017/02/19 PHP
PHP 命名空间和自动加载原理与用法实例分析
2020/04/29 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
jquery 提交值不为空的元素示例代码
2013/05/10 Javascript
html5的自定义data-*属性和jquery的data()方法的使用示例
2013/08/21 Javascript
checkbox使用示例
2013/08/23 Javascript
javascript获取URL参数与参数值的示例代码
2013/12/20 Javascript
js字符串日期yyyy-MM-dd转化为date示例代码
2014/03/06 Javascript
浅析基于WEB前端页面的页面内容搜索的实现思路
2014/06/10 Javascript
angularJS与bootstrap结合实现动态加载弹出提示内容
2015/10/16 Javascript
jQuery实现滚动鼠标放大缩小图片的方法(附demo源码下载)
2016/03/05 Javascript
AngularJS中watch监听用法分析
2016/11/04 Javascript
使用JavaScript触发过渡效果的方法
2017/01/19 Javascript
微信小程序 数据遍历的实现
2017/04/05 Javascript
nodejs模块学习之connect解析
2017/07/05 NodeJs
详解extract-text-webpack-plugin 的使用及安装
2018/06/12 Javascript
vue+vuex+axios从后台获取数据存入vuex,组件之间共享数据操作
2020/07/31 Javascript
python strip()函数 介绍
2013/05/24 Python
python发送HTTP请求的方法小结
2015/07/08 Python
python+pyqt实现右下角弹出框
2017/10/26 Python
Python + selenium + requests实现12306全自动抢票及验证码破解加自动点击功能
2018/11/23 Python
详解Python 爬取13个旅游城市,告诉你五一大家最爱去哪玩?
2019/05/07 Python
selenium+python自动化测试环境搭建步骤
2019/06/03 Python
python GUI库图形界面开发之PyQt5多行文本框控件QTextEdit详细使用方法实例
2020/02/28 Python
浅析Python 条件控制语句
2020/07/15 Python
Html5 Canvas动画基础碰撞检测的实现
2018/12/06 HTML / CSS
Raleigh兰令自行车美国官网:英国凤头牌自行车
2018/01/08 全球购物
Why do we need Unit test
2013/01/03 面试题
旅游专业职业生涯规划范文
2014/01/13 职场文书
受伤赔偿协议书
2014/09/24 职场文书
护士自我推荐信范文
2015/03/24 职场文书
JavaScript中关于预编译、作用域链和闭包的理解
2021/03/31 Javascript
Python实战实现爬取天气数据并完成可视化分析详解
2022/06/16 Python