6.05 Dev.Feedback (이벤트 정리)

Event는 우리가 웹페이지를 사용할 때, 발생할 수 있는 거의 모든 상황이 벌어졌을 때 코드를 실행시켜주는 Web API이다.

 

Event는 우리가 웹페이지를 사용할 때, 발생할 수 있는 거의 모든 상황은 아래 예시를 확인해보면 된다.

물론 이 상황들 보다 더 다양한 상황들이 있을 수 있다.

 

• mouse click
• keyboard
• resizing window
• close window
• page loading
• form submission
• video is being played
• error

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

Event reference | MDN

아래 MDN에서 정확히 확인해볼 수 있다.

 

이런 다양한 이벤트를 우리가 핸들링 할 수는 없다.

따라서 우리가 컨트롤하고 싶은 요소만 골라 핸들링을 할 수 있는 방법이 있는데,

바로 이 컨트롤 하고 싶은 요소에 Event Handler를 등록하면 된다.

 

이렇게 Event Handler를 등록하게 되면, 만일 이 요소에서 클릭을 하는 이벤트가 발생하게 되면

우리가 등록한 Event Handler를 호출하고 event라는 오브젝트를 만들어서

이 이벤트 오브젝트를 분석하여 그 정보들을 우리가 등록한 Event Handler 콜백함수에 전달해준다.

 

Event Handler는 EventTarget으로 모든 엘리먼트를 선택할 수 있다.

 

 

EventTarget은 이벤트를 받을 수 있으며, 이벤트에 대한 수신기(listener)를 가질 수 있는 객체가 구현하는 DOM 인터페이스인데,

총 세 가지 API가 존재한다.

 

EventTarget.addEventListner()

특정 이벤트 유형의 이벤트 처리기를 등록한다.

EventTarget.removeEventListner()

기존 EventTarget에 설정한 이벤트의 수신기를 제거한다.

EventTarget.dispatchEvent()

EventTarget에 인공적으로 이벤트를 발생시킨다.

 

사용방법은 이렇다.

.addEventListner('발생할 이벤트', 그 이벤트가 벌어졌을 때, 실현될 함수);
const eventName = 그 이벤트가 벌어졌을 때, 실현될 함수를 넣고 실현될 함수를 변수로 대체할 수도 있다.

document.querySelector('h1').addEventListener('click', () => {console.log('clicked!')});

const eventName = () => {console.log('clicked')};
document.querySelctor('h1').addEventListener('click', eventName);

.dispatchEvent( new Event('발생할 이벤트'))

document.querySelector('h1').dispatchEvent( new Event('click'));
이걸 실행하면, console.log가 실행되어 콘솔창에 clicked가 찍히는 것이 보인다.

.removeEventListner('기존에 등록한 이벤트',그 이벤트가 벌어졌을 때, 실현될 함수);
document.querySelctor('h1').removeEventListener('click', eventName);

이렇게 되면, 이벤트가 삭제된 것을 볼 수 있다.

 

이벤트 객체 추가 정리