jQuery的live()方法对hover事件的处理示例


Posted in Javascript onFebruary 27, 2014

hover([over,]out)

一个模仿悬停事件(鼠标移动到一个对象上面及移出这个对象)的方法

当鼠标移动到一个匹配的元素上面时,会触发指定的第一个函数。

当鼠标移出这个元素时,会触发指定的第二个函数。

$('.myDiv').hover(function() { 
doSomething... 
}, function() { 
doSomething... 
});

而问题是有些元素比如菜单是通过AJAX动态加载的,hover方法执行的时候

菜单还没加载出来呢,所以就要用到jquery的另一个方法live()

.live() 方法能对一个还没有添加进DOM的元素有效,是由于使用了事件委托:

绑定在祖先元素上的事件处理函数可以对在后代上触发的事件作出回应。

传递给 .live() 的事件处理函数不会绑定在元素上,

而是把他作为一个特殊的事件处理函数,绑定在 DOM 树的根节点上。

$('.myDiv').live('hover',function(event){ 
if(event.type=='mouseenter'){ 
doSomething... 
}else{ 
doSomething... 
} 
})

有的jquery版本响应的是mouseenter和mouseleave
有的是mouseover和mouseout
待考证......
Javascript 相关文章推荐
jqgrid 表格数据导出实例
Nov 21 Javascript
JS小游戏之象棋暗棋源码详解
Sep 25 Javascript
js防止页面被iframe调用的方法
Oct 30 Javascript
javascript设计模式之对象工厂函数与构造函数详解
Jul 30 Javascript
AngularJS单选框及多选框实现双向动态绑定
Jan 13 Javascript
微信小程序自定义toast实现方法详解【附demo源码下载】
Nov 28 Javascript
利用Decorator如何控制Koa路由详解
Jun 26 Javascript
小白教程|一小时上手最流行的前端框架vue(推荐)
Apr 10 Javascript
vue.js中使用echarts实现数据动态刷新功能
Apr 16 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 Javascript
JavaScript 实现拖拽效果组件功能(兼容移动端)
Nov 11 Javascript
JavaScript实现显示和隐藏图片
Apr 29 Javascript
类似天猫商品详情随浏览器移动的示例代码
Feb 27 #Javascript
css结合js制作下拉菜单示例代码
Feb 27 #Javascript
js function定义函数的几种不错方法
Feb 27 #Javascript
window.open 以post方式传递参数示例代码
Feb 27 #Javascript
jQuery之ajax删除详解
Feb 27 #Javascript
jQuery之字体大小的设置方法
Feb 27 #Javascript
jquery validate 自定义验证方法介绍 日期验证
Feb 27 #Javascript
You might like
PHP 网络开发详解之远程文件包含漏洞
2010/04/25 PHP
thinkphp实现163、QQ邮箱收发邮件的方法
2015/12/18 PHP
PHP序列化/对象注入漏洞分析
2016/04/18 PHP
分享别人写的一个小型js框架
2007/08/13 Javascript
火狐浏览器(firefox)下获得Event对象以及keyCode
2008/11/13 Javascript
JQuery 应用 JQuery.groupTable.js
2010/12/15 Javascript
Js 时间间隔计算的函数(间隔天数)
2011/11/15 Javascript
关于jquery性能最佳实践的讨论,与求教
2012/03/30 Javascript
require.js的用法详解
2015/10/20 Javascript
Jquery效果大全之制作电脑健康体检得分特效附源码下载
2015/11/02 Javascript
javascript用正则表达式过滤空格的实现代码
2016/06/14 Javascript
彻底学会Angular.js中的transclusion
2017/03/12 Javascript
微信小程序实战之轮播图(3)
2017/04/17 Javascript
JS实现的全排列组合算法示例
2017/10/09 Javascript
VUE+Element UI实现简单的表格行内编辑效果的示例的代码
2018/10/31 Javascript
通过实例了解JS 连续赋值
2019/09/24 Javascript
Vue 实现输入框新增搜索历史记录功能
2019/10/15 Javascript
p5.js实现故宫橘猫赏秋图动画
2019/10/23 Javascript
Cython 三分钟入门教程
2009/09/17 Python
Python实现抓取城市的PM2.5浓度和排名
2015/03/19 Python
python开发中range()函数用法实例分析
2015/11/12 Python
python实现淘宝秒杀聚划算抢购自动提醒源码
2020/06/23 Python
python 删除非空文件夹的实例
2018/04/26 Python
python binascii 进制转换实例
2019/06/12 Python
PyCharm+Qt Designer+PyUIC安装配置教程详解
2019/06/13 Python
flask框架渲染Jinja模板与传入模板变量操作详解
2020/01/25 Python
详解python的变量缓存机制
2021/01/24 Python
英国现代家具和装饰网站:PN Home
2018/08/16 全球购物
计算机专业毕业生求职信分享
2013/12/24 职场文书
老师自我鉴定范文
2013/12/25 职场文书
2014年四风问题自我剖析材料
2014/09/15 职场文书
公务员群众路线专题民主生活会发言材料
2014/09/17 职场文书
2015年庆祝国庆节66周年演讲稿
2015/07/30 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers
JavaScript选择器函数querySelector和querySelectorAll
2021/11/27 Javascript
Python 中面向接口编程
2022/05/20 Python