javascript - 我如何使 QuerySelectorAll() 选择所有 html 标签并通过访问 html 标签的索引进行更改

Question

例如:我有以下代码

    <div class="set">
    <button class =  "w drum"> w  </button>
    <button class =  "a drum"> a  </button>
    <button class =  "s drum"> s  </button>
    <button class =  "d drum"> d  </button>
    <button class =  "j drum"> j  </button>
    <button class =  "k drum"> k  </button>
    <button class =  "l drum"> l  </button>
  </div>

现在我想选择所有按钮标签并在所有按钮中执行 .addEventListener 函数。我通过 for 循环实现它。但我想问有没有什么方法可以通过以下方式实现它......

  document.querySelectorAll("button")[0,1,2,3,4,5,6].addEventListener("click",pressButton);

Answer 1

您可以添加 addEventListener函数到 prototype的 NodeList并称之为。干得好:

NodeList.prototype.addEventListener = function(indexes, listener, eventName) {
    for (let index = 0; index < this.length; index++) {
        if (indexes.indexOf(index) >= 0) this[index].addEventListener(eventName, listener);
    }
};
function pressButton() {console.log(this.innerText);}
document.querySelectorAll("button").addEventListener([0, 1, 2, 3, 4, 5, 6], pressButton, "click");

<div class="set">
<button class =  "w drum"> w  </button>
<button class =  "a drum"> a  </button>
<button class =  "s drum"> s  </button>
<button class =  "d drum"> d  </button>
<button class =  "j drum"> j  </button>
<button class =  "k drum"> k  </button>
<button class =  "l drum"> l  </button>
</div>