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作用域
Sep 24 Javascript
angularjs中的e2e测试实例
Dec 06 Javascript
60个很实用的jQuery代码开发技巧收集
Dec 15 Javascript
举例详解AngularJS中ngShow和ngHide的使用方法
Jun 19 Javascript
jQuery倒计时代码(超简单)
Feb 27 Javascript
Vue.js实现输入框绑定的实例代码
Aug 24 Javascript
Vue实现带进度条的文件拖动上传功能
Feb 23 Javascript
Bootstrap 按钮样式与使用代码详解
Dec 09 Javascript
Vue3.0结合bootstrap创建多页面应用
May 28 Javascript
node命令行工具之实现项目工程自动初始化的标准流程
Aug 12 Javascript
layui table 复选框跳页后再回来保持原来选中的状态示例
Oct 26 Javascript
微信小程序实现二维码签到考勤系统
Jan 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实现Google plus的好友拖拽分组效果
2016/10/21 PHP
js实现支持手机滑动切换的轮播图片效果实例
2015/04/29 Javascript
微信企业号开发之微信考勤百度地图定位
2015/09/11 Javascript
javascript实现五星评分功能
2015/11/10 Javascript
javascript验证内容为数字以及长度为10的简单实例
2016/08/20 Javascript
easyui combobox开启搜索自动完成功能的实例代码
2016/11/08 Javascript
JS获取多维数组中相同键的值实现方法示例
2017/01/06 Javascript
JavaScript中的普通函数和箭头函数的区别和用法详解
2017/03/21 Javascript
基于vue2.0实现仿百度前端分页效果附实现代码
2018/10/30 Javascript
VUE2.0+ElementUI2.0表格el-table实现表头扩展el-tooltip
2018/11/30 Javascript
实现Vue的markdown文档可以在线运行的方法示例
2018/12/11 Javascript
JavaScript动态检测密码强度原理及实现方法详解
2019/06/11 Javascript
.netcore+vue 实现压缩文件下载功能
2020/09/24 Javascript
Vue使用Element实现增删改查+打包的步骤
2020/11/25 Vue.js
[01:02:54]完美世界DOTA2联赛PWL S2 FTD vs GXR 第一场 11.22
2020/11/26 DOTA
简单介绍Python中的几种数据类型
2016/01/02 Python
Python使用Tkinter实现机器人走迷宫
2018/01/22 Python
Python 实现12306登录功能实例代码
2018/02/09 Python
uwsgi+nginx部署Django项目操作示例
2018/12/04 Python
在python中实现将一张图片剪切成四份的方法
2018/12/05 Python
Django Rest framework三种分页方式详解
2019/07/26 Python
python 实现矩阵填充0的例子
2019/11/29 Python
自学python用什么系统好
2020/06/23 Python
使用keras时input_shape的维度表示问题说明
2020/06/29 Python
python 最简单的实现适配器设计模式的示例
2020/06/30 Python
python语音识别指南终极版(有这一篇足矣)
2020/09/09 Python
Flask-SocketIO服务端安装及使用代码示例
2020/11/26 Python
Alba Moda瑞士网上商店:独家意大利时尚女装销售
2016/11/28 全球购物
Groupon法国官方网站:特卖和网上购物高达-70%
2019/09/02 全球购物
最畅销的视频游戏享受高达90%的折扣:CDKeys
2020/02/10 全球购物
作弊检讨书1000字
2014/02/01 职场文书
幼儿园教师获奖感言
2014/03/11 职场文书
《荷花》教学反思
2014/04/16 职场文书
公司试用期员工自我评价
2014/09/17 职场文书
假期安全教育广播稿
2014/10/04 职场文书
中小学生学籍证明
2014/10/25 职场文书