이벤트

사용자가 마우스를 클릭하거나 마우스를 움직여 특정화면 위로 가져가거나 키보드를 누르는 행위를 이벤트라고 부름jQuery에서는 event객체를 통해서 이벤트를 제어함.

마우스오버 이벤트

<h3>마우스오버 이벤트</h3>
    <div id="div-hover" style="border:3px solid black;width:100px;height:100px"></div>
    <h3>클릭 / 더블클릭 이벤트</h3>
    <p id="click">click</p>
    <p id="dblclick">double click</p>

    <script>
        $(function(){ //window.onload와 같음
            $("#div-hover").on("mouseover",function(){
                $(this).css("background-color","pink")
            })

            $('#click').on("click",function(){
                $(this).css("color","red");
            });

            $('#dblclick').on("dblclick",function(){
                $("#dblclick").css("background-color","gold")
            });

        });

    </script>

• 여태까지 이벤트고 다를게 없다 :
  • 마우스 오버에서는 on("mouseover",function(){})
  • 더블클릭이벤트는 on("dblclick",function(){})를 써서 활용한다.

마우스 업 다운, 마우스 이동 이벤트

• 마우스업 : 마우스를 눌렀을때
• 마우스 다운 : 마우스버튼을 땠을때

<h3>마우스업/다운 이벤트</h3>
    <div id="div-updown" style="border:3px solid black;width:100px;height:100px"></div>
    <h3>마우스이동 이벤트</h3>
    <h1>
        Mouse is a coordinate :
        <span id="span1"></span>
    </h1>

    <script>

        $("#div-updown").on("mouseup",function(){
            $(this).css("background-color","blue");
        })
        $("#div-updown").on("mousedown",function(){
            $(this).css("background-color","red");
        })
        
        $(document).on("mousemove",function(event){
            $("#span1").html("<br>"+event.pageX+", "+ event.pageY);
				//event.pageX,Y는 마우스가 움직이는 좌표를 알려주는 이벤트이다

        })

    </script>

• 마우스 업 :.on("mouseup",function(){})
• 마우스 다운 :.on("mousedown",function(){})
• 마우스 이동 :.on("mousemove",function(event){}

키업, 키 프레스, 키 다운 이벤트

키업: 키보드를 눌렀다 땠을때

키 다운 : 키보드를 눌렀을때

키 프레스 : 키보드를 사용했을때 (한글은 인식안됨)

        $("textarea").on("keyup",function(){
        var countNum = $(this).val().length
				//textarea에 입력된 값의 크기를 알수있는 함수
            $('#noti').text("작성가능한 글자수 : "+(150-countNum));
  

        })

• 키업 : on("keyup",function(){}) - 키보드를 눌렀다 땔때마다 이벤트가 발생
• 키 다운: on("keydown",function(){}) - 키보드를 누를때마다 이벤트 발생
• 키 프레스 : on("keypress",function(){}) - 키보드를 사용할때마다 이벤트 발생

입력양식 이벤트

<h1>입력 양식(form) 이벤트</h1>
    <h3>submit / focus / blur</h3>
    <form id="my-form" action="result.html">
        ID : <input type="text" name="userId" id="userId" required>
//자바스크립트로도 양식이 비어있으면 전송방지를 할수있지만 input에 required를 쓰는게 더 간단하다
        PW : <input type="password" name="userPw" id="userPw" required>
        <input type="submit" value="제출">
        <input type="reset" value="취소">
    </form>

    <script>

        $('#my-form').on("submit",function(){
            var idTag=$('#userId');
            var pwTag = $("#userPw");
            if(idTag.val()==""|| pwTag.val()==""){
                alert("아이디/비밀번호를 입력해주세요")
				//id폼과 pw폼이 비어있으면 오류메세지 출력하고
				//실패를 리턴한다 : 이 경우 값이 전송되지 않는다
            return false;
            }
            return true;
				//그렇지 않다면, 성공이라고 판단하고 값을 전송한다.
        })

        $("#userId").on("focus",function(){
				//input에 커서가 가 있을때 함수를 실행함
            $(this).css("background-color","purple")
        });

        $("#userId").on("blur",function(){
				//input에서 커서가 사라졌을때 함수 실행함
            $(this).css("background-color","white")
        });

    </script>

chage

input태그의 type속성이 checkbox, radio인 input태그와 select태그의 상태 변경을 감지하는 이벤트

<h3>change</h3>
    <p>
        input태그의 type속성이 checkbox, radio인 input태그와 select태그의 상태 변경을 감지하는 이벤트
    </p>
    전체 : <input type="checkbox" name="allCheck" id="allCheck"> <br>
    <div id="check-item">
        <input type="checkbox" name="" id=""> A
        <input type="checkbox" name="" id=""> B
        <input type="checkbox" name="" id=""> C
    </div>
    남자 : <input type="radio" name="" id=""> <br>
    <select name="" id="">
        <option value="">1</option>
        <option value="">2</option>
        <option value="">3</option>
    </select>

    <script>
        $('#allCheck').on("change",function(){
				//이 체크의 값이 change변했을때 실행되는 함수
            var checkbox = $('#check-item').children('[type="checkbox"]');
				//checkbox는 div안에 있는 모든 자식태그(type:checkbox)이다
            if($(this).is(":checked")){  
				//만약 allCheck가 체크되어있다면         
            checkbox.prop("checked",true);
				//모든 chekcbox는 **prop**를 활용하여 checked상태를 true로 바꾼다.
        //checkbox.attr("checked","checked"); 위가 안먹힐때 사용
				//이 태그는 안의 태그값을 바꾸는 코드이다, checked항목을 checked로 만든다
            }
            else{checkbox.prop("checked",false);
				//check박스가 체크되지 않았다면 checked의 값음 false, 체크를 해제한다.
            }
            

        });

        $("[type=radio]").on("change",function(){
				//라디오박스의 값이 변했을때 실행하는 함수
            console.log("checked")
        });
        $("select").on("change",function(){
				//select의 값이 변했을때 실행하는 함수
            console.log("Change")
        })

    </script>