示例引用：

http://www.jsfoot.com/jquery/demo/2011-09-06/170.html

  <script type="text/javascript" src="scripts/jquery-1.2.6.min.js"></script>
  <script type="text/javascript" src="scripts/jquery.mousewheel.js"></script>
  <script type="text/javascript" src="scripts/jquery.onImagesLoad.js"></script>
  <script type="text/javascript" src="scripts/jScrollPane.js"></script>

/**
       * 用于检查一个对象是否包含在另外一个对象中
       * @method contains 
       * @param {string} parentNode 父节点
       * @param {string} childNode 子节点
    */
    function contains(parentNode, childNode) { 
        if (parentNode.contains) { 
            return parentNode != childNode && parentNode.contains(childNode); } 
        else { 
            return !!(parentNode.compareDocumentPosition(childNode) & 16); 
        } 
    }
    /**
       * 用于检查鼠标是否真正从外部移入或者移出对象的
       * @method checkHover 
       * @param {string} e 当前的事件对象
       * @param {string} target 目标对象
       * @param {string} relatedTarget 属性代表的就是鼠标刚刚离开的那个节点，当触发mouseout事件时它代表的是鼠标移向的那个对象。
       * 由于MSIE不支持这个属性，不过它有代替的属性，分别是 fromElement和toElement
    */
    function checkHover(e,target){
        var rel = getEvent(e).relatedTarget ,
        from = getEvent(e).fromElement ,
        to = getEvent(e).toElement;
        if (getEvent(e).type=="mouseover")  {
            return !contains(target,rel||from) && !( (rel||from)===target );
        } else {
            return !contains(target,rel||to) && !( (rel||to)===target );
        }
    }
    /**
       * 用于在MSIE或者FF下返回一个可用的event对象
       * @method getEvent 
       * @param {string} e 当前的事件对象
    */
    function getEvent(e){
        return e||window.event;
    }

for(var i=0;i<len;i++){
            $(liItem).$(i).addEvent("mouseover",function(e){
                if(checkHover(e,this)){
                    $(this).$(".add-focusS").addCss("display:block;");
                }
            });
            $(liItem).$(i).addEvent("mouseout",function(e){
                if(checkHover(e,this)){
                    $(this).$(".add-focusS").addCss("display:none;");
                }
            });
        }

onMouseOver IE3|N2|O3 当鼠标移动到某对象范围的上方时触发的事件

onMouseMove IE4|N4|O 鼠标移动时触发的事件

onMouseOut IE4|N3|O3 当鼠标离开某对象范围时触发的事件

onKeyPress IE4|N4|O 当键盘上的某个键被按下并且释放时触发的事件.[注意:页面内必须有被聚焦的对象]

onKeyDown IE4|N4|O 当键盘上某个按键被按下时触发的事件[注意:页面内必须有被聚焦的对象]

onKeyUp IE4|N4|O 当键盘上某个按键被按放开时触发的事件[注意:页面内必须有被聚焦的对象]

页面相关事件 事件 浏览器支持 描述

onAbort IE4|N3|O 图片在下载时被用户中断

onBeforeUnload IE4|N|O 当前页面的内容将要被改变时触发的事件

onError IE4|N3|O 捕抓当前页面因为某种原因而出现的错误，如脚本错误与外部数据引用的错误

onLoad IE3|N2|O3 页面内空完成传送到浏览器时触发的事件，包括外部文件引入完成

onMove IE|N4|O 浏览器的窗口被移动时触发的事件

onResize IE4|N4|O 当浏览器的窗口大小被改变时触发的事件

onScroll IE4|N|O 浏览器的滚动条位置发生变化时触发的事件

onStop IE5|N|O 浏览器的停止按钮被按下时触发的事件或者正在下载的文件被中断

onUnload IE3|N2|O3 当前页面将被改变时触发的事件

表单相关事件 事件 浏览器支持 描述

onBlur IE3|N2|O3 当前元素失去焦点时触发的事件 [鼠标与键盘的触发均可]

onChange IE3|N2|O3 当前元素失去焦点并且元素的内容发生改变而触发的事件 [鼠标与键盘的触发均可]

onFocus IE3|N2|O3 当某个元素获得焦点时触发的事件

onReset IE4|N3|O3 当表单中RESET的属性被激发时触发的事件

onSubmit IE3|N2|O3 一个表单被递交时触发的事件

