$("").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 相关文章推荐
StringTemplate遇见jQuery冲突的解决方法
Sep 22 Javascript
JavaScript中setInterval的用法总结
Nov 20 Javascript
node.js中的path.dirname方法使用说明
Dec 09 Javascript
JS基于Ajax实现的网页Loading效果代码
Oct 27 Javascript
详解Jquery实现ready和bind事件
Apr 14 Javascript
Javascript将数字转化成为货币格式字符串
Jun 22 Javascript
Javascript 对cookie操作详解及实例
Dec 29 Javascript
JavaScript 中的 this 简单规则
Sep 19 Javascript
vue路由懒加载的实现方法
Mar 12 Javascript
浅谈如何优雅处理JavaScript异步错误
Nov 12 Javascript
vue搜索页开发实例代码详解(热门搜索,历史搜索,淘宝接口演示)
Apr 11 Javascript
详解Java中String JSONObject JSONArray List转换
Nov 13 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
德生1994机评
2021/03/02 无线电
php与XML、XSLT、Mysql的结合运用实现代码
2009/11/19 PHP
php网上商城购物车设计代码分享
2012/02/15 PHP
php foreach循环中使用引用的问题
2013/11/06 PHP
8个PHP数组面试题
2015/06/23 PHP
Yii中表单用法实例详解
2016/01/05 PHP
PHP数组生成XML格式数据的封装类实例
2016/11/10 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
xml文档转换工具,附图表例子(hta)
2010/11/17 Javascript
javascript 常用验证函数总结
2016/06/28 Javascript
JS实现移动端实时监听输入框变化的实例代码
2017/04/12 Javascript
Vue 实现双向绑定的四种方法
2018/03/16 Javascript
vue中的数据绑定原理的实现
2018/07/02 Javascript
从源码角度来回答keep-alive组件的缓存原理
2021/01/18 Javascript
[03:43]2014DOTA2西雅图国际邀请赛 newbee战队巡礼
2014/07/07 DOTA
python实现查找excel里某一列重复数据并且剔除后打印的方法
2015/05/26 Python
python如何实现excel数据添加到mongodb
2015/07/30 Python
Python获取昨天、今天、明天开始、结束时间戳的方法
2018/06/01 Python
python-opencv 将连续图片写成视频格式的方法
2019/01/08 Python
PyQT实现菜单中的复制,全选和清空的功能的方法
2019/06/17 Python
python3实现在二叉树中找出和为某一值的所有路径(推荐)
2019/12/26 Python
python使用HTMLTestRunner导出饼图分析报告的方法
2019/12/30 Python
基于IE10/HTML5 开发
2013/04/22 HTML / CSS
HTML5逐步分析实现拖放功能的方法
2020/09/30 HTML / CSS
美国最古老的精致书写工具制造商:A.T. Cross(高仕)
2018/01/30 全球购物
俄罗斯花园种植材料批发和零售网上商店:Беккер
2019/07/22 全球购物
实习生自我评价
2014/01/18 职场文书
《乡愁》教学反思
2014/02/18 职场文书
服务理念口号
2014/06/11 职场文书
群众路线四风自我剖析材料
2014/10/08 职场文书
国际贸易实训报告
2014/11/05 职场文书
白鹤梁导游词
2015/02/06 职场文书
学校运动会加油词
2015/07/18 职场文书
初中思品教学反思
2016/02/20 职场文书
《分一些蚊子进来》读后感3篇
2020/01/09 职场文书
小程序实现筛子抽奖
2021/05/26 Javascript