[JS] 이벤트(Event)

Event Object(이벤트 객체)란 무엇인가?

이벤트 객체란, 이벤트를 발생시킨 요소와 발생한 이벤트에 대한 정보를 제공하는 것을 말한다. 이벤트가 발생하면, 이벤트 객체는 동적으로 생성되어, 이벤트 핸들러에 인자로 암묵적으로 전달된다.

 

1. 이벤트 추가하기 - addEventListener()

객체에 이벤트를 추가하려면 addEventListener() 메소드를 사용합니다.

element.addEventListener(type, eventListener);

- type : 이벤트 타입

- eventListener : 이벤트가 발생했을 때 실행할 함수

 

2. 이벤트 제거하기 - removeEventListener()

이벤트를 삭제할 때는 removeEventListener() 메소드를 사용합니다.

element.removeEventListener(type, eventListener);

- type : 삭제할 이벤트 타입

- eventListener : 삭제할 이벤트 리스터 (addEventListener()의 2번째 파라미터로 전달된 함수)

 

 

1) 마우스 이벤트

이벤트   설명

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

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

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

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

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

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

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

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

 

 2) 키 이벤트

이벤트   설명

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

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

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

 

 3) 폼 이벤트

이벤트   설명

focus     요소에 포커스가 이동되었을 때 이벤트 발생

blur      요소에 포커스가 벗어났을 때 이벤트 발생

change  요소에 값이 변경 되었을 때 이벤트 발생

submit  submit 버튼을 눌렀을 때 이벤트 발생

reset     reset 버튼을 눌렀을 때 이벤트 발생

select    input이나 textarea 요소 안의 텍스트를 드래그하여 선택했을 때 이벤트 발생

focusin  대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트를 발생.

focusout 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트 발생.

 

 4) 로드 및 기타 이벤트

이벤트   설명

load      페이지의 로딩이 완료되었을 때 이벤트 발생

abort    이미지의 로딩이 중단되었을 때 이벤트 발생

unload  페이지가 다른 곳으로 이동될 때 이벤트 발생

resize    요소에 사이즈가 변경되었을 때 이벤트 발생

scroll     스크롤바를 움직였을 때 이벤트 발생