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 Validation实例代码 让验证变得如此容易
Oct 18 Javascript
jQuery 绑定事件到动态创建的元素上的方法实例
Aug 18 Javascript
jQuery CSS()方法改变现有的CSS样式表
Sep 09 Javascript
JS获取及验证开始结束日期的方法
Aug 20 Javascript
Bootstrap基本样式学习笔记之按钮(4)
Dec 07 Javascript
基于Bootstrap的标签页组件及bootstrap-tab使用说明
Jul 25 Javascript
react-native组件中NavigatorIOS和ListView结合使用的方法
Sep 30 Javascript
在小程序中推送模板消息的实现方法
Jul 22 Javascript
vue通过过滤器实现数据格式化
Jul 20 Javascript
查找Vue中下标的操作(some和findindex)
Aug 12 Javascript
vue-video-player 断点续播的实现
Feb 01 Vue.js
用React Native制作一个简单的游戏引擎
May 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
java EJB 加密与解密原理的一个例子
2008/01/11 PHP
深入了解PHP类Class的概念
2012/06/14 PHP
phpmyadmin config.inc.php配置示例
2013/08/27 PHP
Swoole-1.7.22 版本已发布,修复PHP7相关问题
2015/12/31 PHP
Joomla简单判断用户是否登录的方法
2016/05/04 PHP
jQuery 位置插件
2008/12/25 Javascript
动态创建的表格单元格中的事件实现代码
2008/12/30 Javascript
js中window.open打开一个新的页面
2014/08/10 Javascript
jquery马赛克拼接翻转效果代码分享
2015/08/24 Javascript
超漂亮的jQuery图片轮播特效
2015/11/24 Javascript
Bootstrap Table使用方法详解
2016/08/01 Javascript
Node.js测试中的Mock文件系统详解
2016/11/21 Javascript
js实现textarea限制输入字数
2017/02/13 Javascript
vue通过style或者class改变样式的实例代码
2018/10/30 Javascript
Python列表append和+的区别浅析
2015/02/02 Python
python使用opencv读取图片的实例
2017/08/17 Python
python导入csv文件出现SyntaxError问题分析
2017/12/15 Python
django settings.py 配置文件及介绍
2019/07/15 Python
python进阶之自定义可迭代的类
2019/08/20 Python
python颜色随机生成器的实例代码
2020/01/10 Python
在pytorch中对非叶节点的变量计算梯度实例
2020/01/10 Python
Python使用Socket实现简单聊天程序
2020/02/28 Python
Python用Jira库来操作Jira
2020/12/28 Python
Origins悦木之源英国官网:雅诗兰黛集团高端植物护肤品牌
2017/11/06 全球购物
FLOS美国官网:意大利高级照明工艺的传奇
2018/08/07 全球购物
在网络中有两台主机A和B,并通过路由器和其他交换设备连接起来,已经确认物理连接正确无误,怎么来测试这两台机器是否连通?如果不通,怎么来判断故障点?怎么排
2014/01/13 面试题
客户经理岗位职责
2013/12/08 职场文书
婚礼司仪主持词
2014/03/14 职场文书
同学会主持词
2014/03/18 职场文书
应届大学生求职信
2014/07/20 职场文书
考察邀请函范文
2015/01/31 职场文书
会计试用期自我评价
2015/03/10 职场文书
2015年毕业生自荐信范文
2015/03/24 职场文书
《植物妈妈有办法》教学反思
2016/02/23 职场文书
用Python监控你的朋友都在浏览哪些网站?
2021/05/27 Python
Java实现斗地主之洗牌发牌
2021/06/14 Java/Android