（JS基础）事件

鼠标事件继承自 UI Event 。鼠标事件包括左键、右键、滚轮。单击指代的是左键点击一下，双击则左键连续点击两下。所有元素都支持鼠标事件。

除了mouseenter和mouseleave，所有鼠标事件都冒泡。

只有在同一个元素上相继触发mousedown和mouseup事件，才会触发click事件；类似的，只有触发两次click事件才会触发一次dblclick事件。

事件列表如下：

• click：鼠标单击时触发，最为常用的一个事件。
• dblclick：鼠标双击时触发。移动端不支持，且双击只会放大页面。
• mousedown：按下鼠标任意键时触发。
• mouseup：释放鼠标按键时触发。
• mouseenter：鼠标光标从元素外部移动到元素范围内时触发。
• mouseleave：鼠标光标从元素内部移动到元素范围外时触发。
• mousemove：鼠标光标在元素内部移动时重复触发。
• mouseout：鼠标光标从事件元素移动到另一个元素(包括子元素)时触发。
• mouseover：鼠标光标从事件元素的外部移动到事件元素的内部时触发。
• contextmenu：右击鼠标或移动端长按时触发的事件，默认行为是打开"上下文菜单"，通过e.preventDefault()可以阻止"上下文菜单"的打开，然后通过获取鼠标位置，在指定位置显示自制的"菜单"。也可以用mousedown代替。

鼠标触发的事件，其event对象有几个属性是值得关注的：

触摸事件（TouchEvent）

这几个触摸事件对象除了继承 UI Event 事件的属性外，还包含如下属性，都是 TouchList ，由 Touch 对象组成的类数组。每个 touch 对象表示一个触摸点，touch 对象保存着跟触摸点相关的信息（如，id、位置信息、按压力度等）。

• touches：当前屏幕上所有触摸点的列表，即使某些触摸点不在事件触发对象上。
• targetTouches：当前对象上所有触摸点的列表。
• changeTouches：表示自上次触摸以来发生变化的触摸点列表，简单说就是，当新增的触摸点时，本属性则包含新增的触摸点；当减少触摸点时，本属性则包含减少的触摸点；而前两个属性只获取当前存在的触摸点。

键盘事件（KeyboardEvent）

当用户按下键盘的按键就会触发键盘事件。键盘的事件有 3 个：

• keydown：当用户按下键盘上的任意按键时触发。按住不放会重复触发。
• keypress：当用户按下键盘上的字符（即不包括 F*、功能键等）按键时触发。按住不放会重复触发。
• keyup：当用户释放键盘按键时触发。
• textInput：仅在文本框输入时触发。可以对用户输入的内容获取。
  

keydown、keypress、keyup都是同类型的事件对象。都含有相同的属性，一般获取用户按下的按键再进行处理，详细请查看MDN文档。

还有复合事件（composition Event）是与键盘输入有关的，其实就是我们常说的输入法。有三个复合事件：

• compositionstart：当文本复合系统打开时触发，表示要开始输入。
• compositionupdate：在向输入字段中插入新字符时触发。
• compositionend：在文本复合系统关闭时触发。

拖放事件（DragEvent）

拖放事件是DragEvent类型。用户通过将指针设备（例如鼠标）放置在触摸表面上并且然后将指针拖动到新位置（诸如另一个DOM元素）来发起拖动。"拖放"实际是有两部分：拖（drag）和放（drop）。文本和图片是默认可以拖放的，而其他的 DOM 元素可以通过设置特性draggable="true"达到可以拖放。

有如下拖放事件：

• drag：当拖动元素或选择文本时触发。
• dragstart：当用户开始拖动元素或选择文本时触发。
• dragend：当拖动操作结束时（释放鼠标按钮或按下退出键）触发。
  
• dragenter：当拖动的元素或选择文本进入有效的放置目标时触发。
• dragleave： 当拖动的元素或文本选择离开有效的放置目标时触发。
• dragexit：当元素不再是拖动操作的选择目标时触发。
• dragover：当将元素或文本选择拖动到有效放置目标（每几百毫秒）上时触发。注意，必须先添加此事件的处理函数，drop事件才会触发。
• drop：当在有效放置目标上放置元素或选择文本时触发。

