下面的代码读取用户按下的键的 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>
为什么它不起作用以及如何修复它?非常感谢任何帮助!
最佳答案
这与数组无关。 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 不支持。使用传递给事件处理程序的第一个参数来获取事件对象。
关于javascript - 通过数组访问时未调用 addEventListener() 方法,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/53304440/