JavaScript Web端视觉

JavaScript事件类型

2020-10-21 11:24发布

站内文章 / JavaScript
686 0 0

1 UI事件

UI事件指的是那些不一定与用户操作有关的事件。
（1）load事件：
当页面完全加载后（包括所有图像、JavaScript 文件、 CSS文件等外部资源），就会触发 window 上面的 load 事件。
有两种定义 onload 事件处理程序的方式。

第一种方式是使用如下所示的 JavaScript代码：
EventUtil.addHandler(window, “load”, function(event){ alert(“Loaded!”); });

第二种指定 onload 事件处理程序的方式是为元素添加一个 onload 特性，如下面的例子所示：

 <!DOCTYPE html> 
 <html> 
 <head> 
 <title>Load Event Example</title>
 </head> 
 <body onload="alert('Loaded!')"> </body> </html> 12345678

（2）onload事件：
与 load 事件对应的是 unload 事件，这个事件在文档被完全卸载后触发。只要用户从一个页面切 换到另一个页面，就会发生 unload 事件。而利用这个事件多的情况是清除引用，以避免内存泄漏。

（3）resize 事件
当浏览器窗口被调整到一个新的高度或宽度时，就会触发 resize 事件。这个事件在 window（窗 口）上面触发。

（4）scroll 事件：
虽然 scroll 事件是在 window 对象上发生的，但它实际表示的则是页面中相应元素的变化。在混杂模式下，可以通过元素的 scrollLeft 和 scrollTop 来监控到这一变化；而在标准模式下， 除 Safari 之外的所有浏览器都会通过元素来反映这一变化（Safari 仍然基于跟踪滚动位置）。

2 焦点事件

焦点事件会在页面元素获得或失去焦点时触发。常见的两个焦点事件：

  • blur：在元素失去焦点时触发。这个事件不会冒泡；所有浏览器都支持它。

  • focus：在元素获得焦点时触发。这个事件不会冒泡；所有浏览器都支持它。

3 鼠标和滚动事件

常见的鼠标事件：

  • click：在用户单击主鼠标按钮（一般是左边的按钮）或者按下回车键时触发。这一点对确保 易访问性很重要，意味着 onclick 事件处理程序既可以通过键盘也可以通过鼠标执行。

  • dblclick：在用户双击主鼠标按钮（一般是左边的按钮）时触发。从技术上说，这个事件并不是 DOM2级事件规范中规定的，但鉴于它得到了广泛支持，所以 DOM3级事件将其纳入了标准。

  • mousedown：在用户按下了任意鼠标按钮时触发。不能通过键盘触发这个事件。

  • mouseenter：在鼠标光标从元素外部首次移动到元素范围之内时触发。这个事件不冒泡，而且 在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但 DOM3级事件将它 纳入了规范。IE、Firefox 9+和 Opera支持这个事件。

  • mouseleave：在位于元素上方的鼠标光标移动到元素范围之外时触发。这个事件不冒泡，而且 在光标移动到后代元素上不会触发。DOM2级事件并没有定义这个事件，但 DOM3级事件将它 纳入了规范。IE、Firefox 9+和 Opera支持这个事件。

  • mouseout：在鼠标指针位于一个元素上方，然后用户将其移入另一个元素时触发。又移入的另 一个元素可能位于前一个元素的外部，也可能是这个元素的子元素。不能通过键盘触发这个事件

  • mouseover：在鼠标指针位于一个元素外部，然后用户将其首次移入另一个元素边界之内时触 发。不能通过键盘触发这个事件。

  • mouseup：在用户释放鼠标按钮时触发。不能通过键盘触发这个事件。


客户区坐标位置
这个位置信息保存在事件对象的 clientX 和 clientY 属性中。
所有浏览器都支持这两个属性，它们的值表示事件发生时鼠标指针在视口中的水平 和垂直坐标。

页面坐标位置
通过客户区坐标能够知道鼠标是在视口中什么位置发生的，而页面坐标通过事件对象的 pageX 和 pageY 属性，能告诉你事件是在页面中的什么位置发生的。换句话说，这两个属性表示鼠标光标在页面中的位置，因此坐标是从页面本身而非视口的左边和顶边计算的。

屏幕坐标位置
鼠标事件发生时，不仅会有相对于浏览器窗口的位置，还有一个相对于整个电脑屏幕的位置。而通 过 screenX 和 screenY 属性就可以确定鼠标事件发生时鼠标指针相对于整个屏幕的坐标信息。

