EverGiver

이벤트 본문

Front-End (웹)/자바스크립트

이벤트

친절한개발초보자 2022. 2. 15. 17:35
728x90
이벤트

 

이벤트는 웹 브라우저나 사용자가 행하는 어떤 동작을 말한다.

  • 마우스 이벤트
    - 마우스를 이용해서 버튼이나 휠 버튼을 조작할 때 발생한다.
    종류 설명
    click 사용자가 HTML 요소를 클릭할 때 이벤트가 발생한다.
    dbclick 사용자가 HTML 요소를 더블클릭할 때 이벤트가 발생한다.
    mousedown 사용자가 요소 위에서 마우스 버튼을 눌렀을 때 이벤트가 발생한다.
    mousemove 사용자가 요소 위에서 마우스 포인터를 움직일 때 이벤트가 발생한다.
    mouseover 마우스 포인터가 요소 위로 옮겨질 때 이벤트가 발생한다.
    mouseout 마우스 포인터가 요소를 벗어날 때 이벤트가 발생한다.
    mouseup 사용자가 요소 위에 놓인 마우스 버튼에서 손을 뗄 때 이벤트가 발생한다.
  • 키보드 이벤트
    - 키보드에서 특정 키를 조작할 때 발생한다.
    종류 설명
    keydown 사용자가 키를 누르는 동안 이벤트가 발생한다.
    keypress 사용자가 키를 눌렀을 때 이벤트가 발생한다.
    keyup 사용자가 키에서 손을 땔 때 이벤트가 발생한다.
  • 문서 로딩 이벤트
    - 서버에서 웹 문서를 가져오거나 문서를 위아래로 스크롤하는 등 웹 문서를 브라우저 창에 보여 주는 것과 관련된 이벤트
    종류 설명
    abort 문서가 완전히 로딩되기 전에 불러오기를 멈췄을 때 이벤트가 발생한다.
    error 문서가 정확히 로딩되지 않았을 때 이벤트가 발생한다.
    load 문서 로딩이 끝나면 이벤트가 발생한다.
    resize 문서 화면 크기가 바뀌었을 때 이벤트가 발생한다.
    scroll 문서 화면이 스크롤되었을 때 이벤트가 발생한다.
    unload 문서에서 벗어날 때 이벤트가 발생한다.
  • 폼 이벤트
    - 폼은 로그인, 검색, 게시판, 설문 조사처럼 사용자가 입력하는 모든 요소를 가리킨다. 
    종류 설명
    blur 폼 요소에 포커스를 잃었을 때 이벤트가 발생한다.
    change 목록이나 체크 상태 등이 변경되면 이벤트가 발생한다.
    <input>, <select>, <textarea> 태그에서 사용한다.
    focus 폼 요소에 포커스가 놓였을 때 이벤트가 발생한다.
    <label>, <select>, <textarea>, <button> 태그에서 사용한다.
    reset 폼이 리셋되었을 때 이벤트가 발생한다.
    submit submit 버튼을 클릭했을 때 이벤트가 발생한다.

 

이벤트 처리기

 

웹 문서에서 이벤트가 발생하면 처리하는 함수를 이벤트 처리기 또는 이벤트 핸들러라고 한다.

  • 이벤트를 처리하는 가장 기본적인 방법은 이벤트가 발생한 HTML 태그에 이벤트 처리기를 직접 연결하는 것이다.
  • 이벤트 처리기의 기본 형식은 먼저 HTML 태그 안에서 'on' 다음에 '이벤트명'을 붙여서 속성 이름을 만들고, 그다음에 실행할 이벤트 처리기의 함수명을 작성한다.
    <태그 on이벤트명 = "함수명">​

 

728x90

'Front-End (웹) > 자바스크립트' 카테고리의 다른 글

내장 객체  (0) 2022.02.17
객체  (0) 2022.02.16
함수 표현식  (0) 2022.01.29
재사용할 수 있는 함수  (0) 2022.01.29
함수  (0) 2022.01.29
Comments