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代码
Aug 13 Javascript
JQuery从头学起第三讲
Jul 06 Javascript
使用js获取图片原始尺寸
Dec 03 Javascript
jQuery+PHP打造滑动开关效果
Dec 16 Javascript
jQuery控制元素显示、隐藏、切换、滑动的方法总结
Apr 16 Javascript
Jquery Easyui表单组件Form使用详解(30)
Dec 19 Javascript
Easyui笔记2:实现datagrid多行删除的示例代码
Jan 14 Javascript
利用jQuery解析获取JSON数据
Apr 08 jQuery
jQuery ajax调用webservice注意事项
Oct 08 jQuery
vue-router中的hash和history两种模式的区别
Jul 17 Javascript
javascript 设计模式之组合模式原理与应用详解
Apr 08 Javascript
在vant 中使用cell组件 定义图标该图片和位置操作
Nov 02 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
ecshop 订单确认中显示省市地址信息的方法
2010/03/15 PHP
PHP基于反射机制实现插件的可插拔设计详解
2016/11/10 PHP
Laravel 批量更新多条数据的示例
2017/11/27 PHP
php框架CodeIgniter使用redis的方法分析
2018/04/13 PHP
PHP获取HTTP body内容的方法
2018/12/31 PHP
node.js中的http.response.removeHeader方法使用说明
2014/12/14 Javascript
node.js中的fs.lstat方法使用说明
2014/12/16 Javascript
jquery+css实现动感的图片切换效果
2015/11/25 Javascript
使用jQuery Mobile框架开发移动端Web App的入门教程
2016/05/17 Javascript
javascript之IE版本检测超简单方法
2016/08/20 Javascript
node.js学习之base64编码解码
2016/10/21 Javascript
Angular.js自定义指令学习笔记实例
2017/02/24 Javascript
js中Number数字数值运算后值不对的解决方法
2017/02/28 Javascript
jQuery事件对象的属性和方法详解
2017/09/09 jQuery
Vue项目分环境打包的实现步骤
2018/04/02 Javascript
JS实现把一个页面层数据传递到另一个页面的两种方式
2018/08/13 Javascript
vue实现的微信机器人聊天功能案例【附源码下载】
2019/02/18 Javascript
详解js中let与var声明变量的区别
2020/04/05 Javascript
使用uni-app开发微信小程序的实现
2019/12/13 Javascript
vue 路由守卫(导航守卫)及其具体使用
2020/02/25 Javascript
OpenLayers实现图层切换控件
2020/09/25 Javascript
[09:59]DOTA2-DPC中国联赛2月7日Recap集锦
2021/03/11 DOTA
python中threading超线程用法实例分析
2015/05/16 Python
老生常谈进程线程协程那些事儿
2017/07/24 Python
linux下安装python3和对应的pip环境教程详解
2019/07/01 Python
python elasticsearch从创建索引到写入数据的全过程
2019/08/04 Python
python分布式编程实现过程解析
2019/11/08 Python
Matplotlib 绘制饼图解决文字重叠的方法
2020/07/24 Python
详解CSS3实现响应式手风琴效果
2020/06/10 HTML / CSS
意大利包包和行李箱销售网站:Bagaglio.it
2021/03/02 全球购物
毕业生自荐信的主要内容
2013/10/29 职场文书
自荐书范文范例
2014/02/13 职场文书
作文评语集锦大全
2014/04/23 职场文书
护士优质服务演讲稿
2014/08/26 职场文书
预备党员个人总结
2015/02/14 职场文书
2015年世界粮食日演讲稿
2015/03/20 职场文书