반복 트리거를 방지하기 위한 js 키보드 이벤트 keydown 이벤트
키보드 이벤트에는 세 가지 주요 유형이 있습니다: keydown, keypress(권장되지 않음, 일부 브라우저에서는 이를 포기함)keyup.
일반 키보드 keydown 이벤트 추가
// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
// 输出按下的键的键码
console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
});
하지만 이 이벤트는 키 를 놓지 않으면 반복적으로 발생합니다 .이를 중지하는 방법은 무엇입니까?
keydown 이벤트가 반복적으로 트리거되는 것을 방지
①플래그 변수를 사용하여 버튼 상태를 추적합니다.
let keyDownFlag = false;
// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
if (!keyDownFlag) {
keyDownFlag = true;
console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
}
});
// 监听键盘释放事件
document.addEventListener('keyup', function() {
keyDownFlag = false;
});
②이벤트의 속성으로 판단
repeat속성을 이용하여 키를 계속 누르고 있으면 키보드 이벤트가 계속 발생하는지 여부를 판단할 수 있습니다.
// 监听键盘按下事件
document.addEventListener('keydown', function(event) {
if (!event.repeat) {
console.log('Key pressed:', event.key, 'Key code:', event.keyCode);
}
이 예에서는 event.repeat 속성을 사용하여 키를 누르고 있으면 이벤트가 트리거되는지 여부를 확인합니다. event.repeat가 false인 경우 이는 지속적으로 트리거되는 이벤트가 아닌 새로운 주요 이벤트임을 의미합니다.
구성요소 키를 사용하는 방법
구성 요소 키는 일반적으로 keydown 이벤트를 통해 트리거됩니다.
document.onkeydown = function (oEvent) {
console.log(oEvent);
}
이벤트 객체에 많은 정보가 반환되는 것을 볼 수 있는데, keycode 속성에는 키보드의 해당 ASCII 코드인 코드, type트리거되는 이벤트 유형 등이 포함되어 있습니다.
여기에는 사용할 수 있는 여러 속성, 즉 altkey속성과 ctrlkey속성이 있습니다 shiftkey. 키보드의 Alt, Ctrl, Shift 키에 의해 트리거되는 이벤트의 판단을 나타냅니다. 이러한 키에 의해 이벤트가 발생하면 해당 값이 true가 되며,
이러한 속성과 결합된 위의 내용을 통해 키보드 이벤트를 들을 수 있습니다.
- 예를 들어 ctrl + s 조합 이벤트를 듣고 싶습니다.
document.onkeydown = functionb(oEvent) {
var oEvent = oEvent || window.oEvent;
//获取键盘的keyCode值
var nKeyCode = oEvent.keyCode || oEvent.which || oEvent.charCode;
//获取ctrl 键对应的事件属性
var bCtrlKeyCode = oEvent.ctrlKey || oEvent.metaKey;
if( oEvent.nKeyCode == 83 && bCtrlKeyCode ) {
alert('save');
//doSomeThing...
}
}
- 예를 들어 Alt+q 조합 이벤트를 듣고 싶습니다.
document.onkeydown = functionb(e) {
if(e.altKey && e.keyCode == 81){
if(e.repeat){
return
}
//todo somethink
}
}
Mac 컴퓨터의 작동 방식은 일반 Windows 컴퓨터의 작동 방식과 다르지만 Alt 키가 없다는 의미는 아닙니다. Mac 컴퓨터에서 Alt 키를 찾는 것은 어렵지 않습니다.키보드 왼쪽 하단에 있는 옵션 키는 실제로 Apple의 Alt 키입니다.옆에 있는 컨트롤 키는 PC 컴퓨터의 Ctrl 키에 해당합니다.커맨드 키 승리 키에 해당합니다.