JS addEventListener 사용법 ( + capturing, bubbling )

addEventListener()

addEventListener()는 지정된 요소에 하나 이상의 이벤트 핸들러를 등록할 수 있습니다.

 

removeEventListener()

removeEventListener()는 addEventListener()로 연결된 이벤트 핸들러를 제거합니다.

이때 주의할 점은 반드시 addEventListener()를 사용했을 때와 마찬가지로 매개 변수를 설정해주어야 한다는 점과 addEventListener()과 같은 단계에 있어야 한다는 점입니다.

 

---

element.addEventListener(event, function, useCapture)

1. element

document, window 같이 이벤트를 적용할 요소입니다.

 

2. event

첫 번째 매개변수로 이벤트 유형을 나타냅니다. 대표적인 유형은 다음과 같습니다.

• click – 마우스버튼을 클릭
• mouseover – 마우스를 요소 위에 올린 상태
• mouseout – 마우스가 요소 밖으로 벗어날 때
• mousedown – 마우스 버튼을 클릭하고 떼지 않은 상태일 때, HTML요소를 드래그할 때 사용할 수 있다.
• mouseup – 마우스 버튼을 떼는 그 순간, 드래그한 HTML요소를 어딘가에 놓을 때 사용할 수 있다.
• mousemove – 마우스가 움직일 때 발생. 마우스커서의 현재 위치를 계속 기록하는 것에 사용할 수 있다.
• focus – 요소에 포커스가 갔을 때 발생
• blur – 요소가 포커스에서 벗어났을 때 발생
• keydown – 키를 누를 때 발생
• keypress – 키를 누르는 순간에 발생 + 키를 누르고 있는 동안 계속해서 발생
• keyup – 키를 눌렀다가 떼는 순간에 발생한다.
• load – 웹페이지에서 사용할 모든 파일의 다운로드가 완료되었을때 발생
• resize – 브라우저 창의 크기를 조절할때 발생
• scroll – 스크롤바를 드래그하거나 키보드(up, down)를 사용하거나 마우스 휠을 사용해서 웹페이지를 스크롤할 때 발생, 페이지에 스크롤바가 없다면 이벤트는 발생하지 않다.
• unload – 링크를 클릭해서 다른 페이지로 이동하거나 브라우저 탭을 닫을 때 혹은 브라우저 창을 닫을 때 이벤트 발생
• change – 폼 필드의 상태가 변경되었을 때 발생, 예시: 라디오 버튼을 클릭하거나 셀렉트 박스에서 값을 선택하는 경우

 

3. function

지정한 이벤트가 발생했을 때 호출하는 함수

 

4. useCapture

이벤트 전파방식을 선택할 수 있는 매개변수 입니다.

• true - 캡처링 방식
• false - 버블링 방식 (Default)

Capturing과 Bubbling에 대한 자세한 설명은 아래 이벤트 흐름 설명한 후 바로 이어서 하겠습니다.

 

---

이벤트 흐름

이벤트 핸들러가 호출되었을 때 진행되는 이벤트 흐름엔 3가지 단계가 있습니다.

1. 캡처링 단계 - 이벤트가 하위 요소로 전파되는 단계
2. 타깃 단계 - 이벤트가 타깃 요소에 전달되는 단계
3. 버블링 단계 - 이벤트가 상위 요소로 전파되는 단계

출처: https://www.w3.org/TR/DOM-Level-3-Events/

 

위 이미지는 <td> 태그를 클릭하여 이벤트가 발생한 경우 이벤트 흐름도 입니다.

1. <td> 태그를 클릭하면 이벤트가 최상위 요소에서 하위 요소로 전파됩니다. (캡처링 단계)
2. 이벤트가 <td> 태그에 전달되어 실행됩니다. (타깃 단계)
3. 다시 이벤트가 타깃 요소에서 상위 요소로 전달됩니다. (버블링 단계)

이렇게 흐름이 전파되는 과정에서 해당 요소에 이벤트 핸들러가 등록되어 있다면, 해당 요소 이벤트도 실행됩니다.

 

 

캡처링(Capturing)

이벤트 전파 방식은 Default로 버블링이 설정되어 있기 때문에 캡처링으로 설정하기 위해서 별도의 옵션을 설정해주어야 합니다.

element.addEventListener(event, function, useCapture)

addEventListener() 메서드의 세 번째 매개변수의 값을 true로 지정하면 해당 이벤트 타겟은 캡처링을 통해 이벤트를 전파받아 호출하게 됩니다.

참고: 실제 실무에서는 캡처링 방식보다 버블링 방식을 선호한다고 합니다.

 

 

버블링(Bubbling)

한 요소(타깃)에서 이벤트가 발생하면, 그 요소의 상위 요소의 이벤트도 같이 발생되는 이벤트 전파를 말합니다.

JS는 addEventListener() 함수를 사용하여 이벤트 핸들러를 등록할 때 Default로 버블링 전파 방식이 설정되어 있습니다.

 

---

이벤트 전파 중지하는 법

타깃 요소를 클릭하였을 때 부모 요소 이벤트를 발생시키고 싶지 않는 경우가 궁금할 것입니다.

 

stopPropagation()

해당 메서드를 호출하면, 이벤트 전파를 중지 시킬 수 있습니다.

 

stopImmediatePropagation()

이벤트 전파와, 형제 이벤트 실행을 중지 시킬 수 있습니다.

예를 들어 한 요소에 이벤트 핸들러가 여러 개 등록되어 있을 때 하나의 이벤트가 발생시키고 나머지 이벤트 발생 중지를 시킬 수 있습니다.

 

target 이용 방법

e.target은 DOM element 객체이고, tagName, id, textContent 등 다양한 속성 값을 이용하여 이벤트 전파 조건을 설정할 수 있습니다. 아래는 input 태그가 타깃인 경우에만 body 태그에 있는 이벤트 핸들러가 호출되는 코드입니다.

      document.body.addEventListener("click", event => {
        if (event.target.tagName === "INPUT") {
          console.log("input 태그가 타깃인 경우에만 해당 이벤트 실행");
        }
      });

 

preventDefault()

이벤트 사용을 막아주는 함수입니다.

예를 들어 <a> 태그를 눌러 링크를 통해 다른 웹사이트로 이동하거나 submit을 한 후에 사이트를 갱신하고 싶지 않을 때, 체크 박스를 체크 안되게 하고 싶을 때 등, 기본으로 정의된 이벤트를 작동하지 못하게 하는 함수입니다. 때문에 자동으로 형제 이벤트 실행, 이벤트 전파도 자연스레 중지할 수 있습니다.