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让setInteval里的函数参数中的this指向特定的对象
Jan 31 Javascript
基于jQuery实现下拉收缩(展开与折叠)特效
Dec 25 Javascript
javascript先序遍历DOM树的方法
Feb 27 Javascript
详解微信小程序开发之——wx.showToast(OBJECT)的使用
Jan 18 Javascript
jquery ajaxfileupload异步上传插件使用详解
Feb 08 Javascript
使用bootstraptable插件实现表格记录的查询、分页、排序操作
Aug 06 Javascript
VSCode使用之Vue工程配置eslint
Apr 30 Javascript
JavaScript一元正号运算符示例代码
Jun 30 Javascript
JS Math对象与Math方法实例小结
Jul 05 Javascript
微信公众号开发之微信支付代码记录的实现
Oct 16 Javascript
Vue程序化的事件监听器(实例方案详解)
Jan 07 Javascript
JavaScript实现简单的弹窗效果
May 19 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中通过ADO调用Asscess数据库和COM程序
2006/10/09 PHP
php绘制圆形的方法
2015/01/24 PHP
PHP实现JS中escape与unescape的方法
2016/07/11 PHP
php遍历替换目录下文件指定内容的方法
2016/11/10 PHP
仅IE6/7/8中innerHTML返回值忽略英文空格的问题
2011/04/07 Javascript
新浪微博字数统计 textarea字数统计实现代码
2011/08/28 Javascript
javascript解决innerText浏览器兼容问题思路代码
2013/05/17 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
文本框水印提示效果的简单实现代码
2014/02/22 Javascript
jquery网页回到顶部效果(图标渐隐,自写)
2014/06/16 Javascript
用javascript将数据导入Excel示例代码
2014/09/10 Javascript
js编写当天简单日历效果【实现代码】
2016/05/03 Javascript
jQuery实现判断控件是否显示的方法
2017/01/11 Javascript
JS简单获取当前日期时间的方法(如:2017-03-29 11:41:10 星期四)
2017/03/29 Javascript
谈谈React中的Render Props模式
2018/12/06 Javascript
javascript中undefined的本质解析
2019/07/31 Javascript
详解js location.href和window.open的几种用法和区别
2019/12/02 Javascript
JavaScript动画实例之粒子文本的实现方法详解
2020/07/28 Javascript
python通过ssh-powershell监控windows的方法
2015/06/02 Python
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
Python打包方法Pyinstaller的使用
2018/10/09 Python
Django框架视图介绍与使用详解
2019/07/18 Python
Pycharm 2019 破解激活方法图文详解
2019/10/11 Python
使用 Python 清理收藏夹里已失效的网站
2019/12/03 Python
python实现上传文件到linux指定目录的方法
2020/01/03 Python
Keras构建神经网络踩坑(解决model.predict预测值全为0.0的问题)
2020/07/07 Python
Python绘制K线图之可视化神器pyecharts的使用
2021/03/02 Python
英国最大的香水商店:The Fragrance Shop
2018/07/06 全球购物
俄罗斯购买内衣网站:Trusiki
2020/08/22 全球购物
2014年爱国卫生工作总结
2014/11/22 职场文书
辩论赛新闻稿
2015/07/17 职场文书
幼儿园奖惩制度范本
2015/08/05 职场文书
Django如何创作一个简单的最小程序
2021/05/12 Python
浅谈Laravel中使用Slack进行异常通知
2021/05/29 PHP
总结Java对象被序列化的两种方法
2021/06/30 Java/Android
Windows Server 2012 R2服务器安装与配置的完整步骤
2022/07/15 Servers