[JavaScript_study] DOM & EVENT 이벤트 버블링, 이벤트 위임

 

- 동작은 동일하지만 버블링에서 차이가 나는 경우

* 버블링 X

• focus
• blur
• mouseenter
• mouseleave

* 버블링 o

• focusin
• focusout
• mouseover
• mouseout

---

​* event.stopPropagation()

  > 이벤트 버블링을 인위적으로 막아준다.
  > 버블링을 막을 일이 없어서 자주사용되지는 않는다.

---

* 이벤트 위임

  > 해당코드로 li에 link를 추가하게되면 클릭시 a tag안에 class="on"이 추가하게되어 이상하게 동작한다..

  > 수정방법은 아래에 추가한 코드를 참고하도록하자.

<div id="box">
  <ul id="list">
    <li id="red" class"on"></li>
    <li id="blue"></li>
    <li id="green"></li>
    <li id="pink"></li>
  </ul>
</div>
<script>
  const list = document.getElementById("list");
  const colors = list.children;
  
  function clickHandler(event) {
    for (c of colors) {
      c.classList.remove("on);
    }
    event.target.classList.add("on");
  }
  
  // document.getElementById("red").addEventListener("click", clickHandler);
  // document.getElementById("blue").addEventListener("click", clickHandler);
  // document.getElementById("green").addEventListener("click", clickHandler);
  // document.getElementById("pink").addEventListener("click", clickHandler);
  
  // li tag가 아닌 부모요소인 ul에 위임할 수 있다.
  // 기존의 코드를 한줄의 코드로 처리할 수 있다. (유지 보수에 좋다.)
  // 이벤트 버블링으로 인해 작동이된다.
  document.getElementById("list").addEventListener("click", clickHandler);

</script>

 

* 위의 코드에서 link까지 추가하는 방법

<div id="box">
  <ul id="list">
    <li id="red" class"on"><a href="#">Red</li>
    <li id="blue"><a href="#">Blue</li>
    <li id="green"><a href="#">Green</li>
    <li id="pink"><a href="#">Pink</li>
  </ul>
</div>
<script>
  const list = document.getElementById("list");
  const colors = list.children;
  
  function clickHandler(event) {
    console.log("target", event.target); // 이벤트를 발생시키는 요소 (li)
    console.log("currentTarget, event.currentTarget); // 이벤트 핸들러가 등록된 요소 (ul)
    let target = event.target;
    if (target.tagName === "A") {
      target = target.parentElement;
    } else if (target === event.currentTarget) {
      return;
    }
    for (c of colors) {
      c.classList.remove("on);
    }
    target.classList.add("on");
  }
  
  document.getElementById("list").addEventListener("click", clickHandler);

</script>