IE6 首先实现了 mousewheel 事件。之后,Opera、Chrome 和 Safari 也跟着实现了。mousewheel 事件会在用户使用鼠标滚轮时触发,包括在垂直方向上任意滚动。这个事件会在任何元素上触发,并(在 IE8 中)冒泡到 document 和(在所有现代浏览器中)window。mousewheel 事件的 event 对象包含 鼠标事件的所有标准信息,此外还有一个名为 wheelDelta 的新属性。当鼠标滚轮向前滚动时, wheelDelta 每次都是+120;而当鼠标滚轮向后滚动时,wheelDelta 每次都是–120
可以为页面上的任何元素或文档添加 onmousewheel 事件处理程序,以处理所有鼠标滚轮交互, 比如:
document.addEventListener("mousewheel", (event) => {
console.log(event.wheelDelta);
});
这个例子简单地显示了鼠标滚轮事件触发时 wheelDelta 的值。多数情况下只需知道滚轮滚动的方
向,而这通过 wheelDelta 值的符号就可以知道。
注意 HTML5也增加了mousewheel事件,以反映大多数浏览器对它的支持。
触摸屏设备
iOS 和 Android 等触摸屏设备的实现大相径庭,因为触摸屏通常不支持鼠标操作。在为触摸屏设备 开发时,要记住以下事项。
不支持 dblclick 事件。双击浏览器窗口可以放大,但没有办法覆盖这个行为。
单指点触屏幕上的可点击元素会触发 mousemove 事件。如果操作会导致内容变化,则不会再触 发其他事件。如果屏幕上没有变化,则会相继触发 mousedown、mouseup 和 click 事件。点 触不可点击的元素不会触发事件。可点击元素是指点击时有默认动作的元素(如链接)或指定
了 onclick 事件处理程序的元素。
mousemove 事件也会触发 mouseover 和 mouseout 事件。
双指点触屏幕并滑动导致页面滚动时会触发 mousewheel 和 scroll 事件。
无障碍问题
如果 Web 应用或网站必须考虑残障人士,特别是使用屏幕阅读器的用户,那么必须小心使用鼠标 事件。如前所述,按回车键可以触发 click 事件,但其他鼠标事件不能通过键盘触发。因此,建议不 26 要使用 click 事件之外的其他鼠标事件向用户提示功能或触发代码执行,这是因为其他鼠标事件会严 格妨碍盲人或视障用户使用。以下是几条使用鼠标事件时应该遵循的无障碍建议。
使用 click 事件执行代码。有人认为,当使用 onmousedown 执行代码时,应用程序会运行得 更快。对视力正常用户来说确实如此。但在屏幕阅读器上,这样会导致代码无法执行,这是因 为屏幕阅读器无法触发 mousedown 事件。
不要使用 mouseover 向用户显示新选项。同样,原因是屏幕阅读器无法触发 mousedown 事件。 如果必须要通过这种方式显示新选项,那么可以考虑显示相同信息的键盘快捷键。
不要使用 dblclick 执行重要的操作,这是因为键盘不能触发这个事件。 遵循这些简单的建议可以极大提升 Web 应用或网站对残障人士的无障碍性。
注意 要了解更多关于网站无障碍的信息,可以参考WebAIM网站。 17.4.4 键盘与输入事件
键盘事件是用户操作键盘时触发的。DOM2 Events 最初定义了键盘事件,但该规范在最终发布前删 除了相应内容。因此,键盘事件很大程度上是基于原始的 DOM0 实现的。
DOM3 Events 为键盘事件提供了一个首先在 IE9 中完全实现的规范。其他浏览器也开始实现该规范, 但仍然存在很多遗留的实现。
键盘事件包含 3 个事件:
keydown,用户按下键盘上某个键时触发,而且持续按住会重复触发。 keypress,用户按下键盘上某个键并产生字符时触发,而且持续按住会重复触发。Esc 键也会
触发这个事件。DOM3 Events 废弃了 keypress 事件,而推荐 textInput 事件。
keyup,用户释放键盘上某个键时触发。 虽然所有元素都支持这些事件,但当用户在文本框中输入内容时最容易看到。 输入事件只有一个,即 textInput。这个事件是对 keypress 事件的扩展,用于在文本显示给用
户之前更方便地截获文本输入。textInput 会在文本被插入到文本框之前触发。 当用户按下键盘上的某个字符键时,首先会触发 keydown 事件,然后触发 keypress 事件,最后 触发 keyup 事件。注意,这里 keydown 和 keypress 事件会在文本框出现变化之前触发,而 keyup 事件会在文本框出现变化之后触发。如果一个字符键被按住不放,keydown 和 keypress 就会重复触
发,直到这个键被释放。
对于非字符键,在键盘上按一下这个键,会先触发 keydown 事件,然后触发 keyup 事件。如果按
住某个非字符键不放,则会重复触发 keydown 事件,直到这个键被释放,此时会触发 keyup 事件。