为什么onclick'的处理函数不像预期的那样工作

Why does onclick's handling function not work as expected?

本文关键字：工作 处理函数 onclick 为什么      更新时间：2023-09-26

我有以下一小段代码:

var instance = this;
window.onload = function () {
    for (var i = 0; i < array.length; ++i) {
        var currentDivId= array[i];
        var currentDiv = document.getElementById(currentDivId);
        
        try {
            if (!currentDiv) {
                throw 'Div id not found: ' + currentDivId;
            }
            var image = document.createElement('img');
            image.src = 'img.jpg';
            image.onclick = function() {
                instance.doSomething(currentDivId);
            };
            
            currentDiv.appendChild(image);
        }
        catch(e) {
            console.warn('oops');
        }
    }
};

传递给这段代码的是一个div的id数组。它所做的是，它在每个div上渲染一个图像并设置它们的onclick属性。

假设我有一个字符串数组:['abc', 'xyz']

我希望代码将一个图像放在<div id="abc"></div>内，另一个图像放在<div id="xyz"></div>内。

当您点击第一张图片时，instance.doSomething函数应该调用参数'abc'，反之亦然。

但是代码没有像预期的那样工作。它总是使用数组中的最后一个参数调用instance.doSomething，在本例中是'xyz'。

我是JS的新手，对它的内部工作原理还没有一个扎实的掌握。这里出了什么问题，我该如何解决?

感谢您的帮助。

image.onclick = function() {
    instance.doSomething(this.parentNode.id);
};

应该可以了。因为我们知道图像位于我们想要获取的div中，所以只需向上移动一个dom元素并获取它的id。

欢迎来到Javascript作用域问题的奇妙世界。就像现在一样，JS正在处理你的onclick代码，就像"当这个对象被点击时，获取存储在currentDivID变量中的值在点击发生的时候，并将其传递给doSomething函数"。

你应该做的是基于图像对象本身的参数。每个DOM对象都知道它在DOM树中的位置，因此在单击它时，onclick代码应该使用DOM遍历操作来找出它在哪个div中，并动态检索它的ID。这样你就不必担心绑定变量和作用域问题……只需找出包含图像的div并在运行时获取ID。

尝试:

image.onclick = (function() {
  var currentD = currentDivId;
  return function() { 
      instance.doSomething(currentD);
  }
})();

希望有所帮助

相关文章：