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 相关文章推荐
js 蒙版进度条(结合图片)
Mar 10 Javascript
ASP 过滤数组重复数据函数(加强版)
May 31 Javascript
SWFObject 2.1以上版本语法介绍
Jul 10 Javascript
JavaScrip实现PHP print_r的数功能(三种方法)
Nov 12 Javascript
vue.js表格组件开发的实例详解
Oct 12 Javascript
BootStrap框架个人总结(bootstrap框架、导航条、下拉菜单、轮播广告carousel、栅格系统布局、标签页tabs、模态框、菜单定位)
Dec 01 Javascript
JS实现按钮控制计时开始和停止功能
Jul 27 Javascript
vue-cli如何引入bootstrap工具的方法
Oct 19 Javascript
layui 数据表格复选框实现单选功能的例子
Sep 19 Javascript
express中static中间件的具体使用方法
Oct 17 Javascript
JavaScript(js)处理的HTML事件、键盘事件、鼠标事件简单示例
Nov 19 Javascript
javascript设计模式 ? 职责链模式原理与用法实例分析
Apr 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/01/18 PHP
PHP取得一个类的属性和方法的实现代码
2011/05/22 PHP
PHP操作文件类的函数代码(文件和文件夹创建,复制,移动和删除)
2011/11/10 PHP
使用cookie实现统计访问者登陆次数
2013/06/08 PHP
php 购物车完整实现代码
2014/06/05 PHP
ThinkPHP3.1新特性之对页面压缩输出的支持
2014/06/19 PHP
PHP中遇到BOM、编码导致json_decode函数无法解析问题
2014/07/02 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
PHP后台实现微信小程序登录
2018/08/03 PHP
Laravel 实现Controller向blade前台模板赋值的四种方式小结
2019/10/22 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
a标签的css样式四个状态
2021/03/09 HTML / CSS
javascript 文档的编码问题解决
2009/03/01 Javascript
jquery 插件实现图片延迟加载效果代码
2010/02/06 Javascript
Javascript调用C#代码
2011/01/17 Javascript
Google Dart编程语法和基本类型学习教程
2013/11/27 Javascript
如何将php数组或者对象传递给javascript
2014/03/20 Javascript
jQuery插件formValidator实现表单验证
2016/05/23 Javascript
Vue.js render方法使用详解
2017/04/05 Javascript
AngularJS 霸道的过滤器小结
2017/04/26 Javascript
node使用promise替代回调函数
2018/05/07 Javascript
JS实现贪吃蛇游戏
2019/11/15 Javascript
vue 判断页面是首次进入还是再次刷新的实例
2020/11/05 Javascript
python实现多线程的两种方式
2016/05/22 Python
Python简单定义与使用二叉树示例
2018/05/11 Python
使用python来调用CAN通讯的DLL实现方法
2019/07/03 Python
Django urls.py重构及参数传递详解
2019/07/23 Python
django重新生成数据库中的某张表方法
2019/08/28 Python
pytorch逐元素比较tensor大小实例
2020/01/03 Python
Python3 webservice接口测试代码详解
2020/06/23 Python
python基于pygame实现飞机大作战小游戏
2020/11/19 Python
应聘自荐书
2013/10/08 职场文书
博士生求职信
2014/07/06 职场文书
2016新年慰问信范文
2015/03/25 职场文书
家长通知书家长意见
2015/06/03 职场文书
永远是春天观后感
2015/06/12 职场文书