이벤트

1. 이벤트 핸들러

:이벤트 발생시 실행될 function 연결 방법 종류

1) 방법 1. 이벤트 메소드를 통한 연결

$("선택자").이벤트메소드(function(){ 해당 선택된 요소에 해당 이벤트 발생시 실행할 내용; })

<예시>
    <h4 id="test1">클릭해보세요</h4>
    <script>
        $(function(){
            $("#test1").click(function(){ // id=test1인 요소에 클릭하면 발생될 함수 정의하겠다
                $(this).html("클릭되었습니다.") // 이 요소(this)에 html 넣을게
            })

            $("#test1").dblclick(function(){ // 더블클릭시 발생될 함수 정의하겠다
                $(this).css("color","red");
            })
        })
    </script>

2) 방법2. on메소드를 이용한 방법

$("선택자").on("이벤트명", function(){ 해당 요소에 해당 이벤트 발생시 실행할 내용; });

    <h4 id="test2">마우스 클릭 및 올려보세요</h4>

    <script>
        $(function(){
            /*
            $("#test2").on("click", function(){ // id=test2인 요소에 on메소드로 click했을때 생기는 이벤트를 함수로 정의하겠다.
                $(this).css("backgroundColor", "orangered").text("클릭됨");
            })
            */
            // on 메소드를 통해 이벤트 연결시
            // 한 요소에 다중으로 이벤트 걸기 가능함

            $("#test2").on({"mouseenter":function(){
                $(this).css("backgroundColor", "yellowgreen").text("마우스 올라감");
            }, "mouseout":function(){
                $(this).css("backgroundColor","yellow").text("마우스 빠져나감");
            }, "click":function(){
                // => 기존에 걸려있던 mouseenter, mouseout 이벤트 핸들러 제거
                // off 메소드로 제거해주면 됨 : 이벤트 핸들러 제거
                $(this).off("mouseenter").off("mouseout").css("backgroundColor", "orangered").text("이벤트제거됨");
                // 클릭시, mouseenter, mouseout 이벤트 제거, css에 배경색 오렌지레드, 이벤트 제거됨 문구 뜨게 함
            }}) // 다중 이벤트 걸 때, 객체형태로 만들어 전달하기
        })
    </script>

3) 방법3. 상위, 하위 요소 선택해서 이벤트 이용방법

$("상위요소선택자").on("","하위요소선택자",function(){
선택된 상위요소 안에 존재하는 해당 하위요소에 해당 이벤트가 발생했을 때 실행할 내용;
});

<예시>
    <div id="wrap">
        <h4>h4 클릭해보세요</h4>
        <h5>h5 클릭해보세요</h5>
    </div>

    <script>
        $(function(){
            $("#wrap").on("click","h4",function(){
                alert("h4클릭되었습니다.");
                $(this).html("안녕");
                // wrap의 하위요소인 h4요소에게 클릭시, 발생할 이벤트 부여
            })

            $(document).on("click","h5",function(){
                $(this).html("ㅋㅋㅋ");
                // document에 존재하는 모든 h5 요소 선택
            })
        })
    </script>

? 너무 헷갈리는데? 방법 3 언제 쓰죠??

방법 3을 써야만 하는 방법일때
: 동적으로 만들어진 요소에도 동일한 이벤트를 적용시키고자 한다면 반드시 방법3으로 해야됨!!!!!

※ 동적으로 만들어진 요소? 처음 로딩 시에는 없던 이벤트가, 나중에 새로이 만들어진 요소

<방법3으로 반드시 써야만 하는 예시>
    <div id="wrap2" style="border : 1px solid red">
    <h6>기존에 존재하는 요소</h6>
    </div>

    <script>
        $(function(){
            // 방법1. 이벤트 메소드 => 동적으로 만들어진 요소에 이벤트 적용 안됨
            /*
            $("#wrap2>h6").click(function(){
                $("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어진 요소</h6>");
            });
            => 새로이 만들어진 h6요소에는 click이벤트 적용 안됨
            */

            // 방법2. on메소드
            /*
            $("#wrap>h6").on("click",function(){
                $("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어진 요소</h6>");
            })
            => 새로이 만들어진 h6요소에도 역시 click이벤트 적용 안됨
            */

            // 방법3 동적으로 만들어진 요소에도 이벤트 적용됨!!
            $("#wrap2").on("click", "h6", function(){
                $("#wrap2").append("<h6>클릭으로 인해 동적으로 만들어진 요소</h6>");
            })
        })
        
    </script>

