자바스크립트 이벤트

이벤트

HTML 요소의 대한 어떠한 사건의 발생을 의미합니다.

이벤트 리스너

요소에서 이벤트가 발생할 경우, 해당 이벤트를 처리하는 함수 이며 이를 이벤트 핸들러 라고 합니다.
대충 우리가 알고 있는 addEventListener 가 대표적 입니다.

아래 링크를 통해 addEventListener의 대한 자세한 설명을 알 수 있습니다.
링크: [https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener]

function eventHandler() {
    console.log('event');
}
// 이벤트 등록
window.addEventListener('mousedown', eventHandler);

// 이벤트 제거
window.removeEventListener('mousedown', eventHandler);

이벤트 버블링

이벤트가 발생시, 이벤트가 부모 요소의 핸들러까지 동작하는 것.

<style>
  div {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<div onmousedown="alert(3)">
  <div onmousedown="alert(2)">
    <div onmousedown="alert(1)">
      실행
    </div>
  </div> 
</div>

해당 태그를 만든 뒤, 실행을 누르면 1 => 2 => 3 이런 식으로 부모 요소이벤트까지 발생하는 것을 볼 수 있다.

이벤트 캡처링

이벤트 발생시, 이벤트가 부모 요소에서 자식 요소로 까지 전달되어 동작하는 것.
보통 addEventListener 를 통해 캡처링을 설정하여 쓰는 경우, 발생합니다. (캡처링을 경험 해본적이 많지는 않음..)

경험

포커스에 관한 이벤트를 설정 후, 포커스 이벤트 발생시 팝업창을 띄우는 이벤트를 설정했는데,
팝업창이 계속 열리자마자 바로 닫히는 현상이 있어서 확인해보니까..
내가 기존에 사용하는 포커스 이벤트가 버블링 되어 다른 상위의 이벤트까지 실행하고 있던 것이었다.
(그 때.. 이벤트 버블링이 라는 것을 체험하면서 느낄 수 있었다....)
해결은.. stopPropagation(), preventDefault()...

stopPropagation()

이벤트 버블링, 캡처링에 있어 현재 이벤트 이후의 전파를 막습니다. (버블링은 상위를 캐처링은 하위를)

preventDefault()

현재 이벤트의 동작을 중단시킨다. 하지만, 전파는 중지시키지 않습니다...