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的朋友一点学习经验小结
Nov 23 Javascript
js 处理数组重复元素示例代码
Dec 27 Javascript
5款JavaScript代码压缩工具推荐
Jul 07 Javascript
如何屏蔽防止别的网站嵌入框架代码
Aug 24 Javascript
JS实现的车标图片提示效果代码
Oct 10 Javascript
JavaScript事件类型中UI事件详解
Jan 14 Javascript
表单元素值获取方式js及java方式的简单实例
Oct 15 Javascript
javascript图片预览和上传(兼容IE)
Mar 15 Javascript
js实现分页功能
May 24 Javascript
详解keep-alive + vuex 让缓存的页面灵活起来
Apr 19 Javascript
Vue 的双向绑定原理与用法揭秘
May 06 Javascript
jquery实现加载更多&quot;转圈圈&quot;效果(示例代码)
Nov 09 jQuery
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
Oracle Faq(Oracle的版本)
2006/10/09 PHP
mysql From_unixtime及UNIX_TIMESTAMP及DATE_FORMAT日期函数
2010/03/21 PHP
初识laravel5
2015/03/02 PHP
php源码分析之DZX1.5字符串截断函数cutstr用法
2015/06/17 PHP
jQuery搜索子元素的方法
2015/02/10 Javascript
js实现点击链接后窗口缩小并居中的方法
2015/03/02 Javascript
全面了解js中的script标签
2016/07/04 Javascript
JS制作图形验证码实现代码
2020/10/19 Javascript
JavaScript中从setTimeout与setInterval到AJAX异步
2017/02/13 Javascript
Angular+Bootstrap+Spring Boot实现分页功能实例代码
2017/07/21 Javascript
浅谈js中的bind
2019/03/18 Javascript
JavaScript使用百度ECharts插件绘制饼图操作示例
2019/11/26 Javascript
Array.filter中如何正确使用Async
2020/11/04 Javascript
Python3实现发送QQ邮件功能(html)
2017/12/15 Python
纯python实现机器学习之kNN算法示例
2018/03/01 Python
python绘制地震散点图
2019/06/18 Python
使用pytorch实现可视化中间层的结果
2019/12/30 Python
Python使用requests xpath 并开启多线程爬取西刺代理ip实例
2020/03/06 Python
找Python安装目录,设置环境路径以及在命令行运行python脚本实例
2020/03/09 Python
Django中的AutoField字段使用
2020/05/18 Python
Python headers请求头如何实现快速添加
2020/11/03 Python
anaconda安装pytorch1.7.1和torchvision0.8.2的方法(亲测可用)
2021/02/01 Python
Blue Nile台湾:钻石珠宝商,订婚首饰、结婚戒指和精品首饰
2017/11/24 全球购物
英超联赛的首选足球:Mitre足球
2019/05/06 全球购物
Bonami斯洛伐克:购买家具和家居饰品
2019/07/02 全球购物
什么是事务?为什么需要事务?
2012/01/09 面试题
财务人员个人自荐信范文
2013/09/26 职场文书
机关工会开展学习雷锋活动总结
2014/03/01 职场文书
学习雷锋精神演讲稿
2014/05/10 职场文书
幼师求职自荐信
2014/05/31 职场文书
名人演讲稿范文
2014/09/16 职场文书
优秀团队申报材料
2014/12/26 职场文书
实习单位意见
2015/06/04 职场文书
运动会加油稿50字
2015/07/21 职场文书
如何利用Matlab制作一款真正的拼图小游戏
2021/05/11 Python
css样式important规则的正确使用方式
2022/06/10 HTML / CSS