jQuery 제이쿼리

[이벤트] 변수에 함수 지정하여 사용

chloeize 2021. 5. 12. 23:33
728x90

 

<body>

 

    <h2>

 

        <span style="color: yellowgreen">Bright</span>

 

        <span style="color: darkmagenta">Clever</span>

 

        <span style="color: deeppink">Wit</span>

 

        <span style="color: crimson">Awesome</span>

 

        <span style="color: navy">Brilliant</span>

 

    </h2>

 

    <script>

 

        // 변수에 함수 담아 사용

 

        var handler = function () {

 

            $('<span style="color:gray"></span>')

 

                .html('Fortune')

 

                .appendTo('h2')

 

                .click(handler)

 

        };

 

        $('h2').on('click', handler);




        // 자주 사용되는 것을 위와 같이 

 

        // 따로 따로 관리하면 복잡하므로

 

        // body에 이벤트를 연결하는 방식도 있다




        $('body').on('click','h2', function(){

 

            // body 태그를 클릭했을 때, 클릭한 것이 h2 태그라면,

 

            // 아래 이벤트 핸들러를 실행한다.

 

            $(this).css({'background-color':'orange', 'border':'green 5px dotted'});

 

            // 참고로 여기서의 this는 h2이다

 

            $('<span style="color:#fff"></span>').html('Fortune').appendTo('h2');

 

        });

 

    </script>

 

</body>

728x90