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 DOM 学习第七章 表单的扩展
Feb 19 Javascript
JavaScript中的View-Model使用介绍
Aug 11 Javascript
js监控IE火狐浏览器关闭、刷新、回退、前进事件
Jul 23 Javascript
javascript实现的上下无缝滚动效果
Sep 19 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
Dec 14 Javascript
angularJS 指令封装回到顶部示例详解
Jan 22 Javascript
原生JS实现导航下拉菜单效果
Nov 25 Javascript
jQuery实现web页面樱花坠落的特效
Jun 01 jQuery
jQuery+vue.js实现的九宫格拼图游戏完整实例【附源码下载】
Sep 12 jQuery
浅谈super-vuex使用体验
Jun 25 Javascript
微信小程序仿淘宝热搜词在搜索框中轮播功能
Jan 21 Javascript
详解Webpack4多页应用打包方案
Jul 16 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/05/07 PHP
php 代码优化之经典示例
2011/03/24 PHP
thinkPHP订单数字提醒功能的实现方法
2016/12/01 PHP
PHP实现微信模拟登陆并给用户发送消息的方法【文字,图片,图文】
2017/06/29 PHP
PHP长网址与短网址的实现方法
2017/10/13 PHP
用正则表达式 动态创建/增加css style script 兼容IE firefox
2009/03/10 Javascript
jQuery实现的立体文字渐变效果
2010/05/17 Javascript
js当一个变量为函数时 应该注意的一点细节小结
2011/12/29 Javascript
javascript生成随机颜色示例代码
2014/05/05 Javascript
Javascript中的Prototype到底是什么
2016/02/16 Javascript
微信小程序 教程之事件
2016/10/18 Javascript
JavaScript框架Angular和React深度对比
2017/11/20 Javascript
Vue中在新窗口打开页面及Vue-router的使用
2018/06/13 Javascript
微信小程序实现搜索历史功能
2020/03/26 Javascript
express框架中使用jwt实现验证的方法
2019/08/25 Javascript
layui实现给某一列加点击事件
2019/10/26 Javascript
vue prop传值类型检验方式
2020/07/30 Javascript
vant中的toast层级改变操作
2020/11/04 Javascript
python抽取指定url页面的title方法
2018/05/11 Python
Python 打印中文字符的三种方法
2018/08/14 Python
Python图像处理之图像的读取、显示与保存操作【测试可用】
2019/01/04 Python
python迭代器常见用法实例分析
2019/11/22 Python
如何在python中判断变量的类型
2020/07/29 Python
CSS3 实现时间轴动画
2020/11/25 HTML / CSS
美国新蛋IT数码商城:Newegg.com
2016/07/21 全球购物
伦敦最受欢迎的蛋糕店:Konditor & Cook
2019/11/01 全球购物
美国眼镜网站:LensCrafters
2020/01/19 全球购物
意大利文具和办公产品在线商店:Y-Office
2020/02/27 全球购物
幼儿园教师奖惩制度
2014/02/01 职场文书
毕业生写求职信的要点
2014/03/04 职场文书
纪律教育学习月活动总结
2014/08/27 职场文书
安全生产年活动总结
2014/08/29 职场文书
企业党员个人自我评价
2014/09/20 职场文书
中学生旷课检讨书500字
2014/10/29 职场文书
2015年小学数学教研组工作总结
2015/05/21 职场文书
Python基础详解之邮件处理
2021/04/28 Python