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，而不是数组。它也与NodeLists无关。

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

除非您参与了恶作剧（涉及可访问性），否则您不能为div赋予 focus 。 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不支持。使用传递给事件处理程序的第一个参数来获取事件对象。

数组访问时未调用addEventListener（）方法

1 个答案: