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之软键盘实现(js源码)
Jan 30 Javascript
<script defer> defer 是什么意思
May 10 Javascript
jquery中dom操作和事件的实例学习-表单验证
Nov 30 Javascript
Javacript实现颜色梯度变化和渐变的效果代码
May 31 Javascript
js利用appendChild对标签进行排序的实现方法
Oct 16 Javascript
Angular指令之restict匹配模式的详解
Jul 27 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
详解适配器在JavaScript中的体现
Sep 28 Javascript
Vue项目自动转换 px 为 rem的实现方法
Oct 29 Javascript
json解析大全 双引号、键值对不在一起的情况
Dec 06 Javascript
使用JS location实现搜索框历史记录功能
Dec 23 Javascript
Angular利用HTTP POST下载流文件的步骤记录
Jul 26 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上传、管理照片示例
2006/10/09 PHP
php设计模式 Strategy(策略模式)
2011/06/26 PHP
分享一段PHP制作的中文拼音首字母工具类
2014/12/11 PHP
php实现删除空目录的方法
2015/03/16 PHP
php通过文件头判断格式的方法
2016/05/28 PHP
php nginx 实时输出的简单实现方法
2018/01/21 PHP
Yii2.0实现的批量更新及批量插入功能示例
2019/01/29 PHP
防止动态加载JavaScript引起的内存泄漏问题
2009/10/08 Javascript
基于jQuery的左右滚动实现代码
2010/12/03 Javascript
js关闭父窗口时关闭子窗口
2013/04/01 Javascript
js与jQuery 获取父窗、子窗的iframe
2013/12/20 Javascript
浅谈jQuery中的事件
2015/03/23 Javascript
基于jQuery实现的仿百度首页滑动选项卡效果代码
2015/11/16 Javascript
浅谈js常用内置方法和对象
2016/09/24 Javascript
vue.js 使用axios实现下载功能的示例
2018/03/05 Javascript
Vue动态获取width的方法
2018/08/22 Javascript
JS 正则表达式验证密码、邮箱格式的实例代码
2018/10/28 Javascript
微信小程序与webview交互实现支付功能
2019/06/07 Javascript
解析JS在获取当前月的最后一天遇到的坑
2019/08/30 Javascript
vue 子组件watch监听不到prop的解决
2020/08/09 Javascript
vue+Element-ui实现分页效果
2020/11/15 Javascript
Python实现批量修改文件名实例
2015/07/08 Python
Python各类图像库的图片读写方式总结(推荐)
2018/02/23 Python
python DataFrame 修改列的顺序实例
2018/04/10 Python
Flask入门之上传文件到服务器的方法示例
2018/07/18 Python
python进程和线程用法知识点总结
2019/05/28 Python
python binascii 进制转换实例
2019/06/12 Python
python实现学生信息管理系统(精简版)
2020/11/27 Python
罗兰·穆雷官网:Roland Mouret
2018/09/28 全球购物
俄罗斯名牌服装网上商店:UNIQUE FABRIC
2019/07/25 全球购物
c语言常见笔试题总结
2016/09/05 面试题
销售简历自我评价
2014/01/24 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
县政府领导班子四风问题对照检查材料思想汇报
2014/09/26 职场文书
公司领导班子民主生活会对照检查材料
2014/10/02 职场文书
apache虚拟主机配置的三种方式(小结)
2022/07/23 Servers