【js学习笔记-090】---事件处理_unload事件和load事件相对,当用户离开当前文档-优快云博客

本文深入探讨JavaScript中的事件处理机制，包括事件类型、事件传播、事件捕获等核心概念。介绍了不同事件的应用场景，如鼠标事件、键盘事件以及新兴的触摸事件等。

javascript学习笔记---事件处理

名词说明：

事件类型：是一个用来说明发生什么类型事件的字符串。
事件目标：是发生的事件或与之相关的对象。当讲事件时，我们必须同时指明类型和目标。
事件处理程序：又叫事件监听程序是处理或响应事件的函数。
事件对象：与特定事件相关且包含有关该事件详细信息的对象。事件对象作为参数传递给处理程序函数（不包括IE8及之前版本，在这些浏览器中有时仅能通过全局变量event才能得到），所有事件对象都有用来指定事件类型的type属性和指定事件目标的target属性

l 事件传播：是浏览器决定哪个对象触发其事件处理程序的过程。对于单个对象的特定事件（如window对象的load事件），必须是不能传播的。当文档元素发生某个类型的事件时，然而，它们会在文档树上向上传播或“冒泡”有时，在Document或其他窗口元素上注册单个事件处理程序比在每个独立的目标元素上注册处理程序要方便。事件处理程序能通过调用方法或设置事件对象属性来阻止事件传播，这样它就能停止冒泡且将无法在窗口元素上触发处理程序。事件传播的另外一种形式称为事件捕获，在容器元素上注册的特定处理程序有机会在事件传播到真实目标之前拦截（或“捕获”）它。IE8及之前版本不支持事件捕获，所以不常用它。但是，当处理鼠标播放事件时，捕获或“夺取”鼠标事件的能力是必需的。

一些事件与之相关的默认操作，例如，当超链接上发生click事件时，浏览器默认操作是按照链接加载新页面。事件处理程序可以通过返回一个适当的值，调用事件对象的某个方法或设置事件对象的某个属性来阻止默认操作发生。这有时称为“取消”事件。

我们需要了解的事件类型包括

l 文档加载和准备就绪事件

l 鼠标事件

l 鼠标滚轮事件

l 拖放事件

l 键盘事件

l 文本输入事件

事件类型

客户端程序员只能使用少部分事件，如“load”，“click”和“mouseover”等。这些传统事件类型在所有浏览器中都得到了很好的支持，但随着Web平台发展到包括更强大的API，事件集合随之越来越大，没有单个标准能定义完整的事件集合。这些新事件有3个来源

l 3级DOM规范，经过长期的停滞之后，在W3C的主持下又开始焕发生机

l html5规范及相关衍生规范的大量新API定义了新事件，比如历史管理、拖放、跨文档通信，以及视频和音频的播放

l 基于触摸和支持javascript的移动设备的出现，如果iphone，它们需要定义新的触摸和手势事件类型

依赖于设备的输入事件

有些事件和特定输入设备直接相关，比如鼠标和键盘。包括诸如mousedown,mousemove,mouseup,keydown,keypress,keyup这样的传统事件类型，也包括像touchmove，gesturechange这样新的触摸事件类型

独立于设备的输入事件

有些输入事件没有直接相关的特定输入设备。如click事件表示激活了链接，按钮，或其它文档元素，通常是通过鼠标单击实现，或触摸感知设备上的手势来实现。尚未广泛实现的textinput事件就是一个独立于设备的输入事件，它既能取代按钮事件并支持键盘输入，也可以取代剪切和粘贴与手写识别的事件。

用户界面事件

用户界面事件是较高级的事件，通常出现在定义web应用用户界面的html表单元素，包括文本输入域获取键盘焦点的focus事件、用户改变表单元素显示值的change事件和用户单击表单中“提交”按钮的submit事件。

状态变化

有些事件不由用户活动而由网络或浏览器活动触发，用来表示某种生命周期或相关状态的变化，当文档完全加载时，在window对象上会发生load事件，这可能是这类事件最常用的。DOMContentLoaded事件与此事件类似。html5历史管理机制会触发popstate事件来响应浏览器的后退按钮。html5离线web应用api包括online和offline事件。

特定API事件

html5及相关规范定义的大量web都有自己事件类型。拖放API定义诸如”dragstart”,”dragenter”,”dragover”和”drop”事件，应用程序想自定义播放源或拖放目标就必须处理这些相关事件。html5的<video><audio>元素定义一长串像waiting,playing,seeking和volumechange等相关事件，这些事件通常仅用于web应用，这些web应用希望为视频和音频的播放定义自定义控件。

计时器和错误处理程序

