1 记录一下今天所学 javascript 事件相关的知识 2 鼠标 和 滚轮事件 在web开发当中 这也算是最常用的事件了吧！ 3 4 我们先来学习学习 鼠标事件，在dom3级中 为鼠标事件新增加了 9个事件， 5 其中有6个事件在dom2级的时候 大多数浏览器就已经支持了 所以被加入到了 dom3级的规范当中来 6 7 1. click 事件， 鼠标单击最常用的事件之一了吧。 8 2. dblclick事件， 鼠标双击 9 3. mousedown事件，鼠标按下 10 4. mouseup事件， 鼠标抬起 11 5. mouseover事件, 鼠标移入 12 6. mouseout事件, 鼠标移出 13 7. mouusenter事件 （不会冒泡的事件）， 14 8. mouseleave事件 （不会冒泡的事件）， 15 9. mousemove事件 鼠标移动 16 17 其中click事件是由 mousedown 和 mouseup 事件组合而成的。 18 可以通过 阻止这两个事件 从而阻止 click事件的触发！ 19 20 可以通过检测 查看浏览器 是否支持上面的DOM2级鼠标事件 21 var isSupported = document.implementation.hasFeature("MouseEvents", "2.0") 22 23 可以通过检测 查看浏览器 是否支持上面的DOM3级鼠标事件 24 var isSupported = document.implementation.hasFeature("MouseEvent", "3.0") 25 26 还可以通过 事件对象的属性 判断鼠标触发点击事件的时候 相对于 屏幕， 浏览器窗口，和整个页面的(水平，垂直)偏移位置。 27 28 1. 相对于浏览器视口的(水平，垂直)偏移位置 所有浏览器都支持 29 30 var x = clientX; 31 var y = clientY; 32 33 2. 相对于页面的(水平，垂直)偏移位置 ieee，7，8不支持 其他浏览器都支持 34 35 var x = pageX; 36 var y = pageY; 37 38 3. 相对于屏幕(水平，垂直)偏移的位置 39 40 var x = scrollX; 41 var y = scrollY; 42 43 ie6，7，8 可以通过下面的计算来 得出相对于页面的(水平，垂直)偏移位置 44 45 var x = clientX + (document.body.scrollLeft || document.documentElement.scrollLeft); 46 var y = clientY + (document.body.scrollTop || document.documentElement.scrollTop); 47 48 可以写成一个兼容函数 49 DOM鼠标事件支持 50 altKey, ctrlKey, shiftKey, meatKey是否为 true来判断 是否在键盘上按下了这些键 51 52 IE鼠标事件支持 53 altLeft, ctrlLeft, shiftLeft 是否为 true来判断 是否在键盘上按下了这些键 54 55 当触发 mouseover和mouseout这两个事件时 有可能会关联到别的元素，DOM事件的事件也提供了相关的属性来指向 相关的元素 56 而 IE 也有不同的事件对象的属性来表示相关的元素 57 58 DOM事件对象的属性为： 59 event.relateTarget. 60 61 IE事件对象的属性为： 62 toElement, fromElement 63 64 可以写成一个兼容函数。 65 66 鼠标按钮： 67 一个鼠标上面 有左键（主键），右键，中间的滚轮。 68 我们要判断当属变按下的时候 是按下了三个键中的哪一个？在事件对象里面 也有相应的属性提供 69 70 DOM事件对象中是： 71 event.button 72 73 当值为 0 时 说明按下了 左键 74 当值为 1 时 说明按下了 中间的滚轮键 75 当值为 2 时 说明按下了 右键 76 77 IE事件对象中也是： 78 event.button 79 80 当值为 1 时 说明按下了 左键 81 当值为 4 时 说明按下了 中间的滚轮键 82 当值为 2 时 说明按下了 右键 83 84 可以写成一个兼容函数。 85 86 鼠标滚轮事件： 87 mousewheel事件 除了火狐意外的浏览器都支持 包括ie6,7,8。 88 此事件 可以定义在任何元素上 都会冒泡到document（ie8）上 或者 window对象（ie9）上。 89 90 通过判断 event.wheelDelta 的数值得正负 来判断是向前滚动 还是 向后滚动。 91 正 是代表向前 92 负 是代表向后 93 94 注意 在oprea9.5版本以前 刚好相反 95 正 是代表向后 96 负 是代表向前 97 所以 这里可以通过浏览器判断一下版本号 给结果取反 就OK了 98 99 而火狐了 100 支持鼠标滚轮事件的事件是： 101 DOMMouseScroll 102 103 它通过event.detail 的数值得正负 来判断是向前滚动 还是 向后滚动。 104 正 是代表向后 105 负 是代表向前 106 107 所以这里也可以 集合前面的结果来 写成一个兼容的函数。 108 由于时间太晚了 具体代码就不再这里写了。 109 布丁-阿_____________________ 晚安 !!!