[Javascript] 이벤트 핸들러 등록

• 이벤트 핸들러$_{event \space handler, \space event \space listener}$는 이벤트가 발생했을 때 브라우저에 호출을 위임한 함수
• 이벤트가 발생하면 브라우저에 의해 호출될 함수가 이벤트 핸들러
  • 이벤트가 발생했을 때 브라우저에게 이벤트 핸들러의 호출을 위임하는 것을 이벤트 핸들러 등록이라 함

 

인라인 이벤트 핸들러

• HTML 요소에 직접 onclick등의 속성으로 지정
• 간단하지만 HTML과 Javascript 코드가 섞여 유지보수가 어려울 수 있음
  • 관심사가 다르므로 혼재하는 것보다 분리하는 것이 좋음 
  • function handleClick() { console.log('인라인 이벤트; 버튼 클릭됨'); }
• 모던 자바스크립트에서는 이 방식을 사용하는 경우가 있음
  • CBD 방식의 Angular / React / Svelte / Vue.js는 인라인 이벤트 핸들러 방식으로 처리
  • 뷰를 구성하기 위한 구성 요소로 보기 때문에 관심사가 다르다고 생각하지 않음 
  • { /* React */} <button onClick={handleClick}>Save</button>

 

 

프로퍼티로 이벤트 핸들러 할당

• Javascript에서 요소의 onclick등의 프로퍼티에 함수 할당
• 간단하지만 하나의 이벤트에 하나의 핸들러만 할당할 수 있음 
• const $btn2 = document.getElementById('btn2'); $btn2.onclick = function() { console.log('프로퍼티 핸들러; 버튼 클릭됨'); }

 

 

addEventListener 메서드 방식

• addEventListener를 통해 이벤트 핸들러 등록할 수 있음

  const $button = document.querySelector('button');
  $button.addEventListener('click', function() {
    console.log('버튼 클릭');
  });

 

 

파라미터

• eventType
  • 리스너를 등록할 이벤트 타입 나타내는 문자열
  • 이벤트 핸들러 프로퍼티 방식과는 달리 on 접두사를 붙이지 않음
• listener
  • 이벤트가 발생했을 때 호출될 함수
• options
  • 이벤트 캐치 할 이벤트 전파 단계 지정
    • 생략, false: 버블링 단계에서 이벤트 캐치
    • true: 캡처링 단계에서 이벤트 캐치