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

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

Answer 1

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

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

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

Answer 2

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

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

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

您需要做的是在闭包中创建一个对象并将错误函数附加到它。然后，如果您将该对象发送到文档，它将保持与闭包内错误函数的连接。您可以通过使用 DOM（Document Object Model) methods to create an img element node and then append that object to the body.

Then you have a reference in the closure to the element and can use 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 属性中使用闭包似乎不起作用

Using closures in onerror attribute does not seem to work

javascript

closures

scope

callback