[jquery] 이벤트 연결 범위 한정 / delegate 방식

꿈꾸는토끼 2020. 12. 3. 12:00

이벤트를 연결할 때 on ( ) 메서드를 사용

on( ) 메서드를 사용하지 않은 기본 이벤트 연결

    <script>
        
        $('document').ready(function(){
        
        
           $('h1').click(function(){
               var length = $('h1').length;
               var html = $(this).html();
               
               $('#wrap').append('<h1>'+length+' - '+html+'</h1>');
           });
            
            
        });
    </script>

</head>

<body>


    <div id="wrap">
        <h1> HEADER 1 </h1>
    </div>

- delegate 방식을 사용하는 on( ) 메서드

- 이벤트 리스너에서 this 키워드가 #wrap 태그가 아니라 h1 태그라는 것을 주의

        
        $('document').ready(function(){

            // 범위를 지정하고 해당 범위안의 엘리먼트를 지정해서 이벤트 적용
            // 해당 범위에 특정 엘리먼트가 추가되어도 이벤트를 적용.
           $('#wrap').on('click','h1',function(){
               
               var length = $('h1').length;
               var html = $(this).html();
               
               $('#wrap').append('<h1>'+length+' - '+html+'</h1>');
               
               
           });
            
        });

                // 제거
                $('#wrap').off('click', 'h1');