[jQuery]이벤트(event), 엘리먼트 크기

*이벤트(event)

=> 사용자가 마우스 또는 키보드로 특정 행동을 했을 때 그에 반하는 상호작용

*마우스 이벤트

            $('선택자').이벤트명(function(){
                ...내용...
            });

1. mousemove: 엘리먼트 내부에 마우스가 움직였을 때 실행
2. mouseenter: 엘리먼트에 마우스가 들어갔을 때 실행
3. mouseleave: 엘리먼트에 마우스가 나왔을 때 실행
4. hover: mouseenter + mouseleave (콜백함수)
5. mousedown: 엘리먼트에 마우스를 누르자마자 실행
6. mouseup: 엘리먼트에 마우스를 떼자마자 실행
7. click: mousedown + mouseup
8. dblclick: 일정시간 내에 마우스를 두 번 눌렀다가 뗐을 때 실행

---

        $(".box").css({
          width: 300,
          height: 300,
          backgroundColor: "salmon",
        });

(1) mosemove

        $(".box").mousemove(function () {
          $(".box").css({
            backgroundColor: "gold",
          });
        });

=> mousemove는 element 내부에 마우스가 움직였을 때에 실행된다.

(2) moseenter

        $(".box").mouseenter(function () {
          $(".box").css({
            width: 400,
          });
        });

=> mouseenter는 element에 마우스가 들어갔을 때에 실행된다.

(3) mouseleave

        $(".box").mouseleave(function () {
          $(".box").css({
            backgroundColor: "royalblue",
          });
        });

=> mouseleave는 element에서 마우스가 나왔을 때에 실행된다.

(4) hover

        $('.box').hover(function(){
            $('.box').css({
                borderRadius: "50%"
            });
        }, function(){
            $('.box').css({
                borderRadius: "0%"
            })
        });

=> hover는 콜백함수로, 마우스가 element 내부로 들어갈 때와 나올 때에 실행된다.

(5) mousedown

        $('.box').mousedown(function(){
            $('.box').css({
                backgroundColor: "gray"
            })
        });

=> mousedown은 element를 마우스로 클릭하자마자 실행된다.

(6) mouseup

        $('.box').mouseup(function(){
            $('.box').css({
                backgroundColor: "salmon"
            });
        });

=> mouseup은 element를 누르고있던 마우스를 떼자마자 실행된다.

(7) click

        $('.box').click(function(){
            $('.box').css({
                backgroundColor: "royalblue"
            });
        });

=> click은 element를 클릭했을 때에 실행된다. (mousedown + mouseup)

(8) dblclick

        $('.box').dblclick(function(){
            $('.box').css({
                borderRadius:"50%"
            });
        });

=> dblclick은 element를 연속해서 두 번 눌렀다가 떼어냈을 때에 실행된다.

---

*엘리먼트 크기

script

        $(document).ready(function(){

            $('.box').css({
                width: "50%",
                height: 300,
                backgroundColor: "lightgray"
            });

            var boxW = $('.box').width();
            // => 선택자의 가로값을 가져옴

            var boxH = $('.box').height();
            // => 선택자의 세로값을 가져옴
            console.log(boxH);

            $('h1').css({
                width: boxW / 2,
                height: 100,
                backgroundColor: "salmon"
            });

        });

* $(선택자).width()

=> 선택자의 가로 값을 가져옴

* $(선택자).height()

=> 선택자의 세로 값을 가져옴