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

【问题标题】：Using closures in onerror attribute does not seem to work在 onerror 属性中使用闭包似乎不起作用
【发布时间】：2015-09-30 14:52:25
【问题描述】：

我在一个相当大的 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 这里 = http://jsfiddle.net/rrvvw1sj/

在图像或任何其他元素的加载或错误回调的情况下，范围界定如何工作？ error() 函数不应该可以使用闭包来访问吗？

【问题讨论】：

标签： javascript callback scope closures

【解决方案1】：

你的 img 标签找不到错误函数的原因是它无法访问闭包的作用域。

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

这行代码不会向可以链接回闭包的文档发送任何内容。
它发送的是一个字符串。
然后在文档范围内解析该字符串。
由于您的错误函数在全局范围内不存在，因此将无法找到它。

你需要做的是在你的闭包中创建一个对象并将错误函数附加到它上面。然后，如果您将该对象发送到文档，它将保持与闭包内的错误函数的连接。您可以使用 DOM (Document Object Model) 方法创建一个 img 元素节点，然后将该对象附加到主体。

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

//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);

【讨论】：

【解决方案2】：

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

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

要么将函数外部的定义移到全局范围内，要么给图像一个 id 并使用 addEventListener 或等效方法将函数附加到 onerror。

【讨论】：