在onerror属性中使用闭包似乎不起作用

Using closures in onerror attribute does not seem to work

本文关键字：闭包 不起作用 onerror 属性      更新时间：2023-09-26

我有这段代码在一个相当大的JS文件。

function accError() {
  console.log("hello there");
}
var setAccount = function(key) {
  var error = function() {
    accError();
  };
  document.body.innerHTML += "<img src='//www.somerandomdomain.in/i.jpg?key=" + key + "' onerror='error();' />"
};
setAccount("a");

如果图像加载失败，我想调用error函数。但它给了我一个错误- error没有定义。JSFiddle here = http://jsfiddle.net/rrvvw1sj/

在加载或错误回调图像或任何其他元素的情况下，作用域是如何工作的?不应该使用闭包访问error()函数?

img标记找不到错误函数的原因是它没有访问闭包的作用域。

document.body.innerHTML += "<img src='//www.somerandomdomain.in/i.jpg?key=" + key + "' onerror='error();' />"

这行代码没有向文档发送任何可以链接回闭包的内容。
它发送的是一个字符串。
然后在文档的范围内解析字符串。
因为你的错误函数在全局作用域中不存在，所以它不会被找到。

你需要做的是在闭包中创建一个对象，并将error函数附加到它上面。然后，如果您将该对象发送给文档，它将保持与闭包内的error函数的连接。您可以通过使用DOM(文档对象模型)方法创建一个img元素节点，然后将该对象附加到正文中来实现这一点。

然后在闭包中有一个对元素的引用，并且可以使用addEventListener将错误函数附加到错误事件

//document.body.innerHTML += "<img src='//www.somerandomdomain.in/i.jpg?key=" + key + "' onerror='error();' />"
var img=document.createElement("img");
img.setAttribute('src', '//www.somerandomdomain.in/i.jpg?key=' + key);
img.addEventListener("error", error);
document.body.appendChild(img);

'onerror='不在闭包范围内求值，因此error()将无法访问。

如果它被求值，那么error()当然会立即被调用。

将函数外的定义移到全局作用域中，或者给图像一个id，并使用addEventListener或类似的方法将函数附加到onerror。

相关文章：