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

Question

我将这段代码放在一个相当大的 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函数。但它给了我一个错误 - 错误未定义。JSFiddle 在这里 = http://jsfiddle.net/rrvvw1sj/

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

Answer 1

您的 img 标签找不到错误函数的原因是它无法访问闭包的范围。

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

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

您需要做的是在闭包内创建一个对象并将错误函数附加到它。然后，如果您将该对象发送到文档，它将保持与闭包内的错误函数的连接。您可以通过使用 DOM ( Document Object Model ) 方法创建一个 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);