滚动字幕事件 事件 浏览器支持 描述

onBounce IE4|N|O 在Marquee内的内容移动至Marquee显示范围之外时触发的事件

onFinish IE4|N|O 当Marquee元素完成需要显示的内容后触发的事件

onStart IE4|N|O 当Marquee元素开始显示内容时触发的事件

编辑事件 事件 浏览器支持 描述

onBeforeCopy IE5|N|O 当页面当前的被选择内容将要复制到浏览者系统的剪贴板前触发的事件

onBeforeCut IE5|N|O 当页面中的一部分或者全部的内容将被移离当前页面[剪贴]并移动到浏览者的系统剪贴时触发的事件

onBeforeEditFocus IE5|N|O 当前元素将要进入编辑状态

onBeforePaste IE5|N|O 内容将要从浏览者的系统剪贴板传送[粘贴]到页面中时触发的事件

onBeforeUpdate IE5|N|O 当浏览者粘贴系统剪贴板中的内容时通知目标对象

onContextMenu IE5|N|O 当浏览者按下鼠标右键出现菜单时或者通过键盘的按键触发页面菜单时触发的事件 [试试在页面中的<body>中加入onContentMenu="return false"就可禁止使用鼠标右键了]

onCopy IE5|N|O 当页面当前的被选择内容被复制后触发的事件

onCut IE5|N|O 当页面当前的被选择内容被剪切时触发的事件

onDrag IE5|N|O 当某个对象被拖动时触发的事件 [活动事件]

onDragDrop IE|N4|O 一个外部对象被鼠标拖进当前窗口或者帧

onDragEnd IE5|N|O 当鼠标拖动结束时触发的事件，即鼠标的按钮被释放了

onDragEnter IE5|N|O 当对象被鼠标拖动的对象进入其容器范围内时触发的事件

onDragLeave IE5|N|O 当对象被鼠标拖动的对象离开其容器范围内时触发的事件

onDragOver IE5|N|O 当某被拖动的对象在另一对象容器范围内拖动时触发的事件

onDragStart IE4|N|O 当某对象将被拖动时触发的事件

onDrop IE5|N|O 在一个拖动过程中，释放鼠标键时触发的事件

onLoseCapture IE5|N|O 当元素失去鼠标移动所形成的选择焦点时触发的事件

onPaste IE5|N|O 当内容被粘贴时触发的事件

onSelect IE4|N|O 当文本内容被选择时的事件

onSelectStart IE4|N|O 当文本内容选择将开始发生时触发的事件

数据绑定 事件 浏览器支持 描述

onAfterUpdate IE4|N|O 当数据完成由数据源到对象的传送时触发的事件

onCellChange IE5|N|O 当数据来源发生变化时

onDataAvailable IE4|N|O 当数据接收完成时触发事件

onDatasetChanged IE4|N|O 数据在数据源发生变化时触发的事件

onDatasetComplete IE4|N|O 当来子数据源的全部有效数据读取完毕时触发的事件

onErrorUpdate IE4|N|O 当使用onBeforeUpdate事件触发取消了数据传送时，代替onAfterUpdate事件

onRowEnter IE5|N|O 当前数据源的数据发生变化并且有新的有效数据时触发的事件

onRowExit IE5|N|O 当前数据源的数据将要发生变化时触发的事件

onRowsDelete IE5|N|O 当前数据记录将被删除时触发的事件

onRowsInserted IE5|N|O 当前数据源将要插入新数据记录时触发的事件

数据绑定 事件 浏览器支持 描述

onAfterPrint IE5|N|O 当文档被打印后触发的事件

onBeforePrint IE5|N|O 当文档即将打印时触发的事件

onFilterChange IE4|N|O 当某个对象的滤镜效果发生变化时触发的事件

onHelp IE4|N|O 当浏览者按下F1或者浏览器的帮助选择时触发的事件

onPropertyChange IE5|N|O 当对象的属性之一发生变化时触发的事件

onReadyStateChange IE4|N|O 当对象的初始化属性值发生变化时触发的事件

