从TypeScript视角看HTML DOM（五）：Event

说了半天事件，事件是什么？说到底，事件无非就是网络状态的变化，或者是用户的操作。这里的状态是比较宽泛一点的概念，不是单指网络的连通性一类的状态。

插一句，提到监听网络状态变化，倒是有一个新的实验性APInavigator.connection，可以用于检测网络状态，其中包括网络类型、带宽、RTT等一系列属性。好用是挺好用，但是目前看起来支持得并不充分，至少Firefox就不支持；不过Chrome是支持的。用这个检测网络变化还是挺方便的，和其他事件的处理方式差不多：

navigator.connection.addEventListener('change', onNetworkChange);

我们先来看看一个事件的初始化：

initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;

interface EventInit {
    bubbles?: boolean;
    cancelable?: boolean;
    composed?: boolean;
}

这里一共有三个属性，bubbles、cancelable、composed。从字面意义就可以看出，bubbles对应的是冒泡，cancelable对应的是事件能否取消。那composed呢？这个其实跟shadow DOM有关，代表事件是否能在shadow root之外触发，和事件本身的关系其实不那么紧密，从初始化事件的方法里也能看出来，这个后面再说。

我们再来看看Event接口的实现：

interface Event {
    readonly bubbles: boolean;
    cancelBubble: boolean;
    readonly cancelable: boolean;
    readonly composed: boolean;
    readonly currentTarget: EventTarget | null;
    readonly defaultPrevented: boolean;
    readonly eventPhase: number;
    readonly isTrusted: boolean;
    returnValue: boolean;
    readonly target: EventTarget | null;
    readonly timeStamp: number;
    readonly type: string;
    composedPath(): EventTarget[];
    initEvent(type: string, bubbles?: boolean, cancelable?: boolean): void;
    preventDefault(): void;
    stopImmediatePropagation(): void;
    stopPropagation(): void;
    readonly AT_TARGET: number;
    readonly BUBBLING_PHASE: number;
    readonly CAPTURING_PHASE: number;
    readonly NONE: number;
}

其实里面的很大一部分之前都提过了，比如preventDefault、stopImmediatePropagation、stopPropagation这几个方法。composedPath明显是和shadow DOM有关的，也不赘述了。最后那几个常量，代表着事件当前的状态；其实也就是之前提到事件流的三个阶段。

可能也就isTrusted这个属性比较特殊了。这个属性是什么呢？从字面意义上也能看出来，“是否可信”。什么是可信的事件？由用户发起，并由浏览器创建的事件。那什么是不可信？由脚本创建的事件。

说起来，事件是可以手动创建的。且看DOM Standard上的例子：

obj.addEventListener("cat", function(e) { process(e.detail) })

var event = new CustomEvent("cat", {"detail":{"hazcheeseburger":true}})
obj.dispatchEvent(event)

其实就是手动走了一遍流程，先创建事件，再进行分发。而且这个事件是全局可见的。

参考资料

1. Javascript网络状态获取与监听

2. DOM Living Standard — Last Updated 18 June 2019

目录

从TypeScript视角看HTML DOM（一）：前言

从TypeScript视角看HTML DOM（二）：Node与Element

从TypeScript视角看HTML DOM（三）：NodeList与HTMLCollection

从TypeScript视角看HTML DOM（四）：Event Flow

从TypeScript视角看HTML DOM（六）：Scripting