$("").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 相关文章推荐
Js中获取frames中的元素示例代码
Jul 30 Javascript
JavaScript实现LI列表数据绑定的方法
Aug 04 Javascript
javascript实现动态统计图开发实例
Nov 21 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【二】
May 10 Javascript
jQuery EasyUI提交表单验证
Jul 19 Javascript
jquery表单插件form使用方法详解
Jan 20 Javascript
Vue结合原生js实现自定义组件自动生成示例
Jan 21 Javascript
vue-cli的webpack模板项目配置文件分析
Apr 01 Javascript
基于Vue实现页面切换左右滑动效果
Jun 29 Javascript
微信小程序视图控件与bindtap之间的问题的解决
Apr 08 Javascript
浅入深出Vue之自动化路由
Aug 06 Javascript
使用flow来规范javascript的变量类型
Sep 12 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/10/09 PHP
php之Smarty模板使用方法示例详解
2014/07/08 PHP
微信公众平台开发之配置与请求
2015/08/26 PHP
thinkphp3.x中变量的获取和过滤方法详解
2016/05/20 PHP
Laravel下生成验证码的类
2017/11/15 PHP
PHP curl批处理及多请求并发实现方法分析
2018/08/15 PHP
Microsoft Ajax Minifier 压缩javascript的方法
2010/03/05 Javascript
addEventListener和attachEvent二者绑定的执行函数中的this不相同
2012/12/09 Javascript
js获取单选框或复选框值及操作
2012/12/18 Javascript
jQuery实现id模糊查询的小例子
2013/03/19 Javascript
IE下通过a实现location.href 获取referer的值
2014/09/04 Javascript
jQuery过滤选择器用法分析
2015/02/10 Javascript
基于HTML5上使用iScroll实现下拉刷新,上拉加载更多
2016/05/21 Javascript
原生js的数组除重复简单实例
2016/05/24 Javascript
利用jquery禁止外层滚动条的滚动
2017/01/05 Javascript
关于jQuery库冲突的完美解决办法
2017/05/20 jQuery
在ES5与ES6环境下处理函数默认参数的实现方法
2018/05/13 Javascript
微信小程序tabbar底部导航
2018/11/05 Javascript
使用canvas实现一个vue弹幕组件功能
2018/11/30 Javascript
详解mpvue开发微信小程序基础知识
2019/09/23 Javascript
Javascript实现关闭广告效果
2021/01/29 Javascript
[03:23]我的刀塔你不可能这么可爱 第一期金萌萌的故事
2014/06/20 DOTA
python opencv鼠标事件实现画框圈定目标获取坐标信息
2020/04/18 Python
python中用logging实现日志滚动和过期日志删除功能
2019/08/20 Python
HTML5 Canvas实现烟花绽放特效
2016/03/02 HTML / CSS
英国索普公园票务和酒店套餐:Thorpe Breaks
2019/09/14 全球购物
黄继光的英雄事迹材料
2014/02/13 职场文书
初中军训感想300字
2014/03/05 职场文书
安踏广告词改编版
2014/03/21 职场文书
党员四风剖析材料
2014/08/27 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
长城导游词300字
2015/01/30 职场文书
单独二胎证明
2015/06/24 职场文书
中学总务处工作总结
2015/08/12 职场文书
初中政治教学工作总结
2015/08/13 职场文书
Java获取字符串编码格式实现思路
2022/09/23 Java/Android