$("").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 相关文章推荐
为radio类型的INPUT添加客户端脚本(附加实现JS来禁用onClick事件思路代码)
Nov 11 Javascript
node.js入门教程迷你书、node.js入门web应用开发完全示例
Apr 06 Javascript
js正则表达式中exec用法实例
Jul 23 Javascript
深入理解jQuery中的事件冒泡
May 24 Javascript
jQuery实现的兼容性浮动层示例
Aug 02 Javascript
基于jQuery实现简单人工智能聊天室
Feb 10 Javascript
Vue.js 踩坑记之双向绑定
May 03 Javascript
React 源码中的依赖注入方法
Nov 07 Javascript
用vuex写了一个购物车H5页面的示例代码
Dec 04 Javascript
layer 刷新某个页面的实现方法
Sep 05 Javascript
webpack打包优化的几个方法总结
Feb 10 Javascript
JS实现瀑布流效果
Mar 07 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桌面中心(三) 修改数据库
2007/03/11 PHP
Linux Apache PHP Oracle 安装配置(具体操作步骤)
2013/06/17 PHP
PHP实现小偷程序实例
2016/10/31 PHP
php的优点总结 php有哪些优点
2019/07/19 PHP
js获取提交的字符串的字节数
2009/02/09 Javascript
js Array操作的最简短最容易理解方法
2013/12/09 Javascript
关于编写性能高效的javascript事件的技术
2014/11/28 Javascript
jQuery form插件之formDdata参数校验表单及验证后提交
2016/01/23 Javascript
详解JavaScript表单验证(E-mail 验证)
2016/03/31 Javascript
js实现常用排序算法
2016/08/09 Javascript
bootstrap插件treeview实现全选父节点下所有子节点和反选功能
2017/07/21 Javascript
前端axios下载excel文件(二进制)的处理方法
2018/07/31 Javascript
JS实现简单tab选项卡切换
2019/10/25 Javascript
javascript实现前端分页功能
2020/11/26 Javascript
js实现随机点名功能
2020/12/23 Javascript
在Python下利用OpenCV来旋转图像的教程
2015/04/16 Python
Python Web框架Tornado运行和部署
2020/10/19 Python
快速了解python leveldb
2018/01/18 Python
python按照多个条件排序的方法
2019/02/08 Python
Python csv文件的读写操作实例详解
2019/11/19 Python
python从内存地址上加载python对象过程详解
2020/01/08 Python
python GUI库图形界面开发之PyQt5树形结构控件QTreeWidget详细使用方法与实例
2020/03/02 Python
jupyter notebook 实现matplotlib图动态刷新
2020/04/22 Python
使用ITK-SNAP进行抠图操作并保存mask的实例
2020/07/01 Python
Python3 + Appium + 安卓模拟器实现APP自动化测试并生成测试报告
2021/01/27 Python
GAP欧盟网上商店:GAP EU
2016/09/13 全球购物
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
管理科学大学生求职信
2013/11/13 职场文书
行政专员工作职责
2013/12/22 职场文书
大学新闻系求职信
2014/06/03 职场文书
四风对照检查剖析材料
2014/10/07 职场文书
入党积极分子十八届四中全会思想汇报
2014/10/23 职场文书
技术股东合作协议书
2014/12/02 职场文书
Python网络编程之ZeroMQ知识总结
2021/04/25 Python
springboot如何接收application/x-www-form-urlencoded类型的请求
2021/11/02 Java/Android
原生JS实现分页
2022/04/19 Javascript