事件类型

1、用户界面事件

1）load事件

  • 在window对象上，load事件会在整个页面（包括所有外部资源如图片、JavaScript文件和CSS文件)加载完成后触发。
  • 可以通过两种方式指定load事件处理程序：
    • JavaScript方式；
    • 向<body>元素添加onload属性。
1
2
3
window.addEventListener("load", (event) => { 
    console.log("Loaded!"); 
});
1
2
3
4
5
6
7
8
<!DOCTYPE html> 
<html> 
<head> 
    <title>Load Event Example</title> 
</head>
<body onload="console.log('Loaded!')"> 
</body> 
</html>

2）unload事件

  • 与load事件相对。
  • unload事件一般是在从一个页面导航到另一个页面时触发，最常用于清理引用，以避免内存泄漏。
  • 使用方法与load完全一样。

3）resize事件

  • 当浏览器窗口被缩放到新高度或宽度是，会触发resize事件。
  • 事件在window上触发。
1
2
3
window.addEventListener("resize", (event) => { 
    console.log("Resized"); 
});

4）scroll事件

  • scroll事件发生在window上，但实际上反映的是页面中相应元素的变化。

2、焦点事件

  • 焦点事件在页面元素获得或失去焦点时触发。
  • 焦点事件有以下6种：
  • 当焦点从页面中的一个元素移到另一个元素上时，会依次发生如下事件：
    • focuscout在失去焦点的元素上触发。
    • focusin在获得焦点的元素上触发。
    • blur在失去焦点的元素上触发。
    • DOMFocusOut在失去焦点的元素上触发。
    • focus在获得焦点的元素上触发。
    • DOMFocusIn在获得焦点的元素上触发。
  • blur、DOMF ocusOut和focusout的事件目标是失去焦点的元素；
  • focus、DOMFocusIn和focusin的事件目标是获得焦点的元素。

3、鼠标和滚轮事件

  • DOM3 Events定义了9种鼠标事件：
  • 页面中的所有元素都支持鼠标事件。
  • 除了mouseenter和mouseleave，所有鼠标事件都会冒泡，都可以被取消，而这会影响浏览器的默认行为。

1）客户端坐标

  • 客户端坐标使用：event.clientX和event.clientY。

2）页面坐标

  • 页面坐标使用：event.pageX和event.pageY。
  • 页面没有滚动时客户端与页面坐标对应相等。

3）屏幕坐标

  • 客户端坐标使用：event.screenX和event.screenY。

4）修饰键

  • 键盘上的修饰键：Shift、Ctrl、Alt、Meta。
  • DOM规定4个属性表示修饰键状态：
    • shiftKey、ctrlKey、altKey 和 metaKey。
    • 修饰键被按下时包含布尔值true，没有被按下时包含false。

5）相关元素

  • 简单解释就是：事件发生存在与事件相关的其他元素。
  • 涉及到mouseover和mouseout两个事件。
    • 对mouseover事件来说，事件的主要目标是获得光标的元素，相关元素是失去光标的元素。
    • 对mouseout事件来说，事件的主要目标是失去光标的元素，而相关元素是获得光标的元素。
  • DOM通过event对象的relatedTarget属性提供了相关元素的信息。
    • 这个属性只有在mouseover和mouseout事件发生时才包含值，其他所有事件的这个属性的值都是 null。

6）鼠标按键

  • 只有在元素上单击鼠标主键（或按下键盘上的回车键)时click 事件才会触发，因此按键信息并不是必需的。
  • 对mousedown 和 mouseup事件来说，event对象上会有一个button属性，表示按下或释放的是哪个按键。
  • DOM为这个button 属性定义了3个值:0表示鼠标主键、1表示鼠标中键（通常也是滚轮键)、2表示鼠标副键。

7）额外事件信息

  • DOM2 Events规范在event对象上提供了detail 属性，以给出关于事件的更多信息。
    • 对鼠标事件来说，detail包含一个数值，表示在给定位置上发生了多少次单击。
    • 单击相当于在同一个像素上发生一次mousedown 紧跟一次mouseup。detail的值从1开始，每次单击会加1。
    • 如果鼠标在mousedown和mouseup之间移动了，则detail会重置为0。

