[jQuery] 제이쿼리 Event Helpers 사용하기

이번에 배울 것은  Event Helpers 입니다.

다음은 스크립트와 스타일입니다

    <script type="text/javascript">
        $(function() {
            $("#evtTarget").hover(highlight, highlight2);
            $("#evtTarget").dblclick(fnClick);
            $("#evtTarget").click(fnClick2);

            $(window).resize(fnResize);
            $("#evtTarget").one("click", function () {
                $(this).css({
                    borderWidth : "4px",
                    cursor: "pointer"
                })
            })
        });
        function highlight() {
//            $("#evtTarget").css('color', 'red');
            $("#evtTarget").toggleClass("highlighted");
        }
        function highlight2() {
            $("#evtTarget").css('color', 'black');
        }
        function fnClick() {
            $("#evtTarget").html("<p>Double Click</p>");
        }
        function fnClick2() {
            $("#evtTarget").text("Click");
        }

        function fnResize() {
            $("#evtTarget").html("Browser window ");
        }

    </script>
    <style type='text/css'>
        .highlighted {
            background-color: Red;
        }

</style>

위에서 .one 이 의미하는 것은 한번만 작동하라는 것입니다.

[html]

<div id="evtTarget" class="box">Mouse over~~~~~</div>

결과화면 입니다.