2. 일회성 이벤트

: 이벤트를 딱 한번만 연결할 때 사용

<딱 한번만 실행되고 더이상 실행안됨>
    <div id="test3">단 한번만 실행될거임</div>

    <script>
        $(function(){
            $("#test3").one("click", function(){
                alert("처음이자 마지막으로 이벤트 발생");
            })
        })
    </script>

3. 키보드 관련 이벤트

• keydown / keypress : 키보드의 키가 눌려질 때 이벤트

  • keydown : 키보드의 모든 키가 눌려질 때
  • keypress : 펑션키, 기능키, 한글 안 됨

• keyup : 키보드의 키가 떼어질 때 이벤트

4. 동적으로 글자수 세기

: 내가 입력하는 글자수 세기

    <div>
        150자 내외로 작성하시오. <br>
        <textarea id="content" cols="30" rows="10" style="resize:none"></textarea>
        <br>
        <span id="count">0</span> / 150
    </div>

    <script>
        $(function(){
            $("#content").keyup(function(){
                var inputLength = $(this).val().length;
                $("#count").text(inputLength);
                
            })
        })
    </script>

시각적인 효과 메소드

1. 시각적인 효과(Effect)

: 페이지에 애니메이션 효과 만들기 위한 메소드 집합

1) show(), hide(), toggle()

• show(시간); : 보여주기
• hide(시간); : 숨기기
• toggle(시간); : 보였다가 숨겼다가 둘 다 가능

2) slideDown(), slideUp()

    <style>
        div{
            background:beige;
            width:300px;
            height:30px;
            line-height:30px;
            text-align: center;
            border:1px solid yellow;
            border-radius: 10px;
            cursor:pointer;
        }

        p{
            width:300px;
            height:100px;
            border:1px solid lightgray;
            margin-top:5px;
            padding:10px;
            box-sizing:border-box;
            border-radius:10px;
            display:none;
        }
    </style>
</head>
<body>
    <h3>* slideDown()과 slideUp()</h3>

    <div>Q. 반품 언제되나요?</div>
    <p>A. 지금 확인중입니다.</p>

    <div>Q.상품 위치를 알고 싶습니다.</div>
    <p>A. 배송 조회해보세요. 거기 다 나옵니다.</p>
    
    <div>Q. 이 사이즈 있나요?</div>
    <p>A. 없어요 .</p>
    
    <div>Q. 통화 가능 시간을 알려주세요.</div>
    <p>A. 플러스 친구 톡을 활용하면 24시간 내에 답변드리겠습니다.</p>


    <script>
        // 구현하고싶은 내용 : 해당 Q를 누르면 그 내용을 slideDown, 다시 누르면 slideUp

        $(function(){

            $("div").click(function(){

                // slideDown 또는 slideUp 시킬 p요소
                var $p = $(this).next(); 
                // div와 동일한 레벨 선택 next() 메소드인것임.
                // jQuery방식으로 선택한 요소를 담아둘 때 변수명 앞에 $ 붙임(없어도 기능구현은 문제없음)

                if($p.css("display")=="none"){ // css스타일 속성값을 알아오는 것 할때도 css메소드 씀.(css구성할때 뿐만아니라)
                    
                    $(this).siblings("p").slideUp(); // 다른 열려있는 거 닫고 이후 내가 선택한것 보여지게
                    $p.slideDown(); // 보여지게
                    
                } else{
                    $p.slideUp(); // 가려지게
                } 
            })
        })
    </script>

3) fadeIn()과 fadeOut()

• fadeIn(시간); : 천천히 나옴
• fadeOut(시간); : 천천히 사라짐
• fadeToggle(시간); : 천천히 나오게도 사라지게도 함