keypress는 deprecated되었다. 최신버전에서 더 이상 지원하지않을 수 있으므로 사용하지 않는 것을 권장한다. 🍿 event.preventDefault() 🥨 keydown a눌렀을 때 a는 input창에 써지지 않는다. 🥨 keyup a가 작성된다. 키보드에서 손을 떼고 이미 브라우저에서 이벤트를 처리한 다음 keyup되었을 때 이벤트를 취소해도 취소가 되지 않는다. 🍿 KeyboardEvent.isComposing 읽기전용 속성으로, composition 세션에서 해당 이벤트가 실행되었는지 여부를 boolean 값으로 반환한다. 🥨 keydown 엔터를 눌렀을 때 특정 글자가 두 번 입력된다. 이럴땐 event.isComposing을 사용해주면 된다. 한글처럼 여러번의 keydown을 이용해 한 글자를 만들 때는 중간에 이벤트가 발생하는 경우가 있다. 글자
KeyboardEvent.shiftKey Shiftkey를 눌렀는지 안 눌렀는지 여부를 판별하기 위해 사용할 수 있는 메소드이다. 처음에 click이벤트와 shift keydown이벤트 두 개를 만들고 있었는데, 중첩해야 하는 부분이 있어 고민했었다. 이 API를 사용하면 정말 간단하게 구현할 수 있다. forEach로 모든 체크박스 element를 순회하면서 클릭했던 체크박스를 기준으로 체크해야 하는 체크박스를 toBeChecked변수로 표시하고, 만약 toBeChecked가 true라면 곧바로 checkd = true로 체크 표시한다. shiftkey를 누른 상태에서 체크박스를 클릭하면 toBeChecked가 false가 된다. > 강의 자료에서는 checkbox를 모두 선택한 뒤 클릭 이벤트를 등록한 다음, this값을 주었다. Reference https://developer.mozilla.org/en-US/docs/Web/API/Keyboard
🥁 누른 키의 audio와 key element 찾기 >HTML을 먼저 살펴보자. HTML data-key속성으로 숫자가 쓰여있는 것을 볼 수 있다. 이 숫자의 의미는 무엇일까? 🎵 keyCode 자바스크립트에서 키보드 이벤트를 받았을 때 키 값을 구별할 수 있는 코드이다. >keyCode목록을 확인해보고 싶다면 참고: https://blog.outsider.ne.kr/322 https://keycode.info/ 에서도 누른 키의 keyCode를 바로바로 확인해볼 수 있다. (아래 이미지 참고) >자, data-key로 keyCode를 설정해두었다는 것을 알 수 있다. 키보드를 누를때마다 해당하는 키에 이벤트를 등록해야 하기 떄문이다.