为什么在 <IMG> 事件处理程序中运行的 JavaScript 中 x 和 y 是不可变的？

Question

我正在使用 Chrome，以防这是浏览器特定的行为

当我尝试在图像的

x

或

onLoad

事件处理程序中使用 JavaScript 设置

onError

变量的值时，我无法这样做。

x

和

y

似乎被设置为图像的坐标，当我尝试更改它们时，值没有更新，并且JS控制台中没有记录任何错误。

示例：https://jsfiddle.net/brth8zxy/

该页面中的代码：

<img src="https://media1.tenor.com/m/557GUrcXp14AAAAC/jinx-cat-javascript.gif" onLoad="alert(`x=${x}...\nNow setting x=100`);x=100;alert(`x=${x}\nWell that didn't work... Why?`)">

有趣的是，如果我在

onLoad

事件处理程序中调用函数，则不会出现此行为。也许与范围有关？

Answer 1

您提到的行为确实与范围有关。让我结合您的示例分享我对此的见解。

因此，当您直接在

x

属性中使用

onLoad

时，它指的是全局

x

对象的

window

属性。在事件处理程序的上下文中，全局

window

对象与执行事件处理程序的范围不同¹。事件处理程序在触发事件的元素的上下文中运行²。

现在，在您的示例中，

onLoad

事件处理程序在

<img>

元素的上下文中执行。由于

<img>

元素没有

x

属性，事件处理程序会查找原型链并找到

x

对象上的

window

属性。这就是为什么当您尝试将

x

设置为 100 时，它的值不会改变。

那么，如果您在

onLoad

事件处理程序中使用函数，正如您所提到的，会发生什么？

  <!-- The answer is you create a new scope for the x variable, 
which allows you to set and update its value as expected.-->

<script>
  function handleImageLoad() {
    let x = 0;
    alert(`x=${x}...\nNow setting x=100`);
    x = 100;
    alert(`x=${x}\nNow it works!`);
  }
</script>

<img src="https://media1.tenor.com/m/557GUrcXp14AAAAC/jinx-cat-javascript.gif" onLoad="handleImageLoad()">

---

参考资料：

1. 关于作用域如何运作的最后一段
2. 事件和Dom节点