鼠标与滚轮事件
《javascript高级程序设计》13章 --- 13.4.3 笔记
一 、DOM3级事件定义了9个鼠标事件
a. click 单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。意味着click即可以通过键盘也可以通过鼠标触发事件
b. dblclick 双击主鼠标按钮（一般是左边的按钮）时触发
c. mousedown 按下任意鼠标按钮触发，不能通过键盘触发
d. mouseenter 鼠标光标从元素外部首次移到元素范围之内触发，这个事件不冒泡。而且光标移动到后代元素上不会触发。IE,Firefox9+,Opera支持这个事件
e. mouseleave 在位于元素上方的鼠标光标移到元素范围之外触发，这个事件不冒泡。而且光标移动到后代元素上不会触发。IE,Firefox9+,Opera支持这个事件
f. mousemove 当鼠标指针在元素内部移动时重复触发，不能通过键盘触发这个事件
g. mouseout 在鼠标指针位于一个元素上方，然后将其移入另一个元素时触发。又移入的另一个元素可能位于前一个元素的外部，也可能是这个元素的子元素，不能通过键盘触发这个事件
h. mouseover 在鼠标指针位于一个元素外部，然后将其首次移入另一个元素边界之内触发，不能通过键盘触发
i. mouseup 释放鼠标按钮时触发。不能通过键盘触发
所有元素都支持鼠标事件，除了mouseleave,mouseenter之外的所有鼠标事件都支持冒泡。取消鼠标事件将会影响浏览器的默认行为。还会影响到其他事件
--------------------------------------------------
1. 只有在同一个元素上相继触发了mousedown和mouseup事件，才会触发click事件，若mousedown和 mouseup中的一个被取消，那click事件就不会触发
2. 只有触发两次click事件，才能触发dblclick事件，只要其中有任意一个事件取消，就不会触发dblclick事件，它在内部的事件触发流程如下
mousedown ---> mouseup ---> click ---> mousedown ---> mouseup –-> click ---> dblclick
在ie< 9中，双击事件会跳过第二个mousedown和click事件，其顺序如下
mousedown ---> mouseup ---> click ---> mouseup ---> dblclick
3.DOM2事件检测 document.implementation.hasFeature(‘MouseEvents’,’2.0’) 2级为MouseEvents
DOM3事件检测则为 document.implementation.hasFeature(‘MouseEvent’,’3.0’) 3级为MouseEvent
二、其他事件信息
1.客户区坐标位置 event.clientX / event.clientY 表示事件发生时鼠标指针在视口中的水平和垂直坐标（不包含滚动的距离
2.页面坐标位置 event.pageX /event.pageY 表示事件发生时鼠标指针在页面中的水平和垂直坐标（包含滚动距离） IE < 9 不支持此属性，可以通过客户区坐标和滚动信息（document.body 混杂模式 || document.documentElement 标准模式）计算
3. 屏幕坐标位置 event.screenX /event.screenY 表示事件发生时鼠标指针在整个屏幕的坐标信息
4. 修改键 主要为Shift,Ctrl,Alt, Meta(在windows键盘中为windows键，在苹果机中为Cmd键），DOM规定了4个属性shiftKey,ctrlKey,altKey,metaKey，检测事件发生时，是否同时按下了这4个键，若是返回true,否则为false (IE < 9不支持metaKey这个属性）
5. 相关元素 发生mouseover mouseout事件时，还会涉及到更多元素。这两个事件都会涉及把鼠标指针从一个元素的边界移到到另一个元素的边界之内。对mouseover事件而言，事件的主目标就是获取光标的元素，而相关元素就是那个失去光标的元素
DOM通过Event对象的relatedTarget属性提供了相关元素的信息，这个属性只对于mouseover mouseout事件才包含值，其他事件这个属性值为null，IE < 9 没这个属性，但可以通过fromElement和toElement保存着这些信息 （在mouseover中fromElment保存着相关元素。mouseout中toElement保存着相关元素)
6. 鼠标按钮 对于mousedown与mouseup来说，其event对象中有一个button属性，表示按下或释放的按钮
DOM的button属性可能有3个值： 0 --- 主鼠标按钮（左键） 1 ---- 中间的鼠标按钮（滚轮） 2---次鼠标按钮（ 右键）
IE < 9 的button属性值如下
0 ----- 没按下按钮 1----- 主鼠标按钮 2 ------- 次鼠标按钮 3----- 同时按下主与次鼠标按钮
4 ------ 中间的鼠标按钮 5 ----- 主与中间鼠标按钮 6----- 次与中间鼠标按钮 7 ------ 同时按下3个鼠标按钮
7. 更多的事件信息
detail属性，用于给出有关事件的更多信息，对于 鼠标事件来说，就是一个数值，表示在给定位置上发生了多少次单击，在同一个元素上相继地发生一次mousedown和一次mouseup事件算作一次单击，detail属性从1开始计数，每次单击发生后都会递增，如果鼠标在mousedown和mouseup之间移动了位置，则detail会重置为0
IE事件更多鼠标点击信息
altLeft /ctrlLeft/shiftLeft 布尔值，表示是否同时按下了alt,ctrl,shift键，若为true,那么对应的修改键属性也为true
offsetX/offsetY 光标相对目标元素边界的X、Y坐标
8. 鼠标滚轮事件 这个事件可以在任何元素是触发，但最终会冒泡到document(IE< 9) 或 window(IE > 8 ,opera,chrome,safari)
IE ,opera,safari,chrome 支持mousewheel,其event对象有一个wheelDelta属性，当用户滚动滚轮时，wheelDelta是120的倍数，向后是-120的倍数，向前是120的倍数
在opera9.5之前的版本中wheelDelta值的正负号是颠倒的
Firefox支持DOMMouseScroll事件，该事件会冒泡到window对象上，其有关鼠标滚轮事件的信息保存在detail属性中，向前滚动是-3的倍数，向后是3的倍数
9. 触摸设备
面向iPhone 或iPod中的safari开发时，注意以下几点
a. 不支持dblclick事件，双击浏览器会放大画面，没办法改变该行为
b. 轻击可单击元素会触发mousemove事件，如果此操作会导致内容变化，将不再有其他事件发生，如果屏幕没有因此变化，那么会依次发生mousedown mouseup click事件，轻击不可单击的元素不会触发任何事件（可单击元素拗可产生默认操作的元素[link标签]或那些已被指定onclick元素处理程序的元素）
c. mousemove事件会触发mouseover mouseout事件
d. 两个手指放在屏幕上且页面随手指移动而滚动时会触发mousewheel和scroll事件
