document keydown event

오래간만의 front end 작업

영상에 들어가는 controller의 기능을 만들고 css까지 마치고 나서 유튜브처럼 영상을 클릭하거나 스페이스바를 눌렀을때 영상을 재생하고 멈추는 기능을 추가해보라는 코드첼린지가 있었다. 다행히 클릭은 아주 쉬웠다.

video element를 getElementById를 통해 받아와서 click이벤트를 만들었다.

그리고 클릭할때 비디오가 멈춰있으면 재생시키고, 재생되고 있으면 멈추는 함수를 만들었다.

여기서 paused()는 getter이고 pause()는 setter이다.

그리고 스페이스바를 눌렀을때 이벤트를 찾아보니 keydown이라는 이벤트를 찾아서 등록해줬다.

const handleKeydown = (event)=>{console.log(event)}를 찍어보니 code라는 키에 내가 누르는 키의 이름이 들어갔다. 

스페이스 바를 누르면 code:Space 가 찍혔다. 

내가 누른 키가 Space면 재생시키고 정지시키는 코드이다. 당연히 잘 될줄 알았는데 document에 이벤트를 등록하다보니

웹페이지가 약간 밑쪽으로 스크롤되는 기능과 동시에 함수가 실행됐다. 

input type submit 에서 클릭하면 페이지가 새로고침 되는것처럼 space도 default기능이 있는 것 같다. 그래서 실행,정지 코드로 넘어가기 전에 preventDefault를 실행시키고 넘어갔다. 코드 첼린지 끝!