DOM 요소 위로 마우스를 움직일 때 키 이벤트 감지

Question

document에서 키 이벤트를 감지하는 방법을 알고 있습니다. 또한 DOM 요소에서 mousemove 이벤트를 감지하는 방법을 알고 있습니다.

그러나 요소 나 마우스가 움직이지 않으면 마우스로 키 이벤트가 발생하는 것을 어떻게 감지 할 수 있을지 모르겠습니다.

DOM 요소에 mouseout에 의해 mousemove에 의해 true로 설정된 부울을 설정할 수 있다고 생각합니다. 그러나 이것을하기위한 더 적절한 방법이 있습니까?

내가 직접 관련 그러나 답이있는 질문을 발견했다 (그리고 코멘트 정말 도움이되지 않습니다) :

Detect shift key while already over element

Answer 1

여기 위 내 댓글의 확장입니다.

바닐라 자바 ​​스크립트를 사용하면 onmouseover 및 onmouseleave에 대한 요소에서 이벤트 리스너를 설정할 수 있습니다. 이러한 이벤트 리스너는 부울 변수를 토글합니다.이 변수는 현재 요소 위에 마우스가 있는지 여부를 나타내는 플래그입니다.

그런 다음 키 누름에 대한 다른 이벤트 수신기를 창에 추가하십시오. 키 누를 때 부울 값이 참이면 코드를 실행하고, 그렇지 않으면 아무 것도하지 않습니다. https://jsfiddle.net/6wpeLbx9/ : 여기

var mouseOn = false; 

document.getElementById('div').onmouseover = function() { 
    console.log('mouseover'); 
    mouseOn = true; 
} 

document.getElementById('div').onmouseleave = function() { 
    console.log('mouseleave'); 
    mouseOn = false; 
} 

window.onkeypress = function(e) { 
    if(mouseOn == true) { 
    console.log(e.key) 
    } 
} 

는 바이올린입니다 (참고 : 바이올린의 윈도우 객체가 빨간색 사각형이 포함 다만 패널 - 당신이 먼저 초점을 패널에서 클릭해야 발견되는 키 입력에 대한 순서를)

내 코드가 더 간결 할 수 있다고 확신합니다.

희망이 있습니다!