FE Study) STEP 21 리뷰

[eyabc]

Event 의 composed 옵션에 대한 부분을 보고 궁금하여 찾아 보았습니다. 핵심은 shadow dom 이라는 개념인데 https://wit.nts-corp.com/2019/03/27/5552 여기에 개념이 잘 나와 있네요, 사이트들에 크롬 개발자 도구를 열어서 element 를 관찰을 했을 때 종종 보이는 것들이라 익숙하게 보았네요

이벤트를 제어하는 일반적인 방법을 의미) 또한 HTMLElement.click()와 같은 메소드를 호출 이런 방법도 있군요!

❗ TODO 지연 시간이 0인 setTimeout으로 감싸면 중첩이벤트가 즉시 처리되지 않는 이유는?.. setTimeout 의 지연시간이 0 이라고 하더라도, 비동기 함수이며, 큐에 들어가기 때문에 즉시 처리되지 않습니다. 그리고 0은 최소 대기 시간이기 때문에 다른 작업들에 밀려 더 지연될 수 있습니다 ! https://evan-moon.github.io/2019/08/01/nodejs-event-loop-workflow/

[eyabc]

<pre id="rabbit">
  |\   /|
   \|_|/
   /. .\
  =\_Y_/=
   {>o<}
</pre>
<button onclick="hide()">hide()를 호출해 토끼 숨기기</button> (1) onclick 으로 인해 hide() 핸들러가 실행이됨

<script>
  // hide() will be called automatically in 2 seconds
  function hide() { (2) 실행 2 
    let event = new CustomEvent("hide", {
      cancelable: true // cancelable를 true로 설정하지 않으면 preventDefault가 동작하지 않습니다.
    }); (3) hide 라는 커스텀 이벤트 생성
    if (!rabbit.dispatchEvent(event)) { (4) 커스텀 이벤트 호출 
      alert('기본 동작이 핸들러에 의해 취소되었습니다.'); (7) confirm 이 false 일 경우 (이벤트의 기본동작이 취소될 경우)
    } else {
      rabbit.hidden = true; (8) confirm 이 true 일 경우 (이벤트의 기본동작이 취소되지 않았을 경우) 
    }
  }

  rabbit.addEventListener('hide', function(event) { (5) 바인딩된 hide 이벤트 핸들러 실행 
    if (confirm("preventDefault를 호출하시겠습니까?")) { (6) 이벤트의 기본동작이 취소되면 elem.dispatchEvent(event) 가 false 를 반환합니다. 따라서 confirm yes 를 할 경우, rabbit.dispatchEvent(event) 는, 기본 이벤트 동작이 취소되었으므로 false 반환, confirm no 일 경우 event.preventDefault(); 가 실행되지 않으므로 true 반환 
      event.preventDefault(); 
    }
  });
</script>

❗ TODO 아래 예제에서 기본동작의 역할을 하는 건 토끼를 숨기는 else{rabbit.hidden=true;} 부분을 의미하는건가?

[pul8219]

@eyabc composed 옵션도 setTimeout 관련 내용도 짚어주셔서 감사합니다! 문서 찬찬히 읽어볼게요 토끼(?) 코드는 은영님이 올려주신 코드랑 형욱님 문서보고 더 명확히 이해되었습니다. 결국 https://ko.javascript.info/dispatch-events 문서에 있던 커스텀 이벤트를 만들고 디스패칭 해 주는 코드에 원하는 동작을 넣으면, 커스텀 이벤트에도 기본 동작을 설정해줄 수 있습니다. 를 참고하면... 이 예제에선 토끼를 숨기는 동작이 기본동작이었던 거고 기본 동작을 취소하느냐 마냐에 따라 if else로 흐를 수 있도록 한거겠군요 커스텀 이벤트에 기본동작을 설정할 때 보통 이렇게 코드를 작성하는지 궁금하여 생겼던 의문점입니다! 코드 기입해주셔서 감사해요

[khw970421]

CustomEvent가 newEvent와 다른 점부분을 더 배우며 잘 이해하였습니다. 추가적으로 제가 궁금증이 있는 부분에 대해 고민해주며 답을 해주시는 부분 감사합니다.