【Typescript】探究为什么TS对EventTarget类型判断的比较大？

时间：2025-05-15 11:48:22

前言

  • 一般写addEventListener，我们的listener都会收到一个事件对象，而这个事件对象的类型TS却认为是Event类型，而其target判断为EventTarget类型，给的类型比较大，往往都需要我们进行断言，为什么不好判断？难道真的有意料之外的结果？
  • 特别是一些我们感觉很确定的东西，比如MouseEvent，是click后的事件，不管屏幕上怎么点击，点的怎么看都是个HTMLElement，难道还会有别的东西？

Event EventTarget Node Document HTMLElement 区别

  • HTMLElement extends Element
  • Element extends Node ， Document extends Node
  • Node extends EventTarget
  • Event是发生在dom的事件，其中target属性为 EventTarget | null
  • Node有很多dom的API，Document 与Element又进行扩充，像className就是Element特有的，document有cookie,domain之类特有的。
  • 而HTMLElement就是扩充自Element，比Element多了offsetHeight之类属性。

自定义事件

  • 了解了上面关系，再说下主角，就是自定义事件，就是这个特性的存在，导致不好判断这个事件对象到底是个啥。
  • 我们以MouseEvent举例，通常情况下，('click',listener)这个语句中，listener就会接收到Event类型的参数，这时的类型是EventTarget | null

类型能否是HTMLElement?

  • 答案肯定是不行，我们可以使用自定义事件传个负值过去，就像这样：
document.dispatchEvent(new MouseEvent('click',{clientX:-1,clientY:-1}))
  • 或者这样：
document.dispatchEvent(new MouseEvent('click',{target:'123'}))
  • 这样找不到target，target就会变成document，而根据第一节，document是Document类型，比HTMLElement类型要大，所以不行。

类型能否是Node?

  • 根据第一节可以发现，这个EventTarget有很多属性没有，是个比Node还大的玩意，那么可能产生不是Node但是却属于EventTarget的东西吗？这还真有，MDN举出了3种特殊例子， XMLHttpRequest，AudioNode，AudioContext。XMLHttpRequest extends XMLHttpRequestEventTarget extends EventTarget可以看见，这个XMLHttpRequest既不属于Node，但是却属于EventTarget，满足了要求。另外2个不举例了。
  • 虽然满足了要求，但一个click事件怎么会给你传一个XMLHttpRequest的？？？这怎么看也不对啊，就算你点的再偏，顶多给你传个document，怎么会传XMLHttpRequest的？
  • 可以看一下这个骚操作：
let a=new XMLHttpRequest
a.addEventListener('click',(e)=>console.log(e))
let event = new Event('click')
a.dispatchEvent(event)
  • 诡异的XMLHttpRequest居然可以用addEventListener，最后e的打印结果：
bubbles: false
cancelBubble: false
cancelable: false
composed: false
currentTarget: XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
defaultPrevented: false
eventPhase: 0
isTrusted: false
path: []
returnValue: true
srcElement: XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
target: XMLHttpRequest {onreadystatechange: null, readyState: 0, timeout: 0, withCredentials: false, upload: XMLHttpRequestUpload, …}
timeStamp: 4900758.515000053
type: "click"
  • 这就使得target并不是Node类型，而是更大的EventTarget类型。
  • 有人就会说，那TS咋不能直接看调用者来进行更细的判断，如果调用者是Node，那么它的listener的target就应该是Node类型，如果调用者是XMLHttpRequest，那么它的 listener的target就应该是XMLHttpRequest类型。
  • 没错，TS的特性其实是可以办到的，但是目前情况就是所有的类型全部都由EventTarget扩展，而target属性全部用的都是Event上的Target属性。
  • 最好的解决方法就是对EventTarget添加泛型支持，这样只要传入相应的泛型，就能直接获得想要的对象，这个问题存在了近5年还没有解决，并且问题仍然在开放中，根据作者描述，他们的声明文件是通过软件自动生成的，这个源文件不能放出来给你看，另外，如果要添加泛型，会导致过不了性能测试。

相关文章