在没有循环和jQuery的同一类的所有元素上添加Click事件

Question

我必须编写一个代码，在没有循环和jquery的情况下，对同一类的所有输入运行click事件。

我想到的是：

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

点击有效，但我得到了undefined，而不是点击输入包含的值。

Answer 1

和click都有效，但我得到了未定义的值，而不是单击输入包含的值。

因为在获取值时使用了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在所有现代浏览器上都可用，您可以在过时的浏览器上进行polyfill。(

• 对于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