修改键
这些修改键就是 Shift、Ctrl、Alt和 Meta（在 Windows键盘中是 Windows键，在苹果机中 是 Cmd 键），它们经常被用来修改鼠标事件的行为。DOM 为此规定了 4 个属性，表示这些修改键的状 态：shiftKey、ctrlKey、altKey 和 metaKey。这些属性中包含的都是布尔值，如果相应的键被按 下了，则值为 true，否则值为 false。

相关元素
对 mouseover 事件而言，事件的主目标是获 得光标的元素，而相关元素就是那个失去光标的元素。类似地，对 mouseout 事件而言，事件的主目标是失去光标的元素，而相关元素则是获得光标的元素。

鼠标按钮
只有在主鼠标按钮被单击（或键盘回车键被按下）时才会触发 click 事件，因此检测按钮的信息并不是必要的。但对于 mousedown 和 mouseup 事件来说，则在其 event 对象存在一个 button 属性， 表示按下或释放的按钮。

DOM的 button 属性可能有如下 3个值：0 表示主鼠标按钮，1 表示中间的鼠标按钮（鼠标滚轮按钮） ，2 表示次鼠标按钮。在常规的设置中，主鼠标按钮就是鼠标左键，而次鼠标按钮就是鼠标右键。
更多的事件信息
“DOM2级事件”规范在 event 对象中还提供了 detail 属性，用于给出有关事件的更多信息。对于鼠标事件来说，detail 中包含了一个数值，表示在给定位置上发生了多少次单击。

鼠标滚轮事件
当用 户通过鼠标滚轮与页面交互、在垂直方向上滚动页面时（无论向上还是向下），就会触发 mousewheel 事件。这个事件可以在任何元素上面触发，终会冒泡到 document（IE8）或 window（IE9、Opera、 Chrome及 Safari）对象。与 mousewheel 事件对应的 event 对象除包含鼠标事件的所有标准信息外， 还包含一个特殊的 wheelDelta 属性。当用户向前滚动鼠标滚轮时，wheelDelta 是 120的倍数；当用 户向后滚动鼠标滚轮时，wheelDelta 是120的倍数。
触摸设备
不支持 dblclick 事件。双击浏览器窗口会放大画面，而且没有办法改变该行为。

轻击可单击元素会触发 mousemove 事件。如果此操作会导致内容变化，将不再有其他事件发生； 如果屏幕没有因此变化，那么会依次发生 mousedown、mouseup 和 click 事件。
轻击不可单击的元素不会触发任何事件。可单击的元素是指那些单击可产生默认操作的元素（如链接），或 者那些已经被指定了 onclick 事件处理程序的元素。 

mousemove 事件也会触发 mouseover 和 mouseout 事件。

两个手指放在屏幕上且页面随手指移动而滚动时会触发 mousewheel 和 scroll 事件。

4 键盘和文本事件

keydown：当用户按下键盘上的任意键时触发，而且如果按住不放的话，会重复触发此事件。 
keypress：当用户按下键盘上的字符键时触发，而且如果按住不放的话，会重复触发此事件。 按下 Esc键也会触发这个事件。Safari 3.1之前的版本也会在用户按下非字符键时触发 keypress 事件。 
keyup：当用户释放键盘上的键时触发。

键码
在发生 keydown 和 keyup 事件时，event 对象的 keyCode 属性中会包含一个代码，与键盘上一 个特定的键对应。对数字字母字符键，keyCode 属性的值与 ASCII 码中对应小写字母或数字的编码相同。

字符编码
IE9、Firefox、Chrome 和 Safari的 event 对象都支持一个 charCode 属性，这个属性只有在发生 keypress 事件时才包含值，而且这个值是按下的那个键所代表字符的 ASCII 编码。

textInput事件
“DOM3级事件”规范中引入了一个新事件，名叫 textInput。根据规范，当用户在可编辑区域中输入字符时，就会触发这个事件。这个用于替代 keypress 的 textInput 事件的行为稍有不同。区别之一就是任何可以获得焦点的元素都可以触发keypress事件，但只有可编辑区域才能触发textInput 事件。区别之二是 textInput 事件只会在用户按下能够输入实际字符的键时才会被触发，而 keypress 事件则在按下那些能够影响文本显示的键时也会触发（例如退格键）。

