$("").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 写类方式之七
Jul 05 Javascript
锋利的jQuery 第三章章节总结的例子
Mar 23 Javascript
基于jquery的图片懒加载js
Jun 30 Javascript
js中substring和substr的定义和用法
May 05 Javascript
高性能JavaScript模板引擎实现原理详解
Feb 05 Javascript
asp知识整理笔记3(问答模式)
Sep 27 Javascript
JS判断两个对象内容是否相等的方法示例
Apr 10 Javascript
详解webpack-dev-server使用方法
Sep 14 Javascript
加快Vue项目的开发速度的方法
Dec 12 Javascript
简单了解JavaScript中常见的反模式
Jun 21 Javascript
JS 自执行函数原理及用法
Aug 05 Javascript
JS如何生成动态列表
Sep 22 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 文件锁与进程锁的使用示例
2017/08/07 PHP
在页面上点击任一链接时触发一个事件的代码
2007/04/07 Javascript
实例详解jQuery表单验证插件validate
2016/01/18 Javascript
Bootstrap编写一个在当前网页弹出可关闭的对话框 非弹窗
2016/06/30 Javascript
浅谈React 属性和状态的一些总结
2016/11/21 Javascript
JQuery查找子元素find()和遍历集合each的方法总结
2017/03/07 Javascript
微信小程序中input标签详解及简单实例
2017/05/18 Javascript
微信小程序 如何引入外部字体库iconfont的图标
2018/01/31 Javascript
原生js检测页面加载完毕的实例
2018/09/11 Javascript
javascript面向对象三大特征之多态实例详解
2019/07/24 Javascript
小程序实现长按保存图片的方法
2019/12/31 Javascript
[01:15:44]首部DOTA2纪录片今日23时全网上映
2014/03/19 DOTA
Python实现的HTTP并发测试完整示例
2020/04/23 Python
python使用xlrd与xlwt对excel的读写和格式设定
2017/01/21 Python
对python中return和print的一些理解
2017/08/18 Python
Python实现定时精度可调节的定时器
2018/04/15 Python
python配置grpc环境
2019/01/01 Python
Python3标准库总结
2019/02/19 Python
python定时按日期备份MySQL数据并压缩
2019/04/19 Python
python 的 scapy库,实现网卡收发包的例子
2019/07/23 Python
如何解决django-celery启动后迅速关闭
2019/10/16 Python
python将图片转base64,实现前端显示
2020/01/09 Python
python多项式拟合之np.polyfit 和 np.polyld详解
2020/02/18 Python
django中url映射规则和服务端响应顺序的实现
2020/04/02 Python
如何使用Python处理HDF格式数据及可视化问题
2020/06/24 Python
Pytho爬虫中Requests设置请求头Headers的方法
2020/09/22 Python
基于HTML5的WebGL经典3D虚拟机房漫游动画
2017/11/15 HTML / CSS
建筑工程管理专业自荐信范文
2013/12/28 职场文书
车间统计员岗位职责
2014/01/05 职场文书
初三学习决心书
2014/03/11 职场文书
《白鹅》教学反思
2014/04/13 职场文书
尊老爱亲美德少年事迹材料
2014/08/14 职场文书
亲子运动会的活动方案
2014/08/17 职场文书
2019年XX公司的晨会制度及流程!
2019/07/23 职场文书
详解Vue中$props、$attrs和$listeners的使用方法
2022/02/18 Vue.js
《吸血鬼幸存者》新内容发布 追加多个全新模式
2022/04/07 其他游戏