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 相关文章推荐
Mootools 1.2教程 排序类和方法简介
Sep 15 Javascript
动态加载script文件的两种方法
Aug 15 Javascript
jquery实现移动端点击图片查看大图特效
Sep 11 Javascript
全面解析JS字符串和正则表达式中的match、replace、exec等函数
Jul 01 Javascript
Bootstrap Table服务器分页与在线编辑应用总结
Aug 08 Javascript
AngularJS 2.0入门权威指南
Oct 08 Javascript
jQuery无刷新上传之uploadify简单代码
Jan 17 Javascript
Angular4学习笔记之新建项目的方法
Jul 18 Javascript
vue-cli 3.x配置跨域代理的实现方法
Apr 12 Javascript
webpack中的模式(mode)使用详解
Feb 20 Javascript
JavaScript中作用域链的概念及用途讲解
Aug 06 Javascript
js实现简单扫雷
Nov 27 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调用mysql存储过程
2007/02/14 PHP
IIS6.0中配置php服务全过程解析
2013/08/07 PHP
php对称加密算法示例
2014/05/07 PHP
PHP实现从远程下载文件的方法
2015/03/12 PHP
用JQuery调用Session的实现代码
2010/10/29 Javascript
使用jquery mobile做幻灯播放效果实现步骤
2013/01/04 Javascript
JavaScript中this的使用详解
2013/11/08 Javascript
js 异步操作回调函数如何控制执行顺序
2013/12/24 Javascript
jquery实现非叠加式的搜索框提示效果
2014/01/07 Javascript
Node.js服务器环境下使用Mock.js拦截AJAX请求的教程
2016/05/23 Javascript
JQuery手速测试小游戏实现思路详解
2016/09/20 Javascript
JavaScript判断输入是否为数字类型的方法总结
2017/09/28 Javascript
ztree实现左边动态生成树右边为内容详情功能
2017/11/03 Javascript
Vue-cli-webpack搭建斗鱼直播步骤详解
2017/11/17 Javascript
浅析vue-router原理
2018/10/19 Javascript
ES6的解构赋值实例详解
2019/05/06 Javascript
vue双向绑定数据限制长度的方法
2019/11/04 Javascript
vuex存储复杂参数(如对象数组等)刷新数据丢失的解决方法
2019/11/05 Javascript
解决Pycharm下面出现No R interpreter defined的问题
2018/10/29 Python
TensorFlow实现打印每一层的输出
2020/01/21 Python
对python中list的五种查找方法说明
2020/07/13 Python
Python大批量搜索引擎图像爬虫工具详解
2020/11/16 Python
HTML5中的网络存储实现方式
2020/04/28 HTML / CSS
颇特女士香港官网:NET-A-PORTER香港
2021/03/08 全球购物
描述一下JVM加载class文件的原理机制
2013/12/08 面试题
Python中如何定义一个函数
2016/09/06 面试题
财务会计专业应届毕业生求职信
2013/10/18 职场文书
八荣八耻演讲稿
2014/09/15 职场文书
党员贯彻十八大精神思想汇报范文
2014/10/25 职场文书
2014年世界艾滋病日宣传活动总结
2014/11/18 职场文书
工地材料员岗位职责
2015/04/11 职场文书
2015年医院药剂科工作总结
2015/05/04 职场文书
2015年校务公开工作总结
2015/05/26 职场文书
安全知识竞赛主持词
2015/06/30 职场文书
springboot中的pom文件 project报错问题
2022/01/18 Java/Android
Python基本的内置数据类型及使用方法
2022/04/13 Python