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 相关文章推荐
如何实现JS函数的重载
Sep 22 Javascript
javascript 45种缓动效果 非常酷
Jun 28 Javascript
jquery 列表双向选择器之改进版
Aug 09 Javascript
JavaScript实现的图像模糊算法代码分享
Apr 22 Javascript
node.js中的events.emitter.removeAllListeners方法使用说明
Dec 10 Javascript
jQuery on()方法绑定动态元素的点击事件实例代码浅析
Jun 16 Javascript
又一款js时钟!transform实现时钟效果
Aug 15 Javascript
jQuery复合事件结合toggle()方法的用法示例
Jun 10 jQuery
js实现购物车功能
Jun 12 Javascript
浅谈Vue.js 中的 v-on 事件指令的使用
Nov 25 Javascript
vue中tab选项卡的实现思路
Nov 25 Javascript
Vue快速实现通用表单验证的示例代码
Jan 09 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
微信自定义菜单的处理开发示例
2015/04/16 PHP
php安装php_rar扩展实现rar文件读取和解压的方法
2016/11/17 PHP
PHP实现15位身份证号转18位的方法分析
2019/10/16 PHP
jQuery 操作下拉列表框实现代码
2010/02/22 Javascript
js生成动态表格并为每个单元格添加单击事件的方法
2014/04/14 Javascript
jquery+html5烂漫爱心表白动画代码分享
2015/08/24 Javascript
jQuery实现鼠标经过时出现隐藏层文字链接的方法
2015/10/12 Javascript
javaScript数组迭代方法详解
2016/04/14 Javascript
mac上配置Android环境变量的方法
2018/07/08 Javascript
JS执行控制之节流模式实例分析
2018/12/21 Javascript
JavaScript实现移动端弹窗后禁止滚动
2020/05/25 Javascript
[04:15]DOTA2-DPC中国联赛1月19日Recap集锦
2021/03/11 DOTA
Python实现一个简单的MySQL类
2015/01/07 Python
python2.7+selenium2实现淘宝滑块自动认证功能
2018/02/24 Python
python 获取键盘输入,同时有超时的功能示例
2018/11/13 Python
python实现简易数码时钟
2021/02/19 Python
django-rest-swagger对API接口注释的方法
2019/08/29 Python
pytorch 指定gpu训练与多gpu并行训练示例
2019/12/31 Python
pyCharm 实现关闭代码检查
2020/06/09 Python
Python Tkinter图形工具使用方法及实例解析
2020/06/15 Python
keras 模型参数,模型保存,中间结果输出操作
2020/07/06 Python
Python 调用 ES、Solr、Phoenix的示例代码
2020/11/23 Python
Python从MySQL数据库中面抽取试题,生成试卷
2021/01/14 Python
Crocs波兰官方商店:女鞋、男鞋、童鞋、洞洞鞋
2019/10/08 全球购物
暑假实习求职信范文
2013/09/22 职场文书
文秘专业应届生求职信范文
2013/11/14 职场文书
房地产活动策划方案
2014/05/14 职场文书
感谢信模板大全
2015/01/23 职场文书
交通安全教育心得体会
2016/01/15 职场文书
职场新人刚入职工作总结该怎么写?
2019/05/15 职场文书
新手,如何业余时间安排好写作、提高写作能力?
2019/10/21 职场文书
使用qt quick-ListView仿微信好友列表和聊天列表的示例代码
2021/06/13 Python
MySQL中IF()、IFNULL()、NULLIF()、ISNULL()函数的使用详解
2021/06/26 MySQL
浅谈JavaScript浅拷贝和深拷贝
2021/11/07 Javascript
使用CSS设置滚动条样式
2022/01/18 HTML / CSS
HTML常用标签超详细整理
2022/03/19 HTML / CSS