[자바스크립트] Event의 종류( addEventListener, removeEventListener 메서드)

 

 

 

 addEventListener으로 등록할 수 있는 이벤트 중 자주 쓰이는 이벤트 목록

 

이벤트 명	설명
change	변동이 있을 때
click	마우스를 클릭 시
focus	포커스를 얻었을 때
keydown	키보드 아무거나 눌렀을 때
keyup	키보드에서 손을 땟을 때
load	로드가 완료 되었을 때
mousedown	마우스를 클릭 했을 때
mouseout	마우스가 특정 객체 밖으로 나갔을 때
mouseover	마우스가 특정 객체 위로 올려졌을 때
mousemove	마우스가 움직였을 때
mouseleave	마우스가 연결된 요소에서 이동했을 때
mouseup	마우스에서 손을 땟을 때
select	option 태그 등에서 선택을 했을 때
resize	화면의 크기가 조정되었을 때 (element를 window로 해야함)
contextmenu	마우스 오른쪽 버튼을 클릭

[출처]

chlolisher.tistory.com/10

developer.mozilla.org/en-US/docs/Web/Events

 

 

※ resize를 사용할때에는 왜 element를 window로 해야할까?

→ 화면 크기의 조절 대상이 텍스트나 다른 특정 element가 아니고 window 객체이기 때문?

 

 

 

※ 함수를 바로 호출하고 싶지 않을 때에는 함수이름을 쓰고 괄호( )를 붙이지 않는다.

 

  element.removeEventListener( ' 이벤트종류 ' ,  ' 함수이름' );

 

 

예제)
function handleResize(){
console.log("I have been resized")}

resize
window.addEventListener("resize", handleResize);

handleResize 를 할 때 , 뒤에 ()를 붙이지 않는다.

→ ( )를 붙이면 함수가 바로 호출되기 때문

→ ( )를 붙이면 화면의 크기가 조절되지도 않았는데 바로 handleResize 함수가 호출되면서 실행됨