JQuery 이벤트

javascript 9일차 요점정리

JQuery 이벤트 

---

• 웹 브라우저가 HTMl요소를 인식한 후에 처리되어야 하므로 jQuery의 load 처리 안에서 정의한다.

• 이벤트는 함수 형태로 정의되어 있고, 해당 이벤트가 발생한 경우 호출될 함수를 콜백 파라미터로 전달한다.

• 콜백함수에는 이벤트의 정보를 갖는 e객체가 전달된다.

* 필요한 경우 이 객체를 선언하고 활용할 수 있다.

* e.preventDefault() 는 링크의 href 속성이나 폼의 submit 등에 대해서 HTMl 요소가 수행해야 하는 기본 동작을 차단하는 역할을 한다.

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

$(function() {

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

[e.preventDefault();]

});

});

주요 이벤트 종류

---

마우스 관련

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

hover 이벤트

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

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

$(function() {

$("#foo").hover(

function() {

... 마우스가 요소 안에 들어간 경우..

},

function() {

... 마우스가 빠져나온 경우..

}

);

});

키보드 관련

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

keycode

• 키보드에 부여된 일련번호.

• 키 이벤트 발생시 이벤트 객체를 통해 전달된다.

• 이 값을 사용하여 특정 버튼이 눌러진 경우를 판별할 수 있다.

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

$(function() {

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

if (e.keyCode == 13) {

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

}

});

});

요소의 크기 조회

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();

반응형 기능

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

function responsive(){

// 현재 창의 넓이

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

if (w >=?) {

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

}

}

$(function()) {

// 브라우저가 열린 직후

responsive();

$(window).resize(function() {

// 창 크기가 변경될 경우

responsive();

});

});

인피티니 스크롤

// jQuery의 load처리 안에서 정의
$(function() {
    $(window).scroll(function(){
        if ( $(window).scrollTop() + $(window).height() == $(document).height()){
            ... 스크롤이 맨 ㅣㅌ에 도착한 경우의 처리 ...
 
        }
    });
});