javascript - 在具有相同类的所有元素上添加 Click 事件，无需循环和 jQuery

Question

我必须编写一个代码，在具有相同类的所有输入上运行单击事件，而无需循环和 jquery。

我想出的是:

document.body.addEventListener('click', function (click) {
    if (click.target.className == 'abc') {
        document.frame.screen.value += this.value;
    }
});

并且单击可以工作，但我得到了未定义，而不是单击的输入包含的值。

Answer 1

and click works but I got undefined instead of value that clicked input contain.

因为你在获取值时使用的是this而不是click.target；您想使用click.target:

document.frame.screen.value += click.target.value;
// Here -----------------------^^^^^^^^^^^^

您的处理程序中的

this 将是 document.body。您在检查类时正确使用了 click.target，但在获取值时却没有正确使用。

一些注意事项:

• FWIW，事件处理程序中事件参数的常用名称是 event 或 e，而不是 click。
• 元素可以有多个类，这些类都位于 className 中。 如果这对您来说可能是一个问题，您可以查看.classList.contains("abc")。 ( classList 可在所有现代浏览器上使用，并且您可以在过时的浏览器上对其进行填充。)

• 这对于 input 元素来说不是问题，但将来如果您想对可以具有后代元素的元素执行此操作，您可能需要一个循环来处理以下可能性:单击目标元素的后代:

  var node = event.target;
  while (!node.classList.contains("abc")) {
      if (node === this) {
          return; // The click didn't pass through a matching element
      }
      node = node.parentNode;
  }
  // Use it here