sun3
386
2020-11-10 11:19:05
2
190

DOMContentLoaded 를 꼭 사용해야할 이유가 있을까요?


document.addEventListener('DOMContentLoaded'function(){
    document.querySelector(".mobile-menu").addEventListener("click"function(e){
        if ( document.querySelector('.menuwrap').classList.contains('on') ){
            //메뉴닫힘
            document.querySelector('.menuwrap').classList.remove('on');
            document.querySelector('.mobile-menu i').classList.remove('fa-times')
            document.querySelector('.mobile-menu i').classList.add('fa-bars');

... 생략 ...

https://apost.kr/702

내용을 구현하며 코드를 보는데 addEventListener를 사용하더라구여 HTML이 다 load 되고나서 수행하는 동작인것 같은데

querySelector로 click이벤트 동작을 감지하고 있음에도 불구하고 DomContentLoaded를 먼저 수행해야하는 이유가 있을까요?

0
  • 답변 2

  • kiroki
    768
    2020-11-10 11:26:17 작성 2020-11-10 11:30:44 수정됨

    DOM 이 모두 로딩되지 않았을 때는 Element가 아직 없을 수 있기떄문입니다.

    js 코드가 로딩 전에 작동해서

    없는 Element를 querySelector로 찾으면 null이 나와서 null.addEventListener (...) 에서 오류가 발생합니다.

    다른 방법으로는 HTML은 위에서 부터 순서대로 파싱하기 때문에 js에서 사용하는 Element 하단에 script를 쓸수도 있습니다.

  • sun3
    386
    2020-11-10 11:43:47

    kiroki 답변 감사합니다! 바로 이해가 되네요!

  • 로그인을 하시면 답변을 등록할 수 있습니다.