如何将事件侦听器分配给多个对象而不发生范围冲突？

使用迭代函数分配事件监听器

使用循环向多个对象添加事件监听器时，可能会出现所有监听器都引用同一对象，通常是循环中的最后一个对象。这是因为 JavaScript 处理变量作用域和函数闭包的方式。

要解决此问题，请采用以下方法：

// Autoloading function to add the listeners:
var elem = document.getElementsByClassName("triggerClass");

for (var i = 0; i < elem.length; i += 2) {
  (function () {
    var k = i + 1;
    var boxa = elem[i].parentNode.id;
    var boxb = elem[k].parentNode.id;

    elem[i].addEventListener("click", function() { makeItHappen(boxa, boxb); }, false);
    elem[k].addEventListener("click", function() { makeItHappen(boxb, boxa); }, false);
  }());
}

在此代码中，匿名函数包裹在内部范围，为每次迭代创建一个闭包。通过使用“()”运算符立即执行函数，每次迭代都有自己的私有作用域，确保其中的变量和函数不会干扰其他迭代的变量和函数。

这种方法授予每个事件侦听器访问其预期变量，解决所有侦听器针对同一对象的问题。

以上是如何将事件侦听器分配给多个对象而不发生范围冲突？的详细内容。更多信息请关注PHP中文网其他相关文章！