이벤트

이벤트는 사용자 액션 또는 브라우저에서 발생하는 사건을 말한다.

개념

유저에 의해 어떤 상태가 변할 때, 이벤트가 발생한다.
그래서 이벤트는 유저와 상호작용할 수 있는 브라우저가 관리해야 한다.

마우스 클릭, 키보드 입력 등 과 같이 이벤트가 발생할 때, 브라우저는 이를 알아차리고 필요한 함수를 호출한다.
이때 호출되는 함수를 이벤트 핸들러라 한다.

이벤트 핸들러 등록

이벤트 핸들러는 브라우저에 등록된다.
그리고 브라우저는 적재적소에 이벤트 핸들러를 호출한다.
등록 방법은 크게 3가지가 있다.

• 이벤트 핸들러 attribute 방식
  함수 호출문을 할당해야 한다.
  

  내부적으로는 아래와 같이 변환된다.
  

  어차피 하나의 몸체로 전환되기 때문에 아래와 같이 적용할 수도 있다.

  

  

  
  

• 이벤트 핸들러 property 방식
  함수를 바인딩하면 이벤트 핸들러로 등록된다.
  

  

  이벤트 핸들러 attribute 방식과 내부적으로 동일하게 동작한다.
  하지만 하나의 이벤트 핸들러만 바인딩할 수 있다는 차이가 있다.

  

  

  attribute 방식은 생성한 하나의 몸체를 이벤트 타입에 바인딩하지만, property 방식은 함수 자체를 이벤트 타입에 바인딩하기 때문에 발생하는 차이다.

  
  

• addEventListener 방식
  EventTarget.prototype.addEventListener 를 사용하는 방식이다.

  

  

  addEventListener는 이벤트 핸들러 property 방식과 다르게 동작한다.
  그래서 아래의 경우 둘다 호출된다.
  

  또한, 1개 이상의 이벤트 핸들러를 등록할 수 있다.

  

이벤트 핸들러 제거

• 이벤트 핸들러 property 방식
  null을 할당하면 된다.

  

  
  

• addEventListener 방식
  removeEventListener를 사용하면 된다. 단, 이는 기명 함수일 때만 적용된다.

  

이벤트 전파

이벤트는 이벤트 타깃을 기준으로 DOM 트리를 통해 전파된다.

apple 을 눌렀다고 가정하자. 그럼 이벤트는 아래처럼 전파된다.

이벤트 핸들러 attribute/property 방식은 캡쳐링과 이벤트 타깃만 감지할 수 있다.
반면, addEventListener는 전부 감지할 수 있다.

참고로 addEventListener는 버블링이 default다.
캡쳐링으로 바꾸려면 세 번째 인수에 true를 전달해야 한다.

이벤트 위임

만약 li 가 늘어나면 어떻게 해야 할까?
늘어난 만큼 이벤트 핸들러를 등록해야 할까?
그건 너무 비효율적이다. 이때 우린 이벤트 위임을 해야 한다.

li 가 아니라 ul 에 이벤트 핸들러를 등록했다.
여기서 target 에는 이벤트 타깃인 li 가 바인딩되고, currentTarget 에는 이벤트 핸들러가 등록된 ul 이 바인딩된다.