js mouseover 改 mouseleave 、鼠标事件相关推荐

  1. [js点滴]JavaScript之鼠标事件04

    鼠标事件 事件种类 鼠标事件指与鼠标相关的事件,主要有以下一些. (1)click事件 click事件当用户在Element节点.document节点.window对象上,单击鼠标(或者按下回车键)时 ...

  2. JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别

    JS鼠标事件mouseout与mouseleave以及mouseover与mousemove区别 mouseout: mouseout是由子元素冒泡而来 鼠标指针位于一个元素上方,然后用户将其移入另一 ...

  3. js 鼠标事件总结 mouseover/mouseout 与mouseenter/mouseleave 傻傻分不清楚?

    1. 鼠标事件 mouseenter mouseleave (一对事件 鼠标的进入和离开) 不支持冒泡 mouseenter:鼠标从元素外部移到元素内部时触发. mouseleave:鼠标从元素内部移 ...

  4. 鼠标事件mousemove、mouseover、mouseout、mouseenter、mouseleave

    Mousemove: 当鼠标指针在元素内移动时,mousemove事件就会被触发,任何HTML元素都可以接受此事件. Mousemove 事件是当鼠标指针移动时触发的,即使是一个像素.这意味着多个事件 ...

  5. html js不触发_图文详解鼠标事件CSS:hover和JS:mouseover的区别

    在工作中为了使页面更具有吸引力,前端开发人员经常会在页面中加上鼠标移入和移出的效果.鼠标移入移出的设置,一般有两种方法,一种是单纯用CSS中的hover伪类,另一种可以用JS 中的DOM事件,即onm ...

  6. [css] 鼠标事件css的:hover和js的mouseover有什么区别？

    [css] 鼠标事件css的:hover和js的mouseover有什么区别? JavaScript中鼠标事件有:onmouseover和onmouseout: 当鼠标移入和移出时触发事件onmous ...

  7. js 鼠标事件mouseover和mouseout在父盒子移到子盒子中的思考

    mouseover事件一般不推荐使用不过最近遇到了一个问题,就思考了一下. 如上图所示: HTML代码如下 <div class="father"><div cl ...

  8. js进阶 12-1 jquery的鼠标事件有哪些

    js进阶 12-1 jquery的鼠标事件有哪些 一.总结 一句话总结:1+3*2+1+1,其中里面有两组移入移出,一组和click,总结就是click(3个),hover(5个),mousemove ...

  9. js的鼠标事件（JavaScript的鼠标事件，vue的鼠标事件）

    js鼠标事件,相关属性: var div = document.getElementById("box")// 1.单击事件 onclickdiv.onclick = functi ...

最新文章

  1. Streams：深入理解Redis5.0新特性
  2. 微软一站式示例代码浏览器 v5.1 更新
  3. Qt Style Sheets(qt样式表)
  4. python开发板比较_再不学点Python，咱真老了--Adafruit Metro M0 Express开发板评测
  5. NDK error Error 126 make: *** Deleting file
  6. SpringBoot2.0 基础案例(04)：定时任务和异步任务的使用方式
  7. c语言中32位整数用谁标识,int占几个字节
  8. 自动跳动滑动门html,CSS如何实现滑动门效果_html/css_WEB-ITnose
  9. 华中科技大学伍冬睿教授团队：生理计算中的对抗攻击与防御综述
  10. word如何快速找到自己需要的符号/特殊符号？（干货满满）
  11. S7-300系列PLC如何通过GSD文件实现PROFIBUS DP主从通讯？
  12. 《软件工程与实践》 |（一）软件工程基础概述 知识梳理
  13. FinalShell更换背景颜色
  14. 从命令行安装Deb文件的5种方法
  15. 五角星是不是旋转对称图形_在线等。很简单，五角星是不是中心对称图形？
  16. 暑期实习-京东广告架构组三面面经
  17. 怎么给PDF添加页面？推荐三个PDF如何插入页面小妙招
  18. 【编程实践】为了带你搞懂RPC，我们手写了一个RPC框架
  19. 在Windows10操作系统中搭建ftp服务器
  20. 图像置乱之评价图像置乱度算法的选择

热门文章

  1. canvas绘制简单动画思路总结
  2. mysql中常用函数与存储过程的创建
  3. 实现财务自由到底需要多少钱？ | 佛系理财
  4. Android studio 底部的状态栏不见了如何显示
  5. 别让维权成为“奢侈品”
  6. Windows 搭建在线文档工具showdoc工具
  7. 游戏制作人是怎样炼成？
  8. java replace替换空格_替换空格-java
  9. Android LeakCanary原理分析
  10. LeetCode 1143 最长公共子序列