TIL 21.09.30 Javascript

✍️ 이벤트핸들러 관련 개념 정리하기

모달 창 기능을 구현하면서 해당 개념을 접하게 됐다. 기능 구현에 있어 유익하므로 해당 내용을 정리해보자.

   이벤트 핸들러

'이벤트핸들러'는 특정 이벤트 (예를 들면 클릭을 한다거나 키보드 버튼을 누른다거나 하는 자바스크립트 언어에서
이벤트로 제공하는 특정 사건들)가 발생했을 때 실행되는 함수를 핸들러라고 한다. 

사용자는 이벤트핸들러가 언제 작동하는지 24시간 모니터링 할 수 없으므로 브라우저에게 위임하여 이벤트 발생 시 
핸들러가 동작하게끔 한다. 브라우저에게 함수 호출을 위임하는 것을 '이벤트 핸들러 등록'이라고 한다.

핸들러를 등록시키는 대표적인 방법으로 html 태그 안에 작성해주는 방법과 자바스크립트 코드 안에서 작성하는 방법
이 있다. 첫번째 방법인 '이벤트 핸들러 어트리뷰트'방식을 알아보기로 하자.

<button onclick = "handler()">click</button>

   이벤트 핸들러 어트리뷰트 방식

첫 번째 방법을 사용 할 경우 함수 호출문 형태로 들어가게 된다. 위와 같은 방법으로 등록하는 것을 이벤트 핸들러
어트리뷰트 방식이라고 한다. HTML 요소 어트리뷰트 중 이벤트핸들러어트리뷰트가 있고 위와 같이 작성 할 경우 아래
와 같은 함수의 구조를 'onclick'이라는 프로퍼티에 할당한다.

function onclick(event) {
  handler();
}

onclick: f onclick(event)


여러개를 등록할 수도 있다.

<button onclick ="console.log('hello'); console.log('world');>Click</button>

   이벤트 핸들러 프로퍼티 방식

이벤트핸들러프로퍼티 방식은 이벤트를 발생시킬 객체인 이벤트타겟(event target) + 이벤트타입 + 이벤트핸들러를
지정하는 방식으로 이루어진다.

이벤트타겟(button)
이벤트타입(onclick)
이벤트핸들러(function(){})

이벤트 핸들러 프로퍼티 방식의 장점으로 HTML과 자바스크립트가 뒤섞이는 문제를 해결할 수 있으나 이벤트 프로퍼티
하나에 이벤트핸들러만 바인딩(식별자와 값을 연결하는 과정)할 수 있다는 단점이 있다.

<button>click</button>

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

button.onclick = function() {
  console.log('button click');
}

   addEventListener 메서드 방식

// 구조
EventTarget.addEventListener('eventType', functionName, [useCapture]);

eventType
이벤트 종류를 나타내며 문자열이 들어간다. 이벤트핸들러프로퍼티와 달리 접두사 'on'이 붙지 않는다.

functionName
이벤트 핸들러를 전달한다.

useCapture
캡처링 또는 버블링을 지정한다(해당 개념은 추후에 다루어보기로 하자)


// 사용
앞서 배운 이벤트핸들러프로퍼티 방식에 영향을 끼치지 않는다. 앞선 방식과 'addEventListener' 방식을 함께
적용 할 경우 2번 이벤트 핸들러가 호출된다. 독립적이다. 하지만 참조가 동일한 이벤트핸들러를 하나의 event.
Target에 등록 할 경우 하나의 핸들러만 등록된다.

// 서로 다른 함수를 참조한 경우
button.addEventListener("click", function() {
  console.log('첫번째 핸들러 작동');
}
                        
button.addEventListener("click", function() {
  console.log('두번째 핸들러 작동');
}

// 서로 같은 함수를 참조한 경우
const handleClick = () => console.log("Click");

button.addEventListener("click", handleClick);
button.addEventListener("click", handleClick);

   removeEventListener

이벤트핸들러를 등록하는 것과 반대로 등록을 해제하는 방법이다. 구조는 addEventListener와 동일하다. 주의 할 점
은 이벤트핸들러를 등록한 함수와 동일한 함수이어햐 한다. 즉 이벤트핸들러를 참조할 변수나 자료구조에 핸들러가 저장
되어 있어야 한다.

//구조
button.removeEventlistener("click", handleClick);

   이벤트 객체

이벤트가 발생하면 이벤트에 관련한 다양한 정보를 담고 있는 이벤트 객체가 동적으로 생성된다. 생성된 이벤트 객체는 
이벤트 핸들러의 첫 번째 인수로 전달된다.

function handleClick(e) {
  console.log(e); // PointerEvent
}

button.addEventListener("click", handleClick);

이벤트어트리뷰트 방식으로 이벤트핸들러를 등록 할 경우 인자로 event를 넣어주어야지 '이벤트 객체'를 사용할 수 있
다.

<button onclick="handleClick(event)">click<button>