事件类型


JavaScript 事件类型

传统事件类型

表单事件

表单相关:submitreset 按钮、点击相关:click 输入、选择相关:change 焦点相关:focusblur(不会冒泡) 输入相关:input(IE除外,和 change 不同,每次输入都会触发,可通过 textinput 替代)

Window 事件

load:当文档和所有外部资源完全加载并显示给用户时触发 unload:当用户离开当前文档转向其他文档时触发,可用于保存用户状态,与此类似还有 beforeunload 事件用于询问用户是否确认离开当前页面。 resize:浏览器窗口大小调整时触发 scroll:浏览器窗口页面滚动时触发

鼠标事件

用户在浏览器移动或点击鼠标时会触发鼠标事件,这些事件在鼠标指针所对应的最深层嵌套元素上触发,但它们会冒泡到文档最顶层。传递给事件处理程序的事件对象有属性集,描述了事件发生时鼠标的位置和坐标位置,以及是否有键盘辅助键按下:clientXclientY 指定了鼠标在窗口坐标中的位置,buttonwhich 指定了按下的鼠标键是哪个,如果有辅助键按下,对应的属性 altKeyctrlKeymetaKeyshiftKey 会设置为 true,如果是 click 事件,detail 属性指定了是单击、双击还是三击。

mousemove:鼠标移动时触发 mouseover: 鼠标指针悬停在某个元素时触发 mouseout:鼠标指针从悬停元素上离开时触发 mousedownmouseup:鼠标按下/释放时触发 clickmousedownmouseup 事件队列之后,click 事件会被触发 dblclick:连续两次点击鼠标时触发 contextmenu:单击鼠标右键会弹出快捷菜单,在显示菜单前,会触发 contextmenu 事件 mousewheel:滚动鼠标滚轮时触发

键盘事件

当键盘聚焦到浏览器上时,用户每次按下或释放键盘上的按键时都会产生键盘事件。无论任何文档元素获取键盘焦点后都会触发键盘事件,并且会冒泡到 Document 和 Window 对象。传递给键盘事件处理程序的事件对象有 keyCode 属性,用于指定按下或释放的键是哪个,此外,键盘事件对象也有 altKeymetaKeyctrlKeyshiftKey 描述键盘辅助键的状态。

keydownkeyup:键盘按下/释放时触发 keypress:如果 keydown 事件产生可打印字符,在 keydownkeyup 之间会触发 keypress 事件

DOM 事件

W3C 开发的 3 级 DOM 事件规范标准化了前面介绍的很多传统事件,同时增加了一些新事件:

  • 标准化了不冒泡的 focusinfocusout 事件取代冒泡到 focusblur 事件
  • 标准化了不冒泡的 mouseentermouseleave 事件取代冒泡到 mouseovermouseout 事件
  • 通过 wheel 事件对二维鼠标滚轮提供标准支持
  • 通过 textinput 事件和传递新的 KeyboardEvent 对象作为参数给 keydownkeyupkeypress 事件处理程序来给文本输入事件提供更好的支持

textinput 事件不是键盘特定事件,无论通过键盘、拖放、剪切和粘贴,每当发生文本输入时都会触发。

HTML5 事件

HTML5 及相关标准定义了大量新的 Web 应用 API,其中许多 API 都定义了事件:

  • HTML5 新增了 <audio><video> 元素,这些元素都有长长的事件列表
  • HTML5 的拖放 API 允许 JavaScript 应用参与基于操作系统的拖放操作,实现 Web 和原生应用之间的数据传输,该 API 也有相关的事件
  • HTML5 定义了历史管理机制,它允许 Web 应用同浏览器的返回和前进按钮进行交互,这个机制涉及的事件是 hashchangepopstate
  • HTML5 为 HTML 表单定义了大量的新特性,除了前面介绍的表单输入事件外,还定义了表单验证机制,包括验证失败时在表单元素上触发 invalid 事件
  • HMTL5 包含了对离线 Web 应用的支持,它们可以安装到本地应用缓存中,相关的两个重要事件是 onlineoffline,以及大量其他通知应用下载速度和应用缓存更新到事件
  • 很多新 Web 应用 API 都使用 message 事件进行异步通信
  • HTML5 还定义了一些不在窗口、文档和文档元素对象上触发的事件,比如 XMLHttpRequest 和 File API 规范都定义了一系列事件来跟踪异步 I/O 的进度,它们在 XMLHttpRequest 和 FileReader 对象上触发事件
  • HTML5 定义了少量庞杂的事件类型,比如用于通知存储数据改变的 storage 事件、printstartprintend 事件。

触摸屏和移动设备事件

移动设备的广泛采用需要建立新的事件类型,尤其是触摸屏设备。本教程以 iPhone 和 iPad 上的 Safari 为例介绍手势、旋转和触摸事件。

Safari 产生的手势事件用于两个手指的缩放和旋转手势,当手势开始时触发 gesturestrat 事件,而手势结束时触发 gestureend 事件,在这两个事件之间是跟踪手势过程的 gesturechange 事件队列。这些事件传递的事件对象有数字属性 scaleratotionscale 属性是两个手指之间的间距和初始间距的比值,「捏紧」手势的 scale 值小于 1,「撑开」手势的 scale 值大于 1,rotation 属性是指从事件开始手指旋转的角度,以度为单位,正值表示按照顺时针方向旋转。

手势事件是高级事件,用于通知已翻译的手势,如果想翻译自定义手势,需要监听低级触摸事件,当手指触摸屏幕时触发 touchstart 事件,当手指移动时触发 touchmove 事件,当手指离开屏幕时触发 touchend 事件。

当设备允许用户从竖屏旋转到横屏时会在 Window 对象上触发 orienttationchanged 事件。


点赞 取消点赞 收藏 取消收藏

<< 上一篇: 事件概览

>> 下一篇: 注册事件处理程序