[JavaScript] 이벤트 핸들러와 Javascript Event

이벤트 핸들러란?

특정 요소에서 발생하는 이벤트를 처리하기 위해 이벤트 핸들러(Event Handler)라는 함수를 만들어 바인딩하는 것으로 이벤트 핸들러가 연결된 특정 요소에서 지정된 타입의 이벤트가 발생하면 해당 함수를 실행한다.

 

방법 1>

// 등록
elem.addEventListener(event, handler)

// 삭제
elem.removeEventListener(event, handler)

 

방법 2>

// 등록
elem.attachEvent('on이벤트명'; function(){
});

// 삭제
elem.detachEvent('on이벤트명'; function(){
});

See the Pen Untitled by 도그리 (@yafsfbms-the-reactor) on CodePen.

 

 

▶ 마우스 이벤트

이벤트 타입	설명
mousedown	마우스 버튼을 누르는 순간
mouseup	마우스 버튼을 눌렀다 떼는 순간
click	왼쪽 버튼을 클릭한 순간
dblclick	왼쪽 버튼을 빠르게 두 번 클릭한 순간
contextmenu	오른쪽 버튼을 클릭한 순간
mousemove	마우스를 움직이는 순간
mouseover	마우스 포인터가 요소 위로 올라온 순간
mouseout	마우스 포인터가 요소에서 벗어나는 순간
mouseenter	마우스 포인터가 요소 위로 올라온 순간 (버블링이 일어나지 않음)
mouseleave	마우스 포인터가 요소에서 벗어나는 순간 (버블링이 일어나지 않음)

 

▶ 키보드 이벤트

이벤트 타입	설명
keydown	키보드의 버튼을 누르는 순간
keypress	키보드의 버튼을 누르는 순간 - 물리키 : 'a', '1' 등의 출력이 가능한 키에서만 동작  - Shift, Esc 등의 키에는 반응하지 않음
keyup	키보드의 버튼을 눌렀다 떼는 순간

 

▶ 폼(Form) 이벤트

이벤트 타입	설명
input	값이 입력되는 순간
change	입력된 값이 바뀌는 순간
select	입력 양식의 하나가 선택되는 순간
submit	Form을 전송하는 순간
reset	리셋 버튼을 클릭할 때
cut	폼 필드의 콘텐츠를 잘라내기 했을 때
copy	폼 필드의 콘텐츠를 복사했을 때
paste	폼 필드의 콘텐츠를 붙여넣을 때

 

▶ 포커스 이벤트

이벤트 타입	설명
focus	요소에 포커스가 되는 순간 (버블링이 일어나지 않음)
focusin	요소에 포커스가 되는 순간
focusout	요소로부터 포커스가 빠져나가는 순간
blur	요소로부터 포커스가 빠져나가는 순간

 

▶ UI 이벤트

이벤트 타입	설명
load	웹 페이지의 로드가 완료되었을 때
abort	이미지의 로딩이 중단되었을 때 이벤트 발생
unload	웹 페이지가 언로드 될 때(새로운 페이지를 요청한 경우 )
error	브라우저가 자바스크립트 오류를 만났거나 요청한 자원이 없는 경우
resize	브라우저의 창 크기를 조정했을 때
scroll	스크롤 바가 움직일 때

---

 

https://abc1211.tistory.com/201

[자바스크립트 기초 ]이벤트의 종류와 개념 1

 

https://jenny-daru.tistory.com/17

JavaScript - 이벤트(Event), 이벤트의 종류, 이벤트 연결