[javascript] 이벤트 타입 종류 정리

1. 마우스 이벤트

• click : 마우스 버튼을 클릭했을 때
• dbclick: 마우스 버튼을 더블클릭했을 때
• mousedown: 마우스 버튼을 눌렀을 때
• mouseup: 누르고 있던 마우스 버튼을 놓았을 때
• mousemove: 마우스 커서를 움직였을 때
• mouseenter: 마우스 커서를 HTML 요소 안으로 이동했을 때(버블링X)
• mouseover: 마우스 커서를 HTML 요소 안으로 이동했을 때 (버블링O)
• mouseleave: 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링x)
• mouseout: 마우스 커서를 HTML 요소 밖으로 이동했을 때(버블링O)

버블링에 대한 것은 아래 링크를 참고

https://ko.javascript.info/bubbling-and-capturing

버블링과 캡처링

 

2. 키보드 이벤트

• keydown: 모든 키를 눌렀을 때 발생한다.(문자, 숫자, 특수 문자, 엔터키를 눌렀을 때 연속적으로 발생. 다른 키를 눌렀을 때는 한번만 발생)
• keydown: 누르고 있던 키를 놓았을 때 한 번만 발생한다.

3. 포커스 이벤트

• focus: HTML 요소가 포커스를 받았을 때 (버블링X)
• blur: HTML 요소가 포커스를 잃었을 때 (버블링X)
• focusin: HTML 요소가 포커스를 받았을 때 (버블링o)
• focusout: HTML 요소가 포커스를 잃었을 때 (버블링o)

4. 폼 이벤트

• submit: form 요소 내의 input, select 입력 필드에서 엔터 키를 눌렀을 때, form 요소 내의 submit 버튼을 클릭했을 때

5. 값 변경 이벤트

• input: input 요소에 값이 입력 되었을 때(text, checkbox, radio, select, textarea)
• change: input, select, textarea 요소의 값이 변경되었을 때

6. 뷰 이벤트

• scroll: 웹페이지 또는 HTML 요소를 스크롤 할 때 연속적으로 발생.
• resize: 브라우저 윈도우의 크기를 리사이즈할 떄 연속적으로 발생(window 객체에서만 발생)