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,78 可以通过下面的计算来 得出相对于页面的(水平,垂直)偏移位置
 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 布丁-阿_____________________ 晚安 !!!

 

posted @ 2017-10-12 00:30  蜀-书心  阅读(128)  评论(0编辑  收藏  举报