javascript - 直接分配的事件处理程序是实际的对象属性吗?

标签 javascript event-handling dom-events

我无法回答这个问题:Explaining odd behavior in JavaScript .在研究过程中,我发现直接分配给宿主对象的事件处理程序呈现出一种奇怪的行为:它们可以作为对象的属性进行访问,但不知何故它们似乎并不是实际的属性。

例如,如果我在全局范围内定义一个变量,它看起来就像 window 的任何其他属性:

​var foo = "foo";
console.log(Object.getOwnPropertyDescriptor(window, 'foo'));
// Object {value: "foo", writable: true, enumerable: true, configurable: false} 

如果我只是分配给 window.foo,或者如果我创建一个隐含的全局(但是 [[Configurable]] 将是 true,我会得到相同的输出,出于已知原因;当然,这在严格模式下是行不通的)。但是,如果我尝试通过分配给 window.onsomething 来添加事件处理程序,我将无法使用 Object.getOwnPropertyDescriptor 读取该属性(尽管它仍然可以在 window.onsomething):

window.onresize = function onresize(e) {
    console.log('rsz', e);
}
console.log(window.onresize); // function onresize(){...}
console.log(Object.getOwnPropertyDescriptor(window, 'onresize')); // undefined

浏览器如何处理这样分配的事件处理程序?我怀疑这个问题的答案也是另一个问题的答案。

最佳答案

window 对象是 Window 构造函数的一个实例,它具有 onresize 作为其原型(prototype)的一部分。

尝试记录 window 并启用 show own properties only 选项。 onresize 不会出现,因为它是从 Window 继承的。这就是 getOwnProperty 没有接受它的原因,因为它只返回对象拥有的属性的描述符,而不是原型(prototype)链中的属性。

关于javascript - 直接分配的事件处理程序是实际的对象属性吗?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/13809917/

相关文章:

javascript - 在我的阵列上使用 axios 发送数据的问题

javascript - WebStorm 2016.1.3 React 属性错误自动完成

javascript - 如何根据边距样式创建 If Else 条件

javascript - 比较表单提交时的复选框选中状态与页面加载状态

javascript - 关于在 HTML 中使用 JavaScript 和事件处理程序的问题

javascript - 清除 flexbox 列

javascript - 从 swift 或 objective-c 向 js 发送事件

java - 设置 Spinner 的事件处理程序时出现 NullPointerException

javascript - 谷歌地图错误 "Uncaught TypeError: Cannot read property ' x' of undefined"

javascript - 如何禁用默认浏览器自动完成功能?