8）mousewheel事件

  • 事件会在用户使用鼠标滚轮时触发，包括在垂直方向上任意滚动。
  • 这个事件会在任何元素上触发,并(在IE8中）冒泡到document和(在所有现代浏览器中) window。
  • mousewheel事件的event对象包含鼠标事件的所有标准信息，此外还有一个名为 wheelDelta的新属性。
    • 当鼠标滚轮向前滚动时，wheelDelta每次都是+120；
    • 当鼠标滚轮向后滚动时，wheelDelta每次都是-120。
  • 可以为页面上的任何元素或文档添加onmousewheel 事件处理程序，以处理所有鼠标滚轮交互。
    1
    2
    3
    document.addEventListener("mousewheel", (event) => { 
        console.log(event.wheelDelta); 
    });

4、键盘与输入事件

  • 键盘事件包含 3 个事件：
    • keydown，用户按下键盘上某个键时触发，而且持续按住会重复触发。
    • keypress，用户按下键盘上某个键并产生字符时触发，而且持续按住会重复触发。Esc键也会触发这个事件。DOM3 Events废弃了keypress事件，而推荐text Input事件。
    • keyup，用户释放键盘上某个键时触发。
  • 输入事件只有一个：textInput

1）键码

  • 对于keydown和 keyup事件,event对象的keycode属性中会保存一个键码，对应键盘上特定的一个键。
  • 对于字母和数字键，keyCode的值与小写字母和数字的ASCII编码一致。

2）字符编码

  • 浏览器在 event 对象上支持 charCode 属性，只有发生 keypress 事件时这个属性才会被设置值，包含的是按键字符对应的 ASCII 编码。
  • 通常，charCode 属性的值是 0，在 keypress 事件发生时则是对应按键的键码。

5、合成事件

  • 合成事件是DOM3 Events中新增的，用于处理通常使用IME输人时的复杂输入序列。
    • IME可以让用户输入物理键盘上没有的字符。
  • 合成事件有以下3种：
    • compositionstart，在 IME的文本合成系统打开时触发，表示输入即将开始；
    • compositionupdate，在新字符插入输入字段时触发；
    • compositionend，在 IME的文本合成系统关闭时触发，表示恢复正常键盘输人。
  • 合成事件在很多方面与输入事件很类似。在合成事件触发时，事件目标是接收文本的输入字段。唯一增加的事件属性是data，其中包含的值视情况而异：
    • 在compositionstart事件中，包含正在编辑的文本（例如，已经选择了文本但还没替换)；
    • 在compositionupdate事件中,包含要插人的新字符；
    • 在compositionend事件中，包含本次合成过程中输入的全部内容。

6、变化事件

  • 已废弃

7、HTML5事件

1）contextmenu事件

  • 专门用于表示何时该显示上下文菜单。
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
<!DOCTYPE html> 
<html> 
<head> 
    <title>ContextMenu Event Example</title> 
</head> 
<body>
    <div id="myDiv">Right click or Ctrl+click me to get a custom context menu. Click anywhere else to get the default context menu.</div> 
    <ul id="myMenu" style="position:absolute;visibility:hidden;background-color: 
    silver"> 
    <li><a href="http://www.somewhere.com"> somewhere</a></li> 
    <li><a href="http://www.wrox.com">Wrox site</a></li> 
    <li><a href="http://www.somewhere-else.com">somewhere-else</a></li> 
    </ul> 
</body> 
</html>
1
2
3
4
5
6
7
8
9
10
11
12
13
window.addEventListener("load", (event) => { 
    let div = document.getElementById("myDiv"); 
    div.addEventListener("contextmenu", (event) => { 
        event.preventDefault(); 
        let menu = document.getElementById("myMenu"); 
        menu.style.left = event.clientX + "px"; 
        menu.style.top = event.clientY + "px"; 
        menu.style.visibility = "visible"; 
    }); 
    document.addEventListener("click", (event) => { 
        document.getElementById("myMenu").style.visibility = "hidden"; 
    }); 
});
  • 以上代码实现效果如下：这里在<div>元素上指定了一个oncontextmenu事件处理程序。这个事件处理程序首先取消默认行，确保不会显示浏览器默认的上下文菜单。接着基于event对象的clientx和clientY属性把<ul>元素放到适当位置。最后一步通过将visibility属性设置为”visible”让自定义上下文菜单显示出来。另外，又给document添加了一个onclick事件处理程序，以便在单击事件发生时隐藏上下文菜单（系统上下文菜单就是这样隐藏的)。
  • 当鼠标右键点击/ctrl+点击文字会发生以下变化：

