이벤트 리스너 등록 방법

1. 객체나 요소에 property로 등록한다.
2. 객체나 요소에 메소드를 이용해 등록한다.

onevent property

• 이벤트 앞에 on을 붙여 이름을 지정한다.
• 특정 DOM 객체에 하나의 이벤트 핸들러만 등록할 수 있다.

btn.onclick = function() {
  console.log('버튼이 클릭되었습니다.')
}

• 함수명을 지어서 사용할 수도 있다.

function btnClick() {
  console.log('버튼이 클릭되었습니다.')
}

btn.onclick = btnClick; 
// 이벤트 핸들러를 등록할 때에는 함수 실행이 아닌 함수 그 자체를 등록해야 한다.

addEventListener()

• addEventListener() 메소드를 사용한다.
• 같은 요소의 같은 이벤트에 이벤트 리스너를 여러 개 등록할 수 있다.

EventTarget.addEventListener(type, listener)
: 대상이 지정한 유형의 이벤트를 수신할 때마다 호출할 함수를 설정하는 메소드

• type : 수신할 이벤트 유형
• listener : 지정한 이벤트를 수신할 객체 또는 JavaScript 함수
  더 많은 이벤트 유형 - event reference MDN

function btnClick() {
  console.log('버튼이 클릭되었습니다.')
}

btn.addEventListener('click', btnClick); 
// 이벤트 핸들러를 등록할 때에는 함수 실행이 아닌 함수 그 자체를 등록해야 한다.

• addEventListener() 내부에, 익명 함수를 넣고 모든 코드를 넣을 수도 있다.

btn.addEventLister('click', function() {
  console.log('버튼이 클릭되었습니다.')
});

EventTarget.removeEventListener(type, listener)
: addEventListener()로 등록한 이벤트 리스너를 제거하는 메소드

btn.removeEventListener('click', btnClick);