$("").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 相关文章推荐
通过jquery的$.getJSON做一个跨域ajax请求试验
May 03 Javascript
js交换排序 冒泡排序算法(Javascript版)
Oct 04 Javascript
JavaScript编程中容易出BUG的几点小知识
Jan 31 Javascript
javascript html实现网页版日历代码
Mar 08 Javascript
JS button按钮实现submit按钮提交效果
Nov 01 Javascript
JQuery ZTree使用方法详解
Jan 07 Javascript
jquery实现页面加载效果
Feb 21 Javascript
在页面中引入js的两种方法(推荐)
Aug 29 Javascript
初学者AngularJS的环境搭建过程
Oct 27 Javascript
详解VUE里子组件如何获取父组件动态变化的值
Dec 26 Javascript
基于vue实现web端超大数据量表格的卡顿解决
Apr 02 Javascript
vue 地图可视化 maptalks 篇实例代码详解
May 21 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操作sqlserver关于时间日期读取的小小见解
2009/11/29 PHP
php更新mysql后获取影响的行数发生异常解决方法
2013/03/28 PHP
PHP面向对象程序设计继承用法简单示例
2018/12/28 PHP
Locate a File Using a File Open Dialog Box
2007/06/18 Javascript
面向对象继承实例(a如何继承b问题)(自写)
2013/07/01 Javascript
jquery 页面滚动到指定DIV实现代码
2013/09/25 Javascript
文本框回车提交与禁止提交示例
2013/09/27 Javascript
javascript实现des解密加密全过程
2014/04/03 Javascript
分享五个有用的jquery小技巧
2015/10/08 Javascript
JS插件overlib用法实例详解
2015/12/26 Javascript
基于HTML模板和JSON数据的JavaScript交互(移动端)
2016/04/06 Javascript
Spring Boot+AngularJS+BootStrap实现进度条示例代码
2017/03/02 Javascript
angular的输入和输出的使用方法
2018/09/22 Javascript
JS实现的杨辉三角【帕斯卡三角形】算法示例
2019/02/26 Javascript
JavaScript实现获取两个排序数组的中位数算法示例
2019/02/26 Javascript
微信小程序实现原生步骤条
2019/07/25 Javascript
采用python实现简单QQ单用户机器人的方法
2014/07/03 Python
python实现提取百度搜索结果的方法
2015/05/19 Python
Python 基础教程之包和类的用法
2017/02/23 Python
python爬虫中get和post方法介绍以及cookie作用
2018/02/08 Python
numpy中loadtxt 的用法详解
2018/08/03 Python
numpy库reshape用法详解
2020/04/19 Python
python实现在内存中读写str和二进制数据代码
2020/04/24 Python
python安装和pycharm环境搭建设置方法
2020/05/27 Python
css3之UI元素状态伪类选择器实例演示
2017/08/11 HTML / CSS
中国央视网签名寄语
2014/01/18 职场文书
2014年开学第一课活动方案
2014/03/06 职场文书
汇源肾宝广告词
2014/03/20 职场文书
大学生实习鉴定评语
2014/04/25 职场文书
给校长的建议书400字
2014/05/15 职场文书
事业单位鉴定材料
2014/05/25 职场文书
计算机科学技术自荐信
2014/06/12 职场文书
实习指导教师评语
2014/12/30 职场文书
爱护公物主题班会
2015/08/17 职场文书
导游词之日月潭
2019/11/05 职场文书
磁贴还没死, 微软Win11可修改注册表找回Win10开始菜单
2021/11/21 数码科技