[jQuery] 이벤트 처리

jQuery 이벤트 처리

---

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){
            ... 엔터키가 눌려진 경우의 처리 ...
        }
    });
});