事件监听器的参数

马格努斯

TypeScript的ES6类型定义文件(lib.es6.d.ts)在窗口对象上定义addEventListener,如下所示:

addEventListener<K extends keyof WindowEventMap>(type: K, listener: (this: Window, ev: WindowEventMap[K]) => any, options?: boolean | AddEventListenerOptions): void;

如图所示,它将侦听器定义为具有两个参数:thisev

如我们所知,ev是事件对象,thisevent被触发的DOM元素我们还知道,事件触发时,浏览器会自动将这些参数传递给事件侦听器。

当我创建一个处理程序并检查其参数的长度时,会告诉我只有一个:

window.addEventListener('keydown', myHandler2);

function myHandler2() {
    // Output of the below is: args length: 1, arg 1: [object KeyboardEvent]
    console.log('args length: ' + arguments.length + ', arg 1: ' + arguments[0]);
}

因此,我想知道,为什么方法定义告诉我有两个参数,而实际上只有一个?

边注

这不是特定于addEventListener的。onclick例如,方法具有以下类型定义:

onclick: (this: HTMLElement, ev: MouseEvent) => any;
艾伦

根据函数的Typescript文档

[在声明函数时,]您可以提供一个显式this参数。this参数是伪造的参数,它们首先出现在函数的参数列表中。

请注意对this“ fake”参数的描述在JavaScript中,this是函数的隐式参数。其值取决于函数的调用方式,并且在调用函数时不能将其作为位置参数提供。TypeScript通过假装它是第一个位置参数来解决此问题(因此称其为“ fake”)。

如果您不熟悉thisJavaScript函数,可能会发现阅读《了解JavaScript函数调用》和“ this”很有用

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章