标签：
滚轮事件
jQuery核心库没有对mousewheel事件的差异性进行处理，但作为一个常用的事件，本文讲解一下。
mousewheel事件只有火狐浏览器不支持。mousewheel用于取得滚动距离的属性名为event.wheelDelta，往上滚一圈是120，往下滚一圈是-120.在IE6-8下，window无法绑定mousewheel事件，Opera，Safari，Chrome可以。
火狐下使用DOMMouseScroll来代替mousewheel事件。用于取得滚动距离的属性名为event.detail。往上滚一圈是-3，往下滚一圈是3.当我们按住ctrl,alt,shift键，再滚动鼠标滚轮时，detail的值就会变成-1和1.而且在按住ctrl键时，滑动滚轮还有缩放页面的功能，我们可以通过event.axis == event.HORIZONTAL_AXIS或event.axis == event.VERTICAL_AXIS得知是水平滚动还是垂直滚动。
兼容方案如下：
var wheel = function(obj,callback){
var wheelType = "mousewheel";
try{
document.createEvent("MouseScrollEvents"); //创建DOMMouseScroll事件，如果是火狐就会执行，不是火狐，就报错
wheelType = "DOMMouseScroll";
}catch(){}
addEvent(obj,wheelType,function(event){ //给对象obj绑定鼠标滚动事件
if("wheelDelta" in event){ //统一为120,其中正数为向上滚动，负数代表往下滚动
var delta = event.wheelDelta;
if(window.opera && opera.version()<10){ //opera9系列的方向跟上面的相反
delta = -delta
}
event.delta = Math.round(delta) / 120; //早期的safari会出现浮点数。为什么不赋值给wheelDelta，因为事件对象的原始属性是只读的，因此我们只能添加一个自定义属性delta来解决兼容性问题
}
else if("detail" in event){ //如果是火狐
event.wheelDelta = -event.detail * 40; //修复事件的wheelDelta属性，这样，火狐浏览器的这个属性就跟标准一样了
event.delta = event.wheelDelta / 120; //添加自定义属性delta解决兼容性问题
}
callback.call(obj,event);//这里的event.delta属性值是所有浏览器兼容的，往上一圈为1，往下一圈为-1.而event.wheelDelta属性在opera9系列和早期的safari中仍然存在问题，在其他浏览器下是正常的，往上一圈是120，往下一圈是-120.
})
}
滚轮事件触发页面的加载是电商领域必须知道的技术点，面试前一定要去了解一下整个流程。
mouseenter与mouseleave事件
在前端开发中，我们经常遇到隐藏弹出层或下拉菜单的需要。这就是所谓的显隐效果。我们经常使用mouseenter和mouseleave来实现。为什么不用mouseover和mouseout来实现呢，我来说一下这个问题：假设弹出层里面有无数子孙元素，我们的mouseout只监听弹出层最外面的大容器，我们很容易就移出这个大容器（鼠标移动到大容器的子元素，对于mouseout来说也算移出），但是实际上在鼠标还是在大容器范围内，会让判断失效。但mouseleave就不会，只有鼠标跑到大容器的外面才会触发，这是因为mouseenter和mouseleave不会冒泡。
但是webkit浏览器下不支持mouseenter和mouseleave事件。如何在不支持这两个事件的浏览器中模拟它们：
jQuery.each(
{
mouseenter:"mouseover",
mouseleave:"mouseout"
},
function(orig, fix){ //orig是mouseenter，fix是mouseover
jQuery.event.special[orig] = { //把mouseenter事件当做特殊事件处理
delegateType:fix, //用mouseover伪装mouseenter
bindType: fix,
handle:function(event){ //这时的event已经被修复了
var ret,target = this,handleObj = event.handleObj, related = event.relatedTarget;//对mouseover事件而言，事件的主目标是获得光标的元素，而相关元素就是那个失去光标的元素。类似地，对mouseout事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。IE下不支持这个属性，这个relatedTarget属性是在修复event时修复的，在IE下，它的值在mouseover时，等于fromElement（假设从div1移动到目标元素div2，那么这时的fromElement是div1），在mouseout时，等于toElement（假设从目标元素div2移出来到div1中，那么这时的toElement是div1）。
if(!related || (related ! == target && !jQuery.contains(target,related))){ //这时related=div1，target = div2，并且div2不包含div1，就是if语句执行回调方法，模拟mouseenter，mouseleave。如果是在div2中移动，比如移动到div2的子元素div3中，这时会触发div2的mouseout事件，这时target就是div2，relatedTarget就是div3，但是target包含related，所以不会进入if语句，解决了mouseover显隐时的问题。同时也会触发div3的mouseover事件，然后冒泡到div2，这时target就是div2，relatedTarget也是div2，所以也不会进入if语句。
event.type = handleObj.origType; //事件的原始类型，也就是mouseenter
ret = handleObj.handler.apply(this,arguments); //执行回调方法
event.type = fix; //事件的修复类型，也就是mouseover
}
return ret;
}
}
}
)
related也有不存在的情况下，比如，从窗口外面直接进入到div2. 这样就能在所有浏览器下通过mouseenter和mouseleave实现显隐效果了。
加油！
第二十七课：滚轮事件,mouseenter与mouseleave事件的修复
标签：
原文地址：http://www.cnblogs.com/chaojidan/p/4179863.html
