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 相关文章推荐
在b/s开发中经常用到的javaScript技术
Aug 23 Javascript
checkbox 复选框不能为空
Jul 11 Javascript
Jquery Ajax 学习实例2 向页面发出请求 返回JSon格式数据
Mar 15 Javascript
jquery常用特效方法使用示例
Apr 25 Javascript
php,js,css字符串截取的办法集锦
Sep 26 Javascript
基于jquery和svg实现超炫酷的动画特效
Dec 09 Javascript
JS实现控制表格只显示行边框或者只显示列边框的方法
Mar 31 Javascript
JQuery控制radio选中和不选中方法总结
Apr 15 Javascript
vue2.0 axios跨域并渲染的问题解决方法
Mar 08 Javascript
JS中如何轻松遍历对象属性的方式总结
Aug 06 Javascript
微信小程序picker组件两列关联使用方式
Oct 27 Javascript
基于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
新52大事件
2020/03/03 欧美动漫
php中文本数据翻页(留言本翻页)
2006/10/09 PHP
php array_pop()数组函数将数组最后一个单元弹出(出栈)
2011/07/12 PHP
php实现telnet功能示例
2014/04/08 PHP
设定php简写功能的方法
2019/11/28 PHP
js实现运行代码需要刷新的解决方法
2007/08/18 Javascript
jquery 锁定弹出层实现代码
2010/02/23 Javascript
js和html5实现手机端刮刮卡抽奖效果完美兼容android/IOS
2013/11/18 Javascript
javascript如何创建表格(javascript绘制表格的二种方法)
2013/12/10 Javascript
JS动态添加与删除select中的Option对象(示例代码)
2013/12/25 Javascript
yui3的AOP(面向切面编程)和OOP(面向对象编程)
2015/05/01 Javascript
NodeJS的Promise的用法解析
2016/05/05 NodeJs
全面了解js中的script标签
2016/07/04 Javascript
AngularJS入门教程之过滤器详解
2016/08/19 Javascript
jQuery事件用法详解
2016/10/06 Javascript
js实现倒计时及时间对象
2016/11/15 Javascript
QRCode.js:基于JQuery的生成二维码JS库的使用
2017/06/23 jQuery
在vue项目创建的后初始化首次使用stylus安装方法分享
2018/01/25 Javascript
vue组件表单数据回显验证及提交的实例代码
2018/08/30 Javascript
vue单页面应用打开新窗口显示跳转页面的实例
2018/09/21 Javascript
Angular封装表单控件及思想总结
2019/12/11 Javascript
基于Web Audio API实现音频可视化效果
2020/06/12 Javascript
Angular短信模板校验代码
2020/09/23 Javascript
python os.fork() 循环输出方法
2019/08/08 Python
python opencv实现信用卡的数字识别
2020/01/12 Python
使用python编写一个语音朗读闹钟功能的示例代码
2020/07/14 Python
浅谈cookie和localStorage那些事
2019/08/27 HTML / CSS
英国豪华文具和皮具配件经典老品牌:Smythson(斯迈森)
2018/04/19 全球购物
计算s=f(f(-1.4))的值
2014/05/06 面试题
医学生自荐信
2013/12/03 职场文书
乡镇领导班子批评与自我批评材料
2014/09/23 职场文书
寒暑假实习证明书模板
2014/11/29 职场文书
社区安全温馨提示语
2015/07/14 职场文书
七年级作文之游记
2019/12/11 职场文书
nginx部署多前端项目的几种方法
2021/05/25 Servers
Spring Boot项目传参校验的最佳实践指南
2022/04/05 Java/Android