从零开始学前端 - 34. JS事件对象Event详解

我们在前两篇文章中对 JS 中的事件做了一个整体的介绍，其中有一个 Event 属性对事件的作用十分重要，本篇文章我们就对它做一个详细的解读。

一、什么是事件对象 Event

  每一个事件触发时，都会产生一个与之对应的事件对象 event ，其中包含了触发事件的元素、键盘鼠标的状态、位置等等内容。

  每当用户触发一个事件后，JS 就会自动生成一个 event 对象，根据触发事件的不同，这个对象包含的内容也不同，比如通过鼠标触发点击事件，会产生一个 MouseEvent 对象，其中包含了鼠标的位置等内容；通过键盘触发事件，会产生一个 KeyboardEvent 对象其中包含按键相关的信息。

• event 对象代表事件的状态，比如触发事件的元素、键盘按键的状态、鼠标的位置、鼠标按键的状态等等；
• event 对象是一个隐式参数，并且只在事件发生的过程中才有效；
• event 对象根据触发方式的不同会具有不同的属性，也就是说某些属性只对特定事件有效，但所有内容都是继承自 Event 对象；
• event 对象在 IE 与 Chrome 等浏览器表现不尽相同，例如说 event.target 表示触发事件的元素，在 IE 中需要使用 event.srcElement 获取；

二、Event 属性

  我们在前面提到，根据触发方式的不同 event 对象会具有不同的属性，我们可以将其大体分为三部分：

通用属性 (无论是通过键盘还是鼠标触发都拥有的属性)

• bubbles 事件是否会冒泡，布尔值；

• cancelable 事件是否具有默认行为，布尔值；
    默认行为指的是浏览器中规定的一些行为，比如 <a> 标签点击后会跳转链接，<form> 标签内按回车会自动提交等等。

• currentTarget 事件处理程序当前正在处理事件的那个元素，返回一个 Element 对象；

• defaultPrevented 事件是否取消了默认行为，布尔值；

• detail 返回一个包含事件详细信息的数字
    在 click 、 mousedown 和 mouseup 事件中，该数字表示当前的点击次数， dblclick 事件中，该数字一直为 2 。在键盘事件和鼠标经过事件中，该数字一直为0。

• eventPhase 返回一个代表事件处理程序发生时所在阶段的数字；
    0表示当前阶段未发生其他事件；1表示当前事件在捕获阶段发生；2表示当前事件处于目标阶段；3表示当前事件处于冒泡阶段；

• isTrusted 表示该事件是由用户行为触发的，还是由 JS 代码触发的，布尔值；
    当事件是由用户行为（点击等）触发时，值为 true ，当事件是通过 EventTarget.dispatchEvent() 派发的时候，这个属性的值为 false 。

<ul>
    <li>列表1</li>
    <li>列表2</li>
    <li>列表3</li>
    <li>列表4</li>
</ul>

<script>
    document.querySelector('ul').addEventListener("click", fn1, true)

    document.querySelector('ul').addEventListener("click", fn1, false)

    document.querySelector("li").addEventListener("click", fn1, true)

    function fn1() {