jQuery中绑定事件bind() on() live() one()的异同


Posted in Javascript onFebruary 23, 2017

jQuery中绑定事件的四种方法,他们可以同时绑定一个或多个事件

bind()-------------------------版本号小于3.0(在Jquery3.0中已经移除,相应unbind()也移除)

live()--------------------------版本号小于1.7(在Jquery1.7中已经移除,相应die()也移除)

delegate()-------------------版本号小于1.7(在Jquery1.7中已经移除)

on()---------------------------版本号大于1.7(在Jquery1.7中添加,相应off()也添加)

A:bind()事件的用法

<title>绑定事件</title>
 <script src="js/jQuery1.11.1.js" type="text/javascript"></script>
 <script>
  $(function () {
   $("p").bind({
    "mouseover": function () {
     $("p").css("background-color", "red");
    },
    "mouseout": function () {
     $("p").css("background-color", "");
    }
   });
  });
 </script>
</head>
<body>
 <p>what are you doing?</p>
</body>
</html>

第一个最大的区别就是:bind()的事件绑定是只对当前页面选中的元素有效。如果你想对动态创建的元素bind()事件,是没有办法达到效果的

在后面的动态生成DOM元素绑定事件就要使用on();

以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,同时也希望多多支持三水点靠木!

Javascript 相关文章推荐
小试JQuery的AutoComplete插件
May 04 Javascript
javascript引用类型之时间Date和数组Array
Aug 27 Javascript
javascript实现tab切换的两个实例
Nov 05 Javascript
基于JavaScript操作DOM常用的API小结
Dec 01 Javascript
移动端H5开发 Turn.js实现很棒的翻书效果
Jun 20 Javascript
JS实现倒计时(天数、时、分、秒)
Nov 16 Javascript
JavaScript实现经典排序算法之冒泡排序
Dec 28 Javascript
JavaScript中英文字符长度统计方法示例【按照中文占2个字符】
Jan 17 Javascript
JavaScript字符串检索字符的方法
Jun 23 Javascript
使用 jQuery 实现表单验证功能
Jul 05 jQuery
vue项目从node8.x升级到12.x后的问题解决
Oct 25 Javascript
微信小程序使用自定义组件导航实现当前页面高亮
Jan 02 Javascript
js实现简单的选项卡效果
Feb 23 #Javascript
Vue-resource实现ajax请求和跨域请求示例
Feb 23 #Javascript
jQuery事件详解
Feb 23 #Javascript
Vue2学习笔记之请求数据交互vue-resource
Feb 23 #Javascript
JavaScript基本类型值-Undefined、Null、Boolean
Feb 23 #Javascript
Javascript 链式作用域详细介绍
Feb 23 #Javascript
jQuery的三种bind/One/Live/On事件绑定使用方法
Feb 23 #Javascript
You might like
php5 pdo新改动加载注意事项
2008/09/11 PHP
php Sql Server连接失败问题及解决办法
2009/08/07 PHP
Yii框架中memcache用法实例
2014/12/03 PHP
PHP学习笔记(三):数据类型转换与常量介绍
2015/04/17 PHP
Zend Framework教程之连接数据库并执行增删查的方法(附demo源码下载)
2016/03/21 PHP
php通过curl添加cookie伪造登陆抓取数据的方法
2016/04/02 PHP
PHP生成图像验证码的方法小结(2种方法)
2016/07/18 PHP
JS获取地址栏参数的小例子
2013/08/23 Javascript
jQuery中DOM树操作之使用反向插入方法实例分析
2015/01/23 Javascript
JavaScript获取页面中超链接数量的方法
2015/11/09 Javascript
超漂亮的Bootstrap 富文本编辑器summernote
2016/04/05 Javascript
jQuery插入节点和移动节点用法示例(insertAfter、insertBefore方法)
2016/09/08 Javascript
使用JS正则表达式 替换括号,尖括号等
2016/11/29 Javascript
如何使用JS在HTML中自定义字符串格式化
2017/07/20 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
vue项目初始化到登录login页面的示例
2019/10/31 Javascript
[18:32]DOTA2 HEROS教学视频教你分分钟做大人-谜团
2014/06/12 DOTA
[57:50]DOTA2上海特级锦标赛主赛事日 - 4 胜者组决赛Secret VS Liquid第二局
2016/03/05 DOTA
[01:14]DOTA2 7.22版本新增神杖效果展示(智力英雄篇)
2019/05/29 DOTA
Python中类的定义、继承及使用对象实例详解
2015/04/30 Python
python如何通过实例方法名字调用方法
2018/03/21 Python
Python实现调用另一个路径下py文件中的函数方法总结
2018/06/07 Python
Python 网络编程之TCP客户端/服务端功能示例【基于socket套接字】
2019/10/12 Python
在pycharm中关掉ipython console/PyDev操作
2020/06/09 Python
如何在scrapy中集成selenium爬取网页的方法
2020/11/18 Python
用python制作个视频下载器
2021/02/01 Python
AmazeUI 等分网格的实现示例
2020/08/25 HTML / CSS
Yves Rocher伊夫·黎雪美国官网:法国始创植物美肌1959
2019/01/09 全球购物
Edwaybuy西班牙:小米在线商店
2019/12/04 全球购物
2015年第十五个全民国防教育日宣传活动方案
2015/05/06 职场文书
创业计划书之干洗店
2019/09/10 职场文书
祝福语集锦:朋友新店开业祝福语
2019/12/10 职场文书
详解MySQL 联合查询优化机制
2021/05/10 MySQL
HTML5基础学习之文本标签控制
2022/03/25 HTML / CSS
PHP 时间处理类Carbon
2022/05/20 PHP
MySQL数据库实验实现简单数据库应用系统设计
2022/06/21 MySQL