javascript - 为什么 addEventListener 不是函数返回

Question

我有一个简单的脚本，它试图记录对按钮的点击。但是，我不断收到错误消息 *element*.addEventListener is not a function。

谁能解释我做错了什么？

HTML

<div id="game">
    <canvas id="gameScreen" width="550" height="500"></canvas>
    <div id="output"><p></p></div>
    <div id="controls">
        <button id="north">North</button>
        <button id="east">East</button>
        <button id="west">West</button>
        <button id="south">South</button>
    </div>
</div>

JS

window.addEventListener("load", function(){
    var canvas = document.getElementById("gameScreen");
    var ctx = canvas.getContext("2d");
    var output = document.getElementById("output");
    var outputText = output.querySelector("p");
    var controls = document.getElementById("controls");
    var directionButtons = controls.getElementsByTagName("button");

    directionButtons.addEventListener("click", function(){
        console.log(this);
    })
})

错误

TypeError: directionButtons.addEventListener is not a function

Answer 1

getElementsByTagName() 方法将返回一个节点列表，您应该遍历它们并将监听器附加到每个节点:

function my_click(){
   alert(this.id);
}

var directionButtons = controls.getElementsByTagName("button");

for(i=0; i<directionButtons.length; i++) {
    directionButtons[i].addEventListener("click", my_click, false);
}

希望这对您有所帮助。

---

function my_click(){
   alert(this.id);
}

var directionButtons = document.getElementsByTagName("button");

for(i=0; i<directionButtons.length; i++) {
    directionButtons[i].addEventListener("click", my_click, false);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id='1'>Button 1</button>
<button id='2'>Button 2</button>
<button id='3'>Button 3</button>
<button id='4'>Button 4</button>