[1] 이벤트 처리 순서

캡처링 단계 => 타깃 단계 => 버블링 단계

[2] 이벤트 버블링

자식요소에서 부모요소로 이벤트를 전파하는 방법, 기본적으로 자바스크립트에서 이벤트 버블링은 발생을 한다.

• focus 이벤트는 버블링이 발생하지 않는다.

(1) 사용방법

• 버튼1에 이벤트를 넣어놓고 자식요소인 버튼2과 버튼3를 클릭하면 이벤트 버블링에 의해서 사용을 할 수 있다.

만약에 자식요소인 버튼2,버튼3이나 자식요소로 이미지 태그등을 사용할때 버튼 1의 event.target을 가리키고 싶다면 e.currentTarget 을 사용하면 된다.

const buttonHandler = (e) => {
    alert(e.target.id);
    console.log(e.currentTarget )
};

=====================================

<div>
  <button id="버튼1" onClick={buttonHandler}>
    버튼 1
    <button id="버튼2">
      버튼2
      <button id="버튼3">버튼3</button>
    </button>
  </button>
</div>

(2) 이벤트 버블링 막기

이벤트 버블링을 중단하게 한다면 문제점들이 있으므로 함부로 막는것을 사용하지 않는 것을 권장합니다. 하지만 같은 이벤트를 처리하는 요소가 상위에 존재해서 사용을 할 떄도 있습니다.

1. 분석시스템은 사용자가 클릭한 요소들의 행동 패턴을 분석을 해야되는데 버블링을 막게되면 분석 시스템이 제대로 작동이 되지 않습니다.

// 이벤트 버블링 중단하기
event.stopPropagation()

[3] 이벤트 캡처링

부모요소에서 자식요소로 이벤트를 전파하는 방법

부모요소에서 자식요소로 이벤트를 전파하는 방법으로 거의 사용이 되지 않는다.

(1) 사용방법

• react에서는 Event명 + Capture를 이용해서 캡처링을 사용한다.
  예를 들어 onClick 이벤트이면 onClickCapture 와 같이 사용하면된다.

• 버튼3에 이벤트를 넣어놓고 부모요소인 버튼1과 버튼2를 클릭하면 이벤트 캡처링에 의해서 사용을 할 수 있다.

const buttonHandler = (e) => {
    alert(e.target.id);
};

=====================================

<div>
  <button id="버튼1" onClickCapture={buttonHandler}>
    버튼 1
    <button id="버튼2" onClickCapture={buttonHandler}>
      버튼2
      <button id="버튼3" onClick={buttonHandler}>
        버튼3
      </button>
    </button>
  </button>
</div>

[4] 이벤트 위임

여러개의 자식요소에서 동일한 이벤트를 처리해야한다면 상위 요소에 이벤트를 1개 선언해서 처리하는 방식이다.

• 아래의 코드는 4개의 버튼 자식요소에게 각각 이벤트 핸들러가 붙어있다.

<div>
<button id="button">
  button <br />
  <button id="button1" onClick={buttonHandler}>
    button1
  </button>
  <br />
  <button id="button2" onClick={buttonHandler}>
    button2
  </button>
  <br />
  <button id="button3" onClick={buttonHandler}>
    button3
  </button>
  <br />
  <button id="button4" onClick={buttonHandler}>
    button4
  </button>
  <br />
</button>
</div>

• 이벤트를 위임하면 아래와 같다. , 부모 요소에게만 이벤트를 주면 된다.

<div>
<button id="button" onClick={buttonHandler}>
  button <br />
  <button id="button1">
    button1
  </button>
  <br />
  <button id="button2">
    button2
  </button>
  <br />
  <button id="button3">
    button3
  </button>
  <br />
  <button id="button4">
    button4
  </button>
  <br />
</button>
</div>