JavaScript - 이벤트 핸들러, 이벤트 리스너

이벤트 핸들러 (같은 이벤트는 하나밖에 바인딩 안됨)

• 인라인(Inline) 방식: 이벤트를 HTML 요소의 속성으로 직접 지정하는 방식

<button onclick="eventHandler()">버튼</button>
<script>
  function eventHandler() {
    alert('Hello world');
  }
</script>

• 프로퍼티 방식(Property): 자바스크립트 코드에서 프로퍼티로 등록하여 사용하는 방식

<button id="eventBtn">버튼</button>
<script>
  let eventBtn = document.querySelector('#eventBtn');
  eventBtn.onclick = function () {
    alert('Hello world');
  };
</script>

이벤트 리스너 (같은 이벤트 여러개 바인딩 가능)

• addEventListener() 방식, attachEvent() 방식
• IE 9 이상에서 동작 한다. (IE 8이하에는 attachEvent() 방식을 사용해야 한다.)
• 프로퍼티로 방식은 "on"이 붙은 이벤트 타입을 사용하지만, addEventListener() 방식은 "on"이 붙지 않은 이벤트 타입을 사용한다.
• removeEventListener() 를 이용해 해당 리스너를 삭제 가능

<button id="eventBtn">버튼</button>
<script>
  let eventBtn = document.querySelector('#eventBtn');
  function testEvent(){
      alert('Hello world1');
  }
  eventBtn.addEventListener('click', testEvent);

  eventBtn.addEventListener('click', function () {
      alert('Hello world2');  // Hello world1, Hello world2 2개가 띄어짐
      
      alert(this.innerText);  // 해당 버튼 요소의 텍스트 띄움 (eventBtn)
      
      // 해당 리스너 삭제 → 다음 버튼 클릭 시 Hello world2 만 띄어짐
      eventBtn.removeEventListener('click', testEvent);  
  });
}
</script>

참고 링크 1: https://goddaehee.tistory.com/269

[JavaScript (17)] Javascript Event(1) - 기초

참고 링크 2: https://ichi.pro/ko/jseseo-ibenteu-haendeulleowa-addeventlistenerui-chaijeom-eun-mueos-ibnikka-165150920301620

JS에서 이벤트 핸들러와 addEventListener의 차이점은 무엇입니까?