timer 和错误处理程序属于客户端javascript异步编程模型的部分，并有相似的事件。

传统事件类型

表单事件

表单和超链接是网页中最早支持脚本的元素，这意味着表单事件是所有事件类型中最稳定且得到良好支持的那部分。

提交和重置表单会触发 submit和reset事件。当用户和类按钮元素交互时，它们会发生click事件。当用户通过输入文字、选择选项或选择复选框来改变相应表单元素的状态时，这些通常维护某种状态的表单元素会触发change事件，对于文本输入域，只有用户和表单元素完成交互并通过Tab键或单击的方式移动焦点到其他元素上时才会触发change事件。响应通过键盘改变焦点的表单元素在得到和失去焦点时会分别触发focus和 blur事件（这两事件不会冒泡）。IE定义的focusin和focusout事件可能冒泡。

Window事件

load事件，当文档和其它所有外部资源（如图片）完全加载并显示给用户时就会触发它。DOMContentLoaded和readystatechange是load事件的替代方案，当文档和其元素为操作准备就绪，但外部资源完全加载完毕之前，浏览器就会尽早触发它们。

unload事件与load事件相对，当用户离开当前文档转向其它文档时会触发它。unload事件处理程序可能用于保存用户状态。蛤它不能用于取消用户转向其他土方。beforeunload事件和unload类似，但它能提供询问用户是否确定离开当前页面的机会。如果beforeunload的处理程序返回字符串，那么在新页面加载之前，字符串会出现在展示给用户确认的对话框上，这样用户将有机会取消跳转而留在当前页上。

像<img>元素这样的单个文档元素也能为load和error事件注册处理程序。当外部资源完全或发生阻止加载的错误时会触发它们。某些浏览器也支持abort事件（html5）将其标准化，当图片因为用户停止加载进程而导致失败就会触发它。

focus和blur事件也能用做window事件，当浏览器窗口从操作中得到或失去焦点时会触发它们。浏览器窗口大小或滚动它时会触发 resize和scroll事件。scroll事件也能在任何可以滚动的文档元素上触发。

鼠标事件

当用户在文档上移动或单击鼠标时都会产生鼠标事件。这些事件在鼠标指针所对应的最深嵌套元素上触发，但它们会冒泡直到文档最顶层。传递给鼠标事件处理程序的事件对象有属性集，它们描述了当事件发生时鼠标的位置和按钮状态，也指明当时是否有任何辅助键按下。clientX和clientY属性指定了鼠标的位置和按键状态，button和which属性指定按下的鼠标键是哪个。当键盘辅助按下时，对应的属性altKey ctrlKey shiftKey会设置为true。而对于click事件，detail属性指定了其是单击，双击，还是三击。

用户每次移动或拖动鼠标时，会触发mousemove事件。这些事件发生非常频繁，所以mousemove事件处理程序一定不能触发计算密集型任务。当用户按下或释放鼠标按键时，会触发mousedown和mouseup事件。通过注册mousedown和mousemove事件处理程序，可以探测和响应鼠标的拖动。合理地这样做能够捕获鼠标事件，甚至当鼠标从开始元素移出时我们都能持续地接受到mousemove事件。

当它们通常会触发contextmenu事件，而取消这个事件就可以阻止菜单的显示。这个事件也是获得鼠标右击通知的简单方法。

当用户移动鼠标指针从而使它悬停在新元素上时，浏览器就会在该元素上触发mouseover事件。当鼠标移动指针从而它不悬停在某个元素上时，浏览器就会在该元素上触发mouseout事件。对于这些事件，事件对象将有relatedTarget属性指明这个过程涉及的其他元素。mouseover和mouseout会冒泡。这通常不方便，因为当触发mouseout事件处理程序时，你不得不检查鼠标是否直的离开目标元素还是仅仅是从这个元素的一个子元素移动到另一个。所有IE提供了不冒泡的mouseenter和mouseleave。

mousewheel (Firefox中是DOMMouseScroll事件)事件，传递事件对象属性指定滚轮转动的大小和方向。

键盘事件

无论任何文档元素获取键盘焦点都会触发键盘事件，并且它们会冒泡到Document和Window对象。如果没有元素获得焦点，可以直接在文档上触发事件。事件对象有keyCode字段，altKey/ctrlKey/metaKey/shiftKey 描述键盘辅助键的状态

keydown和keyup事件是低级键盘事件，无论何时按下或释放按键都会触发它们。在keydown和keyup之间会触发另一个keypress事件。当按下键重复产生字符时，在keyup事件之前可能产生很多keypress事件。所有浏览器都支持keydown、keyup和keypress事件，但有一些互用性问题，因为事件对象的keyCode属性值从未标准化过。