2）beforeunload事件

  • beforeunload 事件会在 window 上触发，用意是给开发者提供阻止页面被卸载的机会。
  • 这个事件会在页面即将从浏览器中卸载时触发，如果页面需要继续使用，则可以不被卸载。
  • 这个事件不能取消，否则就意味着可以把用户永久阻拦在一个页面上。

3）DOMContentLoaded事件

  • DOMContentLoaded事件会在DOM树构建完成后立即触发，而不用等待图片、JavaScript文件、CSS文件或其他资源加载完成。
  • 相对于load事件，DOMContentLoaded可以让开发者在外部资源下载的同时就能指定事件处理程序，从而让用户能够更快地与页面交互。
  • 要处理 DOMContentLoaded 事件，需要给 document 或 window 添加事件处理程序：
1
2
3
document.addEventListener("DOMContentLoaded", (event) => { 
    console.log("Content loaded"); 
});

4）readystatechange事件

  • readystatechange 事件旨在提供文档或元素加载状态的信息，但行为有时候并不稳定。
  • 支持readystatechange 事件的每个对象都有一个readyState属性，该属性具有一个以下列出的可能的字符串值。

5）pageshow与pagehide事件

  • 往返缓存（bfcache，back-forward cache）的功能，此功能旨在使用浏览器“前进”和“后退”按钮时加快页面之间的切换。
  • 这个缓存不仅存储页面数据，也存储 DOM 和JavaScript 状态，实际上是把整个页面都保存在内存里。如果页面在缓存中，那么导航到这个页面时就不会触发 load 事件。
  • pageshow，其会在页面显示时触发，无论是否来自往返缓存。
    • 在新加载的页面上，pageshow会在 load事件之后触发；
    • 在来自往返缓存的页面上，pageshow 会在页面状态完全恢复后触发。
    • 虽然这个事件的目标是document，但事件处理程序必须添加到window上。
    • pageshow 的 event 对象中还包含一个名为 persisted 的属性，这个属性是一个布尔值，如果页面存储在了往返缓存中就是 true，否则就是 false。
  • pagehide与pageshow相对，这个事件会在页面从浏览器中卸载后，在 unload 事件之前触发。

6）hashchange事件

  • HTML5增加了hashchange事件，用于在URL散列值(URL最后#后面的部分)发生变化时通知开发者。这是因为开发者经常在Ajax应用程序中使用URL 散列值存储状态信息或路由导航信息。
  • onhashchange事件处理程序必须添加给window，每次URL散列值发生变化时会调用它。
  • event对象有两个新属性: oldURL 和newURL。这两个属性分别保存变化前后的URL，而且是包含散列值的完整URL。

8、设备事件

  • 设备事件可以用于确定用户使用设备的方式。

1）orientationchange事件

  • 用于确定用户的设备是处于垂直模式还是水平模式。
  • 每当用户旋转设备改变了模式，就会触发orientationchange事件。
  • 可以从window.orientation 属性中获取有用的信息。

2）deviceorientation

  • deviceorientation 事件只反映设备在空间中的朝向，而不涉及移动相关的信息。
  • 设备本身处于3D空间即拥有x轴、y轴和z轴的坐标系中。如果把设备静止放在水平的表面上,那么三轴的值均为0，其中，x轴方向为从设备左侧到右侧,y轴方向为从设备底部到上部、z轴方向为从设备背面到正面。
  • 当deviceorientation触发时，event对象中会包含各个轴相对于设备静置时坐标值的变化,主要是以下5个属性。
    • alpha：0~360范围内的浮点值，表示围绕z轴旋转时y轴的度数(左右转)。
    • beta：-180~180范围内的浮点值，表示围绕x轴旋转时z轴的度数（前后转)。
    • gamma：-90~90范围内的浮点值，表示围绕y轴旋转时z轴的度数（扭转)。
    • absolute：布尔值，表示设备是否返回绝对值。
    • compassCalibrated：布尔值，表示设备的指南针是否正确校准。

3）devicemotion事件

  • DeviceOrientationEvent规范也定义了devicemotion事件。这个事件用于提示设备实际上在移动，而不仅仅是改变了朝向。
  • 当devicemotion事件触发时，event对象中包含如下额外的属性。
    • acceleration：对象，包含x、y和z属性，反映不考虑重力情况下各个维度的加速信息。
    • accelerationIncludingGravity：对象，包含x、y和z属性，反映各个维度的加速信息,包含z轴自然重力加速度。
    • interval：毫秒,距离下次触发devicemotion事件的时间。此值在事件之间应为常量。
    • rotationRate：对象，包含alpha、beta和l gamma属性，表示设备朝向。