javascript - 如何用多个事件处理程序触发一个函数(更改)

Question

我想添加一个条件，即只有在两者都满足的情况下才会触发该函数addEventListener('change', SwitchG) 事件为 True(=两者均已更改)。当两者之一发生变化时，我当前使用的代码已经激活了该功能。

var hallo = document.getElementById("S131_01");
var hallo1 = document.getElementById("S130_01");

hallo.addEventListener('change', SwitchG);
hallo1.addEventListener('change', SwitchG);

function SwitchG () {
    var test1 = document.getElementById("submit");                                                                             
  test1.classList.add("css");   
}

Answer 1

您需要另一个变量，它检查两者是否已更改，并且仅在两个更改都已发生时才执行处理程序函数:

var hallo = document.getElementById("S131_01");
var hallo1 = document.getElementById("S130_01");
var countChanges = 0; // <-- this tracks changes

hallo.addEventListener('change', SwitchG);
hallo1.addEventListener('change', SwitchG);

function SwitchG () {
  countChanges += 1;  // <-- count up
  if (countChanges >= 2) {
    countChanges = 0; // <-- reset (if needed)

    var test1 = document.getElementById("submit");                                                                             
    test1.classList.add("css"); 
  }  
}

然而，更强大的实现还可以跟踪已更改的元素，并确保来自单个元素的重复更改事件不会成功运行处理程序。

例如使用此实用程序:

function ChangedCounter (minChanges) {
  var elements = new Set();
  return {
    changed(element) {
      elements.add(element);
    },
    clear() {
      elements.clear();
    },
    isReady() {
      return elements.size >= minChanges;
    }
  };
}

你可以这样写:

var hallo = document.getElementById("S131_01");
var hallo1 = document.getElementById("S130_01");
var countChanges = ChangedCounter(2);

hallo.addEventListener('change', SwitchG);
hallo1.addEventListener('change', SwitchG);

function SwitchG (e) {
  countChanges.changed(e.target);
  if (countChanges.isReady()) {
    countChanges.clear();

    var test1 = document.getElementById("submit");                                                                             
    test1.classList.add("css"); 
  }  
}