javascript事件相关2
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 布丁-阿_____________________ 晚安 !!!