• 카테고리

    질문 & 답변
  • 세부 분야

    프론트엔드

  • 해결 여부

    미해결

helpers.js

21.06.29 11:23 작성 조회수 194

1

emit, on 등 헬퍼 함수가 좀 헷갈려서 따로 html 파일을 만들어서 연습하는 중인데요! qs 함수를 만들어서 사용하면 dom 객체를 제대로 받아오지 못하는데 이유가 뭘까요..?

그리고 emit 함수 부분 mdn 문서를 봐도 제대로 이해가 안 되는데 custom, dispatch를 간단하게 설명해 주시면 감사드리겠습니다ㅜㅜ

<body>
  <div class="container">
    <form id="search-form-view">
      <input type="text" placeholder="검색어를 입력하세요" autofocus />
      <button type="reset" class="btn-reset"></button>
    </form>
  </div>

  <script> 
    function qs(selector, scope = document) {
      if (!selector) throw "no selector";
      scope.querySelector(selector);
    }
    
    const form = qs('#search-form-view');
    console.log(form); // undefined

    const form1 = document.querySelector('#search-form-view');
    console.log(form1);

답변 2

·

답변을 작성해보세요.

2

qs() 함수 마지막에 찾은 엘리먼트를 반환하는 코드가 누락되었네요.  return을 앞에 추가해 주세요

  • return scope.querySelector(selector);

커스텀이벤트 다루는건 예전에 블로그에 정리한 적이있는데 mdn 문서랑 같이 참고해서 보시면 좋겠습니다.

1

네카라님의 프로필

네카라

2021.06.30

qs 호출부분에서 두번째 파라미터값을 전달을 안해주셔서 scope는 document입니다. 

#search-form-view의 부모는container 이므로 찾지 못합니다!