event

문자 키를 눌렀을 때만 발생하던 keypress 이벤트가 deprecated 됐기 때문에 keydown 이나 keyup 이벤트를 통해 문자 입력 이벤트를 감지해야 한다.이때 keydown과 keyup 사이에는 차이점이 조금 존재하기 때문에 쓰임새에 맞춰 적절한 이벤트를 선택하는 것이 필요하다.  keydown키를 눌렀을 때 발생모든 키문자, 숫자, 특수 문자, enter 키를 눌렀을 때는 연속적으로 발생그 외의 키는 한 번만 발생 keyup누르고 있던 키를 놓았을 때 한 번만 발생모든 키 목적검색 입력 값만 따로 추출 이때 KeyboardEvent의 key 프로퍼티를 활용하고자 했다. KeyboardEvent: key property - Web APIs | MDNThe KeyboardEvent inter..

1) 이벤트 드리븐 프로그래밍이벤트가 발생했을 때 호출될 함수를 이벤트 핸들러라 하고, 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 한다. “언제 함수를 호출해야 하는가”→ 함수를 언제 호출할지 알 수 없으므로 개발자가 명시적으로 함수를 호출하는 것이 아니라 브라우저에게 함수 호출을 위임하는 것이다. 프로그램의 흐름을 이벤트 중심으로 제어하는 프로그래밍 방식을 이벤트 드리븐 프로그래밍이라 한다.    2) 이벤트 타입마우스 이벤트이벤트 타입 이벤트 발생 시점click마우스 버튼을 클릭했을 때dbclick마우스 버튼을 더블클릭했을 때mousedown마우스 버튼을 눌렀을 때mouseup누르고 있던 마우스 버튼을 놓았을 때mousemove마우스 커서를 움직였을..

타입스크립트를 사용하다보면 참 이런 이벤트들, 외부 라이브러리들 타입 주기가 참 어렵다. @input이 반환하는 event의 타입은 InputEvent 이다. InputEvent → UIEvent → Event 순으로 타고타고 찾아가다보면 target을 확인할 수 있다. 이때 target의 타입은 EventTarget 또는 null이다. 황당하고 놀랍게도 EventTarget에는 value가 없다….. (메서드만 가지고 있더라) const target = e.target as EventTarget 그래서 만약 이렇게 줘버리면 또 target.value 를 쓸 수 없게 된다. EventTarget - Web API | MDN EventTarget 인터페이스는 이벤트를 수신할 수 있고, 수신한 이벤트에 대한..