可以参考 MDN 文档的一个拖放例子。简单总结几点：

1. 非文本或图片的元素，必须添加特性draggable="true"才能拖放。
2. 拖放元素的实现依赖于节点的删除和添加方法，如removeChild、appendChild等。
3. 通过event.target的样式设置，可以增强拖放时给用户的感受。
4. dragover事件是drop事件的前提，所以，不添加dragover事件处理函数则无法触发drop事件。
5. drop事件的默认行为是打开链接，通过event.preventDefault()可以禁用其行为。

其他事件

• beforeunload：当页面卸载前弹窗让用户确认关闭。必须添加到window对象上。不冒泡。使用该事件需要两个条件：鼠标焦点必须在该文档上；event.returnValue必须赋值。

• window.addEventListener('beforeunload', (e) => {
    // 原意是显示 returnValue 作为提示内容，但实际并没显示
    // 但赋值是必须的，可以是任何值，否则不会触发事件
    e.returnValue = ''
  })

• readystatechange：当document.readyState属性发生改变，readystatechange事件会被触发。只能用在document对象上。用途不大，一般我们只关心加载完成的状态，使用DOMContentLoaded事件即可。
• hashchange：当 URL 的参数列表（及 URL 中 "#" 号后面的所有字符串）发生变化时触发。有两个属性：oldURL和newURL。但还是建议使用location对象确定当前地址的参数列表。是HashChangeEvent类型的事件。
• pageshow 和 pagehide：当网页在加载完成或卸载后会触发页面传输事件。并不常用，事件对象必须是window。事件对象中的persisted属性值得关注，表示页面是否保存在内存中或是否从内存中加载（要注意两点：当页面从内存中加载，load事件不会触发；当设置了unload事件，页面不会保存在内存中）。是PageTransitionEvent类型的事件。
• submit：当表单提交时触发。但form.submit()例外，不会触发该事件。
• reset：当表单重置时触发。
• focus：当元素获得焦点时触发。是FocusEvent类型的对象。
• blur：当元素失去焦点时触发。是FocusEvent类型的对象。
• change：当表单控件元素的值发生变化时触发。（更多关于表单介绍）
• select：在文本框中选择了文本时（鼠标释放时）触发。但方法内不包含已选择文本的信息，需要通过target对象上的两个属性间接获取：selectionStart、selectionEnd。例子：e.target.value.substring(e.target.selectionStart,e.target.selectionEnd)。

模拟事件

开发者可以创建自定义事件，刻意触发特定事件，在测试 Web 应用时极其有用。

创建

// 创建一个 名为look，支持冒泡，不能被取消的 事件
let ev = new Event("look", {"bubbles":true, "cancelable":false});

每个Element对象都有一个dispatch(event)方法，用于触发开发者创建的模拟事件，前提是已经给该元素添加事件监听函数，event表示模拟事件对象。下面给出一个完成的例子：

<button id="btn1">按钮1</button>

// 创建模拟事件对象
let myEvent = new Event("eventName", {"bubbles":true, "cancelable":false});
// 获取元素对象，并添加事件监听
let btn =  document.getElementById('btn1');
btn.addEventListener('eventName', e => console.log(e));
// 触发"eventName"事件
btn.dispatchEvent(myEvent);

by the way

上面提及到的事件类型均可以作为构造函数。如，要创建DeviceMotionEvent类型的事件对象，则let ev = new DeviceMotionEvent('evnetName', {});即可，其他类型同理。

内存和性能

关于这部分，要说的只有两点：列表中使用的事件绑定，建议使用事件委托，如<li>均不添加事件处理函数，只在外层的<ul>添加，通过target判断是哪个<li>再处理；删除元素前，先把绑定的事件函数移除。

过多事件导致性能下降的原因：每个函数都是对象，都会占用内存，对象越多性能越差；必须事先指定所有的事件处理函数而导致DOM访问次数过多，会延迟整个页面的交互就绪事件。