由于 textInput 事件主要考虑的是字符，因此它的 event 对象中还包含一个 data 属性，这个属 性的值就是用户输入的字符（而非字符编码）。

复合事件
用于处理 IME 的输入序列。 IME（Input Method Editor，输入法编辑器）可以让用户输入在物理键盘上找不到的字符。

变动事件
DOM2级的变动（mutation）事件能在 DOM中的某一部分发生变化时给出提示。变动事件是为 XML 或 HTML DOM设计的，并不特定于某种语言。

5 HTM5事件

contextmenu 事件
以及如何屏蔽与该操作关联的 默认上下文菜单。为解决这个问题，就出现了 contextmenu 这个事件，用以表示何时应该显示上下文菜单，以便开发人员取消默认的上下文菜单而提供自定义的菜单。 由于 contextmenu 事件是冒泡的，因此可以为 document 指定一个事件处理程序，用以处理页面 中发生的所有此类事件。

beforeunload 事件
这个事件会在浏览器卸载页面之前触发，可以通过它来取消卸载并继续使用原有页面。 但是，不能彻底取消这个事件，因为那就相当于让用户无法离开当前页面了。为此，这个事件的意图是 将控制权交给用户。显示的消息会告知用户页面行将被卸载（正因为如此才会显示这个消息），询问用 户是否真的要关闭页面，还是希望继续留下来。

DOMContentLoaded 事件
DOMContentLoaded 事件则在形成完整的 DOM树之后就会触发， 不理会图像、JavaScript 文件、CSS 文件或其他资源是否已经下载完毕。
DOMContentLoaded 支持在页面下载的早期添加事件处理程序，这也就意味着用户能够尽早地与页面 进行交互。

readystatechange 事件
这个事件的目的是提供与文档或元素的加载状态有关的信息，但这个事件的行为有时候也很难预料。

pageshow 和 pagehide 事件
第一个事件就是 pageshow，这个事件在页面显示时触发，无论该页面是否来自 bfcache。在重新加载的页面中，pageshow 会在 load 事件触发后触发；而对于 bfcache中的页面，pageshow 会在页面状 态完全恢复的那一刻触发。

与 pageshow 事件对应的是 pagehide 事件，该事件会在浏览器卸载页面的时候触发，而且是在 unload 事件之前触发。与 pageshow 事件一样，pagehide 在 document 上面触发，但其事件处理程序必须要添加到 window 对象。

hashchange 事件
HTML5新增了 hashchange 事件，以便在 URL的参数列表（及 URL中“#”号后面的所有字符串） 发生变化时通知开发人员。之所以新增这个事件，是因为在 Ajax应用中，开发人员经常要利用 URL参 数列表来保存状态或导航信息。

6 设备事件

orientationchange 事件
苹果公司为移动 Safari中添加了 orientationchange 事件，以便开发人员能够确定用户何时将设 备由横向查看模式切换为纵向查看模式。

MozOrientation 事件
Firefox 3.6为检测设备的方向引入了一个名为 MozOrientation 的新事件。（前缀 Moz 表示这是特 定于浏览器开发商的事件，不是标准事件。）当设备的加速计检测到设备方向改变时，就会触发这个事件。但这个事件与 iOS中的 orientationchange 事件不同，该事件只能提供一个平面的方向变化。

deviceorientation 事件
deviceorientation 事件与 MozOrientation 事件类 似。它也是在加速计检测到设备方向变化时在 window 对象上触发，而且具有与 MozOrientation 事件 相同的支持限制。不过，deviceorientation 事件的意图是告诉开发人员设备在空间中朝向哪儿，而不是如何移动。

devicemotion 事件
DeviceOrientation Event 规范还定义了一个 devicemotion 事件。这个事件是要告诉开发人员设备 什么时候移动，而不仅仅是设备方向如何改变。

7 触摸和手势事件

触摸事件
触摸事件会在用户手指放在屏幕上面时、在屏幕上滑动时或从屏幕上移开时触发。

手势事件
iOS 2.0中的 Safari还引入了一组手势事件。当两个手指触摸屏幕时就会产生手势，手势通常会改变 显示项的大小，或者旋转显示项。



作者：cake_eat

链接：https://blog.csdn.net/cake_eat/article/details/108755793

来源：CSDN
著作权归作者所有，转载请联系作者获得授权，切勿私自转载。