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 相关文章推荐
javascript 的Document属性和方法集合
Jan 25 Javascript
JS操作Cookies包括(读取添加与删除)
Dec 26 Javascript
JS和JQUERY获取页面大小,滚动条位置,元素位置(示例代码)
Dec 14 Javascript
jquery实现勾选复选框触发事件给input赋值
Feb 01 Javascript
JS+CSS实现另类带提示效果的竖向导航菜单
Oct 15 Javascript
使用jQuery实现WordPress中的Ctrl+Enter和@评论回复
May 21 Javascript
完美解决node.js中使用https请求报CERT_UNTRUSTED的问题
Jan 08 Javascript
基于EasyUI的基础之上实现树形功能菜单
Jun 28 Javascript
基于Cookie常用操作以及属性介绍
Sep 07 Javascript
使用store来优化React组件的方法
Oct 23 Javascript
Vue实现push数组并删除的例子
Nov 01 Javascript
通过实例了解Javascript柯里化流程
Mar 03 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
PHP isset()与empty()的使用区别详解
2010/08/29 PHP
PHP对象相互引用的内存溢出实例分析
2014/08/28 PHP
php获取指定(访客)IP所有信息(地址、邮政编码、国家、经纬度等)的方法
2015/07/06 PHP
PHP的压缩函数实现:gzencode、gzdeflate和gzcompress的区别
2016/01/27 PHP
PHP采用超长(超大)数字运算防止数字以科学计数法显示的方法
2016/04/01 PHP
在JavaScript中遭遇级联表达式陷阱
2007/03/08 Javascript
快速排序 php与javascript的不同之处
2011/02/22 Javascript
js的延迟执行问题分析
2014/06/23 Javascript
JavaScript中的值类型详细介绍
2014/12/29 Javascript
js分页工具实例
2015/01/28 Javascript
javascript实现的猜数小游戏完整实例代码
2016/05/10 Javascript
vue2.0实现倒计时的插件(时间戳 刷新 跳转 都不影响)
2017/03/30 Javascript
详解jQuery中关于Ajax的几个常用的函数
2017/07/17 jQuery
使用Node.js搭建静态资源服务详细教程
2017/08/02 Javascript
jQuery实现文件编码成base64并通过AJAX上传的方法
2018/04/12 jQuery
Vue 实现html中根据类型显示内容
2019/10/28 Javascript
vue2.0 获取从http接口中获取数据,组件开发,路由配置方式
2019/11/04 Javascript
Vue Router的手写实现方法实现
2020/03/02 Javascript
js实现翻牌小游戏
2020/07/31 Javascript
Python简单日志处理类分享
2015/02/14 Python
九步学会Python装饰器
2015/05/09 Python
Python实现各种排序算法的代码示例总结
2015/12/11 Python
浅析Python 中整型对象存储的位置
2016/05/16 Python
Python字符串拼接的几种方法整理
2017/08/02 Python
Python实现查找最小的k个数示例【两种解法】
2019/01/08 Python
python实现贪吃蛇小游戏
2020/03/21 Python
解决Jupyter notebook更换主题工具栏被隐藏及添加目录生成插件问题
2020/04/20 Python
使用python matploblib库绘制准确率,损失率折线图
2020/06/16 Python
python+selenium爬取微博热搜存入Mysql的实现方法
2021/01/27 Python
国外软件测试工程师面试题
2016/12/09 面试题
毕业生多媒体设计求职信
2013/10/12 职场文书
经济贸易系求职信
2014/08/04 职场文书
小学优秀教师事迹材料
2014/12/16 职场文书
酒店财务总监岗位职责
2015/04/03 职场文书
婚庆公司开业主持词
2015/06/30 职场文书
如何打开Win11系统注册表编辑器?Win11注册表编辑器打开修复方法
2022/04/05 数码科技