$("").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 字符串与数组转换函数[不用split与join]
Dec 13 Javascript
用jquery中插件dialog实现弹框效果实例代码
Nov 15 Javascript
js使用html()或text()方法获取设置p标签的显示的值
Aug 01 Javascript
javascript获取当前的时间戳的方法汇总
Jul 26 Javascript
详解vue中computed 和 watch的异同
Jun 30 Javascript
jQuery制作全屏宽度固定高度轮播图(实例讲解)
Jul 08 jQuery
JS组件系列之Gojs组件 前端图形化插件之利器
Nov 29 Javascript
node.js使用redis储存session的方法
Sep 26 Javascript
利用hasOwnProperty给数组去重的面试题分享
Nov 05 Javascript
JavaScript JMap类定义与使用方法示例
Jan 22 Javascript
layui监听工具栏的实例(操作列表按钮)
Sep 10 Javascript
django简单的前后端分离的数据传输实例 axios
May 18 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
Mysql和网页显示乱码解决方法集锦
2008/03/27 PHP
PHP 获取 ping 时间的实现方法
2017/09/29 PHP
PHP实现非阻塞模式的方法分析
2018/07/26 PHP
JS文本框不能输入空格验证方法
2013/03/19 Javascript
js 处理数组重复元素示例代码
2013/12/27 Javascript
js在输入框屏蔽按键,只能键入数字的示例代码
2014/01/03 Javascript
JS创建自定义表格具体实现
2014/02/11 Javascript
AngularJS实现元素显示和隐藏的几个案例
2015/12/09 Javascript
Bootstrap中定制LESS-颜色及导航条(推荐)
2016/11/21 Javascript
详解使用Visual Studio Code对Node.js进行断点调试
2017/09/14 Javascript
微信小程序上传图片到服务器实例代码
2017/11/07 Javascript
vue-cli2与vue-cli3在一台电脑共存的实现方法
2019/09/25 Javascript
20多个小事例带你重温ES10新特性(小结)
2019/09/29 Javascript
浅谈Python数据类型之间的转换
2016/06/08 Python
python实现简单爬虫功能的示例
2016/10/24 Python
python实现定时自动备份文件到其他主机的实例代码
2018/02/23 Python
numpy.delete删除一列或多列的方法
2018/04/03 Python
Python/ArcPy遍历指定目录中的MDB文件方法
2018/10/27 Python
selenium在执行phantomjs的API并获取执行结果的方法
2018/12/17 Python
如何使用Python实现自动化水军评论
2019/06/26 Python
python求平均数、方差、中位数的例子
2019/08/22 Python
python爬虫之爬取百度音乐的实现方法
2019/08/24 Python
Python实现PyPDF2处理PDF文件的方法示例
2019/09/25 Python
Opencv求取连通区域重心实例
2020/06/04 Python
简单介绍CSS3中Media Query的使用
2015/07/07 HTML / CSS
人力资源求职信
2014/05/25 职场文书
机械工程学院大学生求职信
2014/05/25 职场文书
企业安全生产标语
2014/06/06 职场文书
产品委托授权书范本
2014/09/16 职场文书
师德师风剖析材料
2014/09/30 职场文书
2014三年级班主任工作总结
2014/12/05 职场文书
全陪导游词开场白
2015/05/29 职场文书
初中语文教师研修日志
2015/11/13 职场文书
85句关于理想的名言警句大全
2019/08/22 职场文书
Mongodb 迁移数据块的流程介绍分析
2022/04/18 MongoDB
新的CSS 伪类函数 :is() 和 :where()示例详解
2022/08/05 HTML / CSS