[JavaScript] 이벤트

🪁  이벤트

• 어떤 동작이나 상태 등의 사건을 발생하는 것을 의미
• html dom 요소들은 이벤트가 발생했을 때 웹 브라우저에서 이벤트가 발생한 걸 알아챌 수 있도록 이벤트 신호를 발생
• 자바스크립트는 발생한 이벤트의 반응을 해서 어떤 동작을 수행할 수 있음
• 해당 이벤트를 감지할 수 있는 EventListener를 EventHandler를 지정 = 이벤트 리스너를 등록한다

🪁  addEventListener()

• 이벤트 리스너를 등록하기 위해 메소드 사용
• 메소드의 첫 번째 인자에는 이벤트의 종류를 문자열로 지정
• 두 번째 인자에는 이벤트가 발생했을 때 실행시킬 EventHandler 함수를 전달 해주어야 함
• 내부에 직접 작성하여도 됨
• 함수를 작성하여 함수를 인자로 전달하는 방식으로 작성
• EventHandler함수는 이벤트가 발생할 때 브라우저에서 생성하는 이벤트라는 객체를 인자로 받기 때문에 이벤트라는 인자를 사용 가능
• PointerEvent라는 객체가 출력이 되고 있고 객체 안에는 이벤트와 관련된 정보가 들어있는 것을 알 수 있음

const button = document.querySelector('button');

function handler(event){
    console.log(event);
}

button.addEventListener('click', handler);




const button = document.querySelector('button');

function handler(event){
    console.log('♣');
}

button.addEventListener('click', handler);

🪁  removeEventListener()

• EventListener 삭제
• 클레스의 이름으로 가지고 옴
• 위와 동일한 방법으로 이벤트 리스너 등록
• 등록한 EventListener를 삭제할 때는  removeEventListener라는 메소드 사용
• 첫 번째 인자에는 이벤트의 종류를 명시
• 두 번째 인자에도 등록했던 Handle를 전달
• 등록한 EventHandler가 동작을 잘하고 있었는데  버튼을 누르고 다시 누르면 등록한 EventListener가 삭제되어  더 이상 이모지가 출력되지 않음

const button = document.querySelector('button');
const removeButton = document.querySelector('.remove');

function handler(event) {
    console.log('♥');
}

function removeHandler(event) {
    button.removeEventListener('click', handler);
}

button.addEventListener('click', handler);
removeButton.addEventListener('click', removeHandler);