Question

使用Javascript操作DOM时，您早期学到的一件事是以下模式：

var img = new Image();   // Create new Image object
img.onload = function(){
  // execute drawImage statements here
}
img.src = 'myImage.png'; // Set source path

据我所知，通常在设置对象属性时没有副作用。那么触发图像加载的机制是什么？这只是魔术吗？或者我可以使用类似的机制来实现支持并行模式的类Foo吗？

var foo = new Foo();   // Create new object
foo.barchanged = function(){
  // execute something after side effect has completed
}
foo.bar = 'whatever'; // Assign something to 'bar' property

我隐约知道Javascript getters and setters。这是Image.src触发加载的方式吗？

Answer 1

Image.src = ...触发加载的机制目前尚未指定，但WebIDL将在完成后更改。（4.4.5 Attributes是现在谈论这一点的部分;它可能是最终建议中的内容，但我尽量不预测这些事情的未来 - 太容易预测匆忙和后悔闲暇。一些浏览器实际上使用了你注意到的getter和setter来实现它（只需要在浏览器中实现“native”函数来支持它们，类似于document.appendChild是一个带有“本机”浏览器的JS函数。 - 它背后提供的实施）。对于DOM getter和setter，其他人拥有完全不同于用户可定义的getter和setter的方法。（这就是为什么你不能在Firefox 4 beta中使用Object.getOwnPropertyDescriptor来检查DOM getter和setter。这是我们最终会解决的问题，但我认为我们已经没有时间为Firefox 4做这件事了。。）

目前答案是这样的：“如何”未指明，但很快就会出现。

Answer 2

它类似于JavaScript setter，但是在本机代码中实现。还有许多其他内容，包括window.location和textContent

这个MDC documentation解释了标准（ECMAScript 5）getter和setter语法。不幸的是，cross-browser support尚不存在。请注意，有大量先前的non-standard syntax，其中大部分已被删除

Answer 3

W3C生成一个规范，描述浏览器（用户代理）应遵循的HTML，JavaScript和CSS的行为。大多数浏览器供应商都实现了JavaScript语言，因此遵循此规范。

您在上面描述的代码（定义了onload属性）是在随浏览器打包的本机JavaScript中实现的。每个浏览器供应商实现的东西很可能在引擎盖下有所不同，但最终结果通常是相同的。

您可以很好地遵循Foo对象的相同模式。但是，我知道本地执行此操作的唯一方法是将onchange事件绑定到DOM元素。 Image上的src属性是DOM元素的属性。

如果您要利用onchange事件，您的Foo类还需要将值绑定到DOM元素。但是，在更改属性时可能还有其他触发事件的方法（而不是调用可以设置属性并调用其他功能的方法。）

在Javascript中，通过什么机制设置Image src属性会触发图像加载？

3 个答案: