gpt4 book ai didi

Javascript 绑定(bind) keyup/down 事件

转载 作者:行者123 更新时间:2023-12-03 00:01:08 25 4
gpt4 key购买 nike

如何将函数绑定(bind)到按键按下/松开事件?

它可以绑定(bind)到整个文档或单个元素,在这种情况下都可以。

这必须没有任何 JavaScript 库。我主要只关心最新的 Firefox。特别是 Canvas 元素。

我已经尝试过:(Firefox 3.6.9 Windows 7)

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>Test</title>
</head>
<body>
<div class="wrapper">
<canvas id="game" width="800" height="400">
</canvas>
</div>
<script type="text/javascript">
var el = document.getElementById("game");

el.onkeydown = function(evt) {
evt = evt || window.event;
alert("keydown: " + evt.keyCode);
};

el.onkeyup = function(evt) {
evt = evt || window.event;
alert("keyup: " + evt.keyCode);
};
</script>
</body>
</html>

最佳答案

按键事件仅在可能获得焦点的文档和元素上触发。因此要处理 <canvas> 上的关键事件元素,您需要通过添加 tabindex 来允许它接收焦点属性(例如 <canvas id="game" width="800" height="400" tabindex="1"></canvas> )或简单地处理整个文档的按键事件,这可能不是您想要的(例如,如果您希望处理按键事件的页面上有多个元素)。

至于如何附加事件处理程序,最简单的方法如下:

var el = document.getElementById("your_element_id");

el.onkeydown = function(evt) {
evt = evt || window.event;
alert("keydown: " + evt.keyCode);
};

el.onkeyup = function(evt) {
evt = evt || window.event;
alert("keyup: " + evt.keyCode);
};

如果您可能需要多个监听器,可以使用 addEventListener在大多数浏览器中或 attachEvent在 IE <= 8 中:

if (typeof el.addEventListener != "undefined") {
el.addEventListener("keydown", function(evt) {
alert("keydown: " + evt.keyCode);
}, false);
} else if (typeof el.attachEvent != "undefined") {
el.attachEvent("onkeydown", function(evt) {
alert("keydown: " + evt.keyCode);
});
}

关于Javascript 绑定(bind) keyup/down 事件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3690904/

25 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com