javascript - 通过 for 循环将事件监听器应用于按钮？

Question

我正在尝试将事件监听器应用于按钮数组，如下所示。控制台日志记录工作正常，但当我进入 for 循环时，事件监听器未添加到按钮以按预期运行。

我没有看到我的错误，任何帮助将不胜感激。

<button onclick="" id="optContrastButton" data-style="contrast">reset</button>

<小时/>

String.prototype.capitalize = function() {
  return this.charAt(0).toUpperCase() + this.slice(1);
};

let buttons = document.getElementById('optWindow').getElementsByTagName('button');
console.log(buttons);
for(let b = 0; b < buttons.length; b++) {
  let data = buttons[b].dataset.style;
  console.log(data); // Data returned 'contrast' :: OKAY
  buttons[b].addEventListener('onclick', function() {
    document.querySelector('#innerWindow').style.webkitFilter = `${data}(1)`;
    let c = data.capitalize();
    console.log(`#opt${c}Range`); // No Data returned :: FAIL :(
    document.querySelector(`#opt${c}Range`).value = 1;
  });
}

Answer 1

用于添加事件监听器的两种现代普通 JS 方法是原始分配:

el.onclick = function() {...} // note the prefix `on`

并使用addEventListener:

el.addEventListener('click', function() {...}) // note: no `on` prefix!

您将两者混合并在 addEventListener 中使用带前缀的版本 (onclick)。所以修复:更改

buttons[b].addEventListener('onclick', function() {

至

buttons[b].addEventListener('click', function() {