EventListener 不能同等地捕捉按钮答案

【问题标题】：EventListener doesn't catch buttons equallyEventListener 不能同等地捕捉按钮
【发布时间】：2019-07-07 15:34:32
【问题描述】：

我正在尝试构建我的第一个计算器。添加 eventListener 时，该函数仅有时进入if 语句。 IE。如果我单击某个数字，它不会记录，但是当我尝试其他数字然后再次尝试第一个数字时，它会起作用。我真的不明白这种行为。

这里你可以看看（登录到控制台）https://jsfiddle.net/ert54b7z/2/

const keys = document.querySelector(".keypad");
keys.addEventListener("click", function(e) {
  if (e.target.matches("button")) {
    const button = e.target;
    const key = button.dataset.key;
    console.log(key);
  }
});

<div class="keypad">
  <div class="clear">
    <button data-key="clear" class="button"><p>C</p></button>
    <button data-key="all-clear" class="button"><p>AC</p></button>
  </div>
  <div class="operations">
    <button data-key="plus" class="button"><p>+</p></button>
    <button data-key="minus" class="button"><p>-</p></button>
    // ...
  </div>
  <div class="numbers">
    <button data-key="7" class="button"><p>7</p></button>
    <button data-key="8" class="button"><p>8</p></button>
    // ...
  </div>
  <button data-key="equals" class="button equals"><p>=</p></button>
</div>

【问题讨论】：

标签： javascript html dom addeventlistener dom-events

【解决方案1】：

使用事件委托是一种很好的直觉。您检查单击事件的目标，但由于您的按钮包含段落标签，因此如果您单击按钮中心的某个位置，它们就会成为单击目标。删除<p> 标签（反正它们都不需要），每次点击都会记录密钥。

【讨论】：

【解决方案2】：

您将事件侦听器附加到外部 div。您需要将其附加到按钮上。

$('.keypad').on('click', myFunction);

function myFunction(e) {
// do stuff here
}

<div class="">
  <div class="clear">
    <button data-key="clear" class="keypad button"><p>C</p></button>
    <button data-key="all-clear" class="keypad button"><p>AC</p></button>
  </div>
  <div class="operations">
    <button data-key="plus" class="keypad button"><p>+</p></button>
    <button data-key="minus" class="keypad button"><p>-</p></button>
    // ...
  </div>
  <div class="numbers">
    <button data-key="7" class="keypad button"><p>7</p></button>
    <button data-key="8" class="keypad button"><p>8</p></button>
    // ...
  </div>
  <button data-key="equals" class="keypad button equals"><p>=</p></button>
</div>

<!-- include jquery -->
<script src="https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.4.1.min.js"></script>

【讨论】：

我试过你的方法（也有@MaximeLaunois 的建议），但它说 keys.addEventListener 不是一个可以理解的函数，因为 keys 是节点集合而不是元素？
嗨，我更新了 javascript。不要使用 querySelector，只需使用 document.getElementsByClassName
document.getElementsByClassName 返回一个 HTMLCollection，而不是单个 HTMLElement。您必须使用 for 循环将事件侦听器添加到每个按钮
改为使用 jQuery