38강 jQuery이벤트1 을 듣고 있습니다.

미해결질문
ayo 프로필

제목처럼 38강을 듣고 있는데요.. 

강사님 작성하신 코드처럼 작성하면 이벤트가 잘 먹히는데요

아래처럼 $function(){.. 이 부분을 주석 처리하면 이벤트가 먹히지 않습니다. 

$function(){.. 이게 없어서 그런 것 같은데, 그렇다면 이 경우에는 왜 이벤트가 먹히지 않는지 궁금합니다. 답변 부탁 드립니다~

//$(function(){
        $("#btn1").on("click", function(){
            $("#box1").hide();
        });

        $("#btn2").on("click", function(){
            $("#box1").show();
        });

        $(".box").on("mouseenter", function(){
            $(this).addClass("box-active");
        });

        $(".box").on("mouseleave", function(){
            $(this).removeClass("box-active");
        });
//});
이범재 이 프로필
이범재 이 5달 전

안녕하세요. ayo님.

좋은 질문 주셔서 감사합니다.

$(function() {

  .....

  .....

});

코드의 역할은 

페이지내의 모든 html이 웹브라우저의 메모리에 로딩된 되어 DOM이 생성되었을때

해당 코드의 내용을 실행하라는 의미입니다.

예제로 주신 코드는 #btn1, #btn2, .box에 이벤트를 할당하는 코드인데요.

이것의 전제조건은 btn1, btn2, box가 이미 브라우저에 로딩되어있다는 전제를 하고 있어요.

$(function() { 

});

코드를 주석처리하고 이벤트를 할당하는 코드만 실행한다면 

btn1, btn2, box가 브라우저의 메모리에 로딩이 안된상태에서 만들어지지않은 DOM에 이벤트를 할당하려고 하기 때문에

제대로 이벤트가 할당이 안됩니다.

관련한 문서링크입니다.

https://learn.jquery.com/using-jquery-core/document-ready/

https://www.w3schools.com/jquery/event_ready.asp

지식공유자 되기
많은 사람들에게 배움의 기회를 주고,
경제적 보상을 받아보세요.
지식공유참여
기업 교육을 위한 인프런
“인프런 비즈니스” 를 통해 모든 팀원이 인프런의 강의들을
자유롭게 학습하는 환경을 제공하세요.
인프런 비즈니스