[jQuery] 제이쿼리 2일차 요점정리

[1] jQuery 이벤트 처리

• 웹 브라우저가 HTML요소를 인식한 후에 처리되어야 하므로 jQuery의 load 처리 안에서 정의한다.
• 이벤트는 함수 형태로 정의되어 있고, 해당 이벤트가 발생한 경우 호출될 함수를 콜백 파라미터로 전달한다.
• 콜백함수에는 이벤트의 정보를 갖는 e 객체가 전달된다.
• 필요한 경우 이 객체를 선언하고 활용할 수 있다.
• e.preventDefault()는 링크의 href 속성이나 폼의 submit 등에 대해서 HTML 요소가 수행해야 하는 기본 동작을 차단하는 역할을 한다.

//jQuery의 load 처리 안에서 정의

$(function() {

    $("#foo").이벤트이름(function([e]) {

            [e.preventDefault();]

    });

});

[2] 마우스 관련 (클릭 이벤트 등등)

이벤트	기능
click	요소를 클릭시에 동작한다.
mouseenter	어떤 요소의 영역 안에서 마우스 커서가 들어간 경우 호출된다.
mouseleave	어떤 요소의 영역 안에서 마우스 커서가 빠져나온 경우 호출된다.
dbclick	더블클릭
hover	mouseenter+mouseleave

• hover 이벤트의 경우 마우스가 요소 안에 들어간 경우와 빠져나온 경우를 처리해야 하기 때문에 콜백함수가 두 개 설정되어야 한다.

//jQuery의 load처리 안에서 정의

$(function() {

    $("#foo").hover(

        function() {

            ...

        },

        function() {

            ...

        }

    );

});

• 콜백 함수가 하나만 설정되는 경우 이 콜백이 mouseenter와 mouseleave 모두 처리하게 된다.

//jQuery의 load 처리 안에서 정의

$(function() {

    $("#foo").hover(

        function() {

            ...마우스가 요소 안에 들어가거나 빠져나온 경우...

        });

});

[3] 키보드 관련

이벤트	기능
keydown	버튼을 누르고 있는 동안 지속적으로 발생한다.
keyup	버튼을 눌렀다가 뗀 순간 발생한다. 한글을 지원하므로 대부분의 키 처리 시 사용 권장.
keypress	키보드를 눌렀다가 떼는 동작을 1회로 처리한다. 한글인 경우 발생되지 않기 때문에 사용을 권장하지 않는다.

keycode

• 키보드에 부여된 일련번호
• 키 이벤트 발생 시 이벤트 객체를 통해 전달된다.
• 이 값을 사용하여 특정 버튼이 눌러진 경우를 판별할 수 있다.

//jQuery의 load처리 안에서 정의

$(function() {

    $("#foo").keyup(function(e) {

        if (e.keyCode == 13) {

            ...엔터키가 눌러진 경우의 처리...

        }

    });

});

//keyCode가 궁금한경우 console로 찍어보기.

console.log(e.keyCode);

[4]브라우저 관련 

이벤트	기능
resize	브라우저의 창 크기가 변경될 때 호출된다.
scroll	브라우저의 스크롤이 이동할 때 호출된다.

[5] 요소의 크기 조회

width(), height() 함수의 사용

• 특정 요소의 크기

var w = $("#foo").width();

var h = $("#foo").height();

• 웹 페이지 전체의 크기

var w = $(document).width();

var h = $(document).height();

• 브라우저의 크기

var w = $(window).width();

var h = $(window).height();

• 스크롤바의 위치

var top = $(window).scrollTop();

[6] 반응형 기능

브라우저 크기에 반응하여 동작하는 함수를 정의하고 브라우저가 열린 직후와 창 크기가 변경될 때 동작하도록 호출

function responsive() {

    //현재 창의 넓이

    var w = $(window).width();

    if ( w>= ?) {

        ...반응형 기능 구현...

    }

}

$(function() {

    //브라우저가 열린 직후

    responsive();

    $(window).resize(function() {

        //창 크기가 변경될 경우

        responsive();

    });

});

[7] 인피니티 스크롤

$(function() {

    $(window).scroll(function() {

        if ( $(window).scrollTop() + $(window).height() == $(document).height() ) {

            ...스크롤이 맨 밑에 도착한 경우 처리...

        }

    });

});