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 相关文章推荐
js类的静态属性和实例属性的理解
Oct 01 Javascript
编写自己的jQuery提示框(Tip)插件
Feb 05 Javascript
原生js实现模拟滚动条
Jun 15 Javascript
使用vue.js制作分页组件
Jun 27 Javascript
js中class的点击事件没有效果的解决方法
Oct 13 Javascript
微信小程序 this和that详解及简单实例
Feb 13 Javascript
node.js(express)中使用Jcrop进行图片剪切上传功能
Apr 21 Javascript
vue中七牛插件使用的实例代码
Jul 28 Javascript
自定义Vue中的v-module双向绑定的实现
Apr 17 Javascript
JS回调函数深入理解
Oct 16 Javascript
JavaScript实现文件下载并重命名代码实例
Dec 12 Javascript
vue项目中js-cookie的使用存储token操作
Nov 13 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 文件上传功能实现代码
2009/06/24 PHP
PHP-Fcgi下PHP的执行时间设置方法
2013/08/02 PHP
php教程之魔术方法的使用示例(php魔术函数)
2014/02/12 PHP
juqery 学习之三 选择器 层级 基本
2010/11/25 Javascript
js实现单行文本向上滚动效果实例代码
2013/11/28 Javascript
分离与继承的思想实现图片上传后的预览功能:ImageUploadView
2016/04/07 Javascript
AngulaJS路由 ui-router 传参实例
2017/04/28 Javascript
JS实现json的序列化和反序列化功能示例
2017/06/13 Javascript
jQuery实现可兼容IE6的滚动监听功能
2017/09/20 jQuery
vue实现消息的无缝滚动效果的示例代码
2017/12/05 Javascript
jQuery幻灯片插件owlcarousel参数说明中文文档
2018/02/27 jQuery
Node.js引入UIBootstrap的方法示例
2018/05/11 Javascript
详解vue项目中调用百度地图API使用方法
2019/04/25 Javascript
JS/jQuery实现超简单的Table表格添加,删除行功能示例
2019/07/31 jQuery
layer.open提交子页面的form和layedit文本编辑内容的方法
2019/09/27 Javascript
基于Vue中使用节流Lodash throttle详解
2019/10/30 Javascript
通过实例解析chrome如何在mac环境中安装vue-devtools插件
2020/07/10 Javascript
vue和H5 draggable实现拖拽并替换效果
2020/07/29 Javascript
[57:22]2018DOTA2亚洲邀请赛 4.7总决赛 LGD vs Mineski 第五场
2018/04/10 DOTA
python itchat实现微信好友头像拼接图的示例代码
2017/08/14 Python
tensorflow实现简单的卷积神经网络
2018/05/24 Python
Python开启线程,在函数中开线程的实例
2019/02/22 Python
python3通过selenium爬虫获取到dj商品的实例代码
2019/04/25 Python
快速解决jupyter notebook启动需要密码的问题
2020/04/21 Python
回馈慈善的设计师太阳镜:DIFF eyewear
2019/10/17 全球购物
世界上最受欢迎的花店:1-800-Flowers.com
2020/06/01 全球购物
重写子类方法时,抛出异常的书写注意事项
2015/10/17 面试题
销售行政专员职责
2014/01/03 职场文书
学生会离职感言
2014/02/11 职场文书
高中军训的心得体会
2014/09/01 职场文书
教师党员个人自我剖析材料
2014/09/29 职场文书
公务员检讨书
2014/11/01 职场文书
2014年质量工作总结
2014/11/22 职场文书
2014年手术室工作总结
2014/11/26 职场文书
2016年艾滋病宣传活动总结
2016/04/01 职场文书
OpenCV实现普通阈值
2021/11/17 Java/Android