javascript - 通过数组访问时未调用 addEventListener() 方法

Question

下面的代码读取用户按下的键的 unicode 值，然后将其打印在屏幕上。它按预期工作:

    document.addEventListener("keydown", getKey);
    document.addEventListener("keyup", displayKey);

    function getKey() {
            var key = event.which || event.keyCode;
            return key;
    }

    function displayKey() {
            document.body.innerHTML = "Unicode value: " + getKey();
    }

但是，当我尝试对类执行相同的操作时，它不起作用:

<div class="anyName">Press any key</div>
    <script>
    var n = document.getElementsByClassName("anyName");

    n[0].addEventListener("keydown", getKey);
    n[0].addEventListener("keyup", displayKey);

    function getKey() {
         var key = event.which || event.keyCode;
         return key;
    }

    function displayKey() {
         n[0].innerHTML = "Unicode value: " + getKey();
    }
    </script>

为什么它不起作用以及如何修复它？非常感谢任何帮助!

Answer 1

这与数组无关。 getElementsByClassName 返回 NodeList，而不是数组。它也与 NodeList 无关。

这里的问题是您试图将事件处理程序绑定(bind)到 div。

除非你搞恶作剧(涉及可访问性)，否则你不能将焦点放在 div 上。 div 也没有任何可以接收焦点的后代。因此，当来自按键事件的事件冒泡时，它永远不会接触 div，因此不会触发事件处理程序。

在 div 内放置一些可以给予焦点的内容，单击它，然后按一个键，它就会起作用。

var n = document.getElementsByClassName("anyName");

n[0].addEventListener("keydown", getKey);
n[0].addEventListener("keyup", displayKey);

function getKey() {
  var key = event.which || event.keyCode;
  return key;
}

function displayKey() {
  n[0].innerHTML = "Unicode value: " + getKey();
}

<div class="anyName"><textarea></textarea></div>

警告:您正在使用 global event object这是非标准的，Firefox 不支持。使用传递给事件处理程序的第一个参数来获取事件对象。