addEventListener

자바스크립트에서 이벤트를 처리하는 방법중 하나인 addEventListener 메서드를 사용하여 이벤트 핸들러를 등록할 수 있다.

 

EventTarget.addEventListener('eventType', Function, [options])

 

'eventType'에는 대표적인 마우스이벤트로는 'click', 'mousemove', 'mouseover'등이 있다.

Function에는 보통 콜백함수가 들어간다.

 

document.addEventListener('click', coordinate);
function coordinate(event) {console.log(`client: ${event.clientX}, ${event.clientY}`)};

 

화면을 클릭하면 coordinate 함수가 실행되고 콘솔창에 이벤트가 발생한 화면에서의 수평, 수직좌표가 입력된다.

여기서 이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성되면서 이 객체는 이벤트 핸들러 즉 coordinate 함수의 첫 번째 인수로 전달된다. 바로 event라는 매개변수에 할당된것이다.

위에서는 event라는 이름으로 매개변수를 선언했지만, 다른 이름을 사용해도 상관없다.