자바스크립트 DOM

수민·2022년 11월 10일
0

프론트엔드

목록 보기
39/48

이벤트

**onKeydown(KeyCode 값) : 사용자가 키보드의 키를 눌렀을 때

onKeyup(KeyCode 값) : 사용자가 키보드의 키를 눌렀다가 땠을 때

**onKeyPress(ASCII 값) : 사용자가 키보드의 키를 눌렀을 때

**

테스트를 해보면 onkeyup 은 value(텍스트)가 입력된 후 이벤트가 실행된다.

반대로 onkeydown과 onkeyPress은 value(텍스트)가 입력되기전에 이벤트가 실행된다.

또한 onKeyPress는 ASCII 값으로 사용되서 shift, ctrl 같은 키는 인식하지 못한다.

이벤트
웹페이지에서 마우스를 클릭했을 때, 키를 입력했을 때, 특정요소에 포커스가 이동되었을 때 어떤 사건을 발생시키는 것

1) 마우스 이벤트

이벤트 설명

  • click 요소에 마우스를 클릭했을 때 이벤트가 발생

  • dbclick 요소에 마우스를 더블클릭했을 때 이벤트가 발생

  • mouseover 요소에 마우스를 오버했을 때 이벤트가 발생

  • mouseout 요소에 마우스를 아웃했을 때 이벤트가 발생

  • mousedown 요소에 마우스를 눌렀을 때 이벤트가 발생

  • mouseup 요소에 마우스를 떼었을 때 이벤트가 발생

  • mousemove 요소에 마우스를 움직였을 때 이벤트가 발생

  • contextmenu context menu(마우스 오른쪽 버튼을 눌렀을 때 나오는 메뉴)가 나오기 전에 이벤트 발생

    키 이벤트

  • keydown 키를 눌렀을 때 이벤트가 발생

  • keyup 키를 떼었을 때 이벤트가 발생

  • keypress 키를 누른 상태에서 이벤트가 발생

폼이벤트

  • focus 요소에 포커스가 이동되었을 때 이벤트 발생
  • blur 요소에 포커스가 벗어났을 때 이벤트 발생
  • change 요소에 값이 변경 되었을 때 이벤트 발생
  • submit submit 버튼을 눌렀을 때 이벤트 발생
  • reset reset 버튼을 눌렀을 때 이벤트 발생
  • select input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

로드이벤트

4) 로드 및 기타 이벤트

  • load 페이지의 로딩이 완료되었을 때 이벤트 발생
  • abort 이미지의 로딩이 중단되었을 때 이벤트 발생
  • unload 페이지가 다른 곳으로 이동될 때 이벤트 발생
  • resize 요소에 사이즈가 변경되었을 때 이벤트 발생
  • scroll 스크롤바를 움직였을 때 이벤트 발생

이벤트 연결

사용자가 실제 이벤트를 발생시켰을 때 그 이벤트에 대응하여 처리하는 것 => '이벤트 핸들러'

'이벤트 핸들러'는 앞에 'on'을 붙여 주고 이벤트에 대한 동작(함수)을 처리

https://jenny-daru.tistory.com/17 (내용정리)

profile
헬창목표

0개의 댓글