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 delete操作符应用实例
Jan 13 Javascript
jQuery学习笔记之Helloworld
Dec 22 Javascript
分享28款免费实用的 JQuery 图片和内容滑块插件
Dec 15 Javascript
javascript抽象工厂模式详细说明
Dec 16 Javascript
javascript每日必学之继承
Feb 23 Javascript
基于Bootstrap实现图片轮播效果
May 22 Javascript
利用css+原生js制作简单的钟表
Apr 07 Javascript
jQuery实现磁力图片跟随效果完整示例
Sep 16 Javascript
AngularJS2中一种button切换效果的实现方法(二)
Mar 27 Javascript
深究AngularJS——ng-checked(回写:带真实案例代码)
Jun 13 Javascript
vue利用axios来完成数据的交互
Mar 23 Javascript
TypeScript 引用资源文件后提示找不到的异常处理技巧
Jul 15 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开发留言板的CRUD(增,删,改,查)操作
2012/04/19 PHP
php除数取整示例
2014/04/24 PHP
利用php的ob缓存机制实现页面静态化方法
2017/07/09 PHP
PHP递归遍历文件夹去除注释并压缩php源代码的方法示例
2018/05/23 PHP
PHP连接MySQL数据库三种实现方法
2020/12/10 PHP
Javascript将string类型转换int类型
2010/12/09 Javascript
js+html5实现的自由落体运动效果代码
2016/01/28 Javascript
jQuery学习笔记之回调函数
2016/08/15 Javascript
Vue.js组件使用开发实例教程
2016/11/01 Javascript
angularjs中ng-attr的用法详解
2016/12/31 Javascript
微信小程序的动画效果详解
2017/01/18 Javascript
Javascript中的getter和setter初识
2017/08/17 Javascript
实现图片首尾平滑轮播(JS原生方法—节流)
2017/10/17 Javascript
Vue侧滑菜单组件——DrawerLayout
2017/12/18 Javascript
浅谈Vue2.0中v-for迭代语法的变化(key、index)
2018/03/06 Javascript
Node.js net模块功能及事件监听用法分析
2019/01/05 Javascript
JQuery事件委托原理与用法实例分析
2019/05/13 jQuery
vue+element table表格实现动态列筛选的示例代码
2021/01/14 Vue.js
[44:04]OG vs Mineski 2018国际邀请赛小组赛BO2 第一场 8.17
2018/08/18 DOTA
深入解读Python解析XML的几种方式
2016/02/16 Python
pandas 把数据写入txt文件每行固定写入一定数量的值方法
2018/12/28 Python
一行Python代码制作动态二维码的实现
2019/09/09 Python
Python enumerate函数遍历数据对象组合过程解析
2019/12/11 Python
PyTorch中torch.tensor与torch.Tensor的区别详解
2020/05/18 Python
Python如何实现邮件功能
2020/05/27 Python
Scrapy中如何向Spider传入参数的方法实现
2020/09/28 Python
selenium携带cookies模拟登陆CSDN的实现
2021/01/19 Python
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
大学生学业生涯规划
2014/01/05 职场文书
婚庆公司计划书
2014/09/15 职场文书
巾帼文明岗事迹材料
2014/12/24 职场文书
广告业务员岗位职责
2015/02/13 职场文书
公司搬迁通知
2015/04/20 职场文书
全国劳模先进事迹材料(2016精选版)
2016/02/25 职场文书
分享15个Webpack实用的插件!!!
2021/03/31 Javascript
如何正确理解python装饰器
2021/06/15 Python