본문 바로가기

Javascript

자바스크립트 이벤트 추가 addEventListener

window, document, element 등의 EventTarget에 특정 이벤트가 발생할 때 사용하는 EventTarget 메서드 중 하나입니다.

EventTarget 메서드에는 addEventListener()removeEventListener()등이 있습니다.

addEventListener ( )

선택한 오브젝트에 이벤트를 추가합니다.

기본 구문 Syntax

1. 기본 형태는 다음과 같습니다. EventTarget는에 window, document 또는 돔 element 등 다양한 오브젝트를 선택할 수 있으며 있습니다. 그리고 EventTarget 자리에는 이벤트의 타겟, 즉 발생할 이벤트의 대상이 될 오브젝트가 들어갑니다. 파라미터에는 이벤트의 종류와 실행할 함수가 들어갑니다.

EventTarget.addEventListener( 파라미터 );

2. 정리하면, 선택한 오브젝트에 선택한 이벤트유형이 발생하면 내가 만든 함수를 실행합니다.

선택한오브젝트.addEventListener(이벤트유형, 내가만든함수);

예를 들어, window 창에 전체 페이지와 그 안에 속한 모든 요소들이 로딩되면 myFunction이라는 함수를 실행합니다.

window.addEventListener("load", myFunction);

 

Event type

1. 이벤트 종류

2. 자주 사용하는 마우스 이벤트

click : 마우스 버튼을 클릭하면 함수를 실행합니다.

mouseover : 마우스를 선택한 요소 위에 올렸을 때 함수를 실행합니다.

Event property

Event.currentTarget