[제이쿼리] jQuery 이벤트 종류와 사용방법

 

제이쿼리(jQuery) 이벤트

---

안녕하세요? 장장스입니다.

오늘은 제이쿼리 이벤트 메서드를 포스팅해보겠습니다. 

이벤트란 사이트에서 방문자가 취하는 모든 행위를 말하고, 이벤트 헨들러는 이벤트가 발생했을 떄 실행되는 코드를 말합니다.

 

이벤트 등록 메서드

---

이벤트 등록 메서드란?

이 메서드를 이용하면 방문자가 작성한 요소에서 어떠한 특정 동작이 일어났을 때 저장된 코드를 실행시킬 수 있습니다.

 

이벤트 등록 메서드에는 하나의 이벤트만 등할 수 있는 단독 이벤트 등록 메서드와 2개 이상의 이벤트를 등록할 수 있는 그룹 이벤트 등록 메서드가 있습니다. 단독 이벤트 메서드는 한 동작에 대한 이벤트를 등록할 떄 사용하는 메서드입니다. 예를 들어, '요소를 클릭했을 떄, '요소를 더블클릭했을 때', 요소에 마우스 포인터를 올렸을 때' 등 하나의 이벤트에만 대응하여 이벤트 핸들러의 코드가 실행됩니다.

 

 

 

제이쿼리 이벤트 종류

---

로딩이벤트

종류	설명
load()	선택한 이미지 또는 프레임 요소에 연동된 소스의 로딩이 완료된 후 이벤트가 발생합니다.
ready()	지정한 HTML 문서 객체의 로딩이 완료된 후 이벤트가 발생합니다.
error()	이벤트 대상 요소에서 오류가 발생하면 이벤트가 발생합니다.

 

마우스 이벤트

종류	설명
click()	선택한 요소를 클릭했을 떄 이벤트가 발생합니다.
dbclick()	선택한 요소를 더블클릭했을 때 이벤트가 발생합니다.
mouseout()	선택한 요소의 영역에서 마우스 포인터가 벗어났을 때 이벤트가 발생합니다. 이때 하위 요소의 영향을 받습니다.
mouseover	선택한 요소의 영역에 마우스 포인터를 올렸을 때 이벤트가 발생합니다.
hover()	선택한 요소에 마우스 포인터를 올렸을 때와 벗어났을 때 각각 이벤트가 발생합니다.
mousedown()	선택한 요소에서 마우스 버튼을 눌렀을 때 이벤트가 발생합니다.
mouseup()	선택한 요소에서 마우스 버튼을 눌렀다가 떼었을 때 이벤트가 발생합니다.
mouseenter()	선택한 요소 범위에 마우스 포인터를 올렸을 때 이벤트가 발생합니다.
mouseleave()	선택한 요소 범위에서 마우스 포인터가 벗어났을 때 이벤트가 발생합니다.
mousemove()	선택한 요소 범위에서 마우스 포인터를 움직였을 때 이벤트가 발생합니다.
scroll()	가로, 세로 스크롤바를 움직일 때마다 이벤트가 발생합니다.

 

키보드 이벤트

종류	설명
keypress()	선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생합니다. 그리고 문자 키를 제외한 키의 코드값을 반환합니다.
keydown()	선택한 요소에서 키보드를 눌렀을 때 이벤트가 발생합니다. 키보드의  모든 키의 코드값을 반환합니다.
keyup()	선택한 요소에서 키보드에서 손을 떼었을 때 이벤트가 발생합니다.

 

포커스 이벤트

종류	설명
focus()	선택한 요소에 포커스가 생성되었을 때 이벤트를 발생하거나 선택한 요소에 강제로 포커스를 생성합니다.
focusin()	선택한 요소에 포커스가 생성되었을 때 이벤트가 발생합니다.
focusout()	포커스가 선택한 요소에서 다른 요소로 이동되었을 때이벤트가 발생합니다.
blur()	포커스가 선택한 요소에서 다른 요소로 이동되었을 때 벤트가 발생하거나 선택한 요소의 포커스가 강제로 사라지도록 합니다.
change()	이벤트 대상인 입력 요소의 값이 변경되고, 포커스가 이동하면 이벤트가 발생합니다. 그리고 강제로 change 이벤트를 발생시킬 때도 사용합니다.

 

 

 

이벤트 객체

---

jQuery의 이벤트 시스템은 W3C 표준 에 따라 이벤트 객체를 정규화합니다 .

이벤트 핸들러 함수는 jQuery에서 callback함수에 의해 이벤트 객체(event object)를 이벤트 핸들러의인자로 전달됩니다.
이벤트 객체로부터 전달받은 인자를 이용하여 이벤트의 특정 값을 받아 오거나 이벤트의 기본 동작을 막을 수도 있습니다.

방법은 간단합니다. 코드를 보면 이해가 빠를겁니다.

$("#btn").on("click", function(e){
            e.preventDefault();
            $(".txt1").css({"background-color": "#ff0"});
        });

이벤트 핸들러 함수를 통해 해당 이벤트 실행시 callback 함수가 실행되게 됩니다. 

이떄 함수의 인자로 이벤트 객체(e)를 넘겨주기만 하면 됩니다. 아래 코드 처럼 편리하게 사용할 수 있습니다.

var x = e.clientX;
var y = e.clientY;

var key = e.keyCode;

e.stopPropagation();

 

 

마우스 이벤트

종류	설명
clientX	마우스 포인터의 X좌표값 반환(스크롤 이동 거리 무시)
clientY	마우스 포인터의 Y좌표값 반환(스크롤 이동 거리 무시)
pageX	스크롤 X축의 이동한 거리를 계산하여 마우스 포인터의 X좌표값을 반환
pageY	스크롤 Y축의 이동한 거리를 계산하여 마우스 포인터의 Y좌표값을 반환
screenX	화면 모니터를 기준으로 마우스 포인터의 X좌표값 반환
screenY	화면 모니터를 기준으로 마우스 포인터의 Y좌표값 반환
layerX	position을 적용한 요소를 기준으로 마우스 포인터의 X좌표값 반환
layerY	position을 적용한 요소를 기준으로 마우스 포인터의 Y좌표값 반환
button	마우스 버튼 종류에 따라 값을 변환(왼쪽:0, 휠:1, 오른쪽:2)

 

키보드 이벤트

종류	설명
keyCode	키보드의 아스키 코드값을 변환
altKey	이벤트 발생 시 Alt 키가 눌렸으면 true를, 아니면 false를 반환
ctrlKey	이벤트 발생 시 Ctrl 키가 눌렸으면 true를, 아니면 false를 반환
shiftKey	이벤트 발생 시 Shift 키가 눌렸으면 true를, 아니면 false를 반환

 

전체 이벤트

종류	설명
target	이벤트가 전파된 마지막 요소를 가리킵니다.
cancelBubble	이벤트 전파를 차단하는 속성으로, 기본값은 false며, true로 설정하면 전파가 차단됩다.
stopPropagation()	이벤트의 전파를 차단합니다.
preventDefault()	기본 이벤트를 차단합니다. 예를 들어 <a>에 클릭 이벤트를 적용하고 사용자가 이벤트를 발생시키면 기본 이벤트가 등록되어 있어 링크 주소로 이동하는데, 이런 기본 이벤트를 차단할 수 있습니다.

 

 

이벤트 등록과 해제

---

위에서 나온 이벤트를 어떻게 등록해서 사용하면 될까요?

이벤트 등록

 

○단독 이벤트 등록 메서드

 $("#btn").click(function(){
        $("#btn").parent().next()
        .css({"color":"#f00"});
    });

해당 이벤트를 직접 등록하는 방법으로 한가지의 이벤트만 필요로 할떄 사용합니다. 

 

 

이제 의문이 하나 들기 시작합니다. 하나의 대상에 대해서 여러개의 이벤트를 추가하고 싶으면 어떻게 할까요? 물론 이벤트를 하나씩 다 등록을 할 수 있지만, 같은 callback 함수를 반복해서 코딩하고 싶지는 않을 것같네요.

 

○이벤트 등록과 해제 메서드

등록	해제	설명
on()	off()	이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다. 사용 방식에 따라 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다.
bind()	unbind()	이벤트 대상 요소에 2개 이상의 이벤트를 등록합니다.
delegate()	undelegate()	선택한 요소의 하위 요소에 이벤트를 등록합니다. 이벤트를 등록한 이후에도 동적으로 생성되거나 복제된 요소에도 이벤트가 적용됩니다.
one()		이벤트 대상 요소에 1개 이상의 이벤트를 등록합니다. 지정한 이벤트가 1회 발생하고 자동으로 해제됩니다.

 

    $("#btn").on({
        "mouseover focus":function(){
            $("#btn").parent().next()
            .css({"color":"#0f0"});
        },

여러가지 이벤트를 동시에 등록해야한다면 on 메서드를 사용하면 편리합니다. on 메서드의 인자로 원하는 이벤트를 열거하면 됩니다.

 

 

이벤트 해제

$("#btn").off("click");
$("#btn").off("mouseover focus");

등록한 이벤트를 해제하고 싶을땐 off 메서드를 사용하면 쉽게 해제할 수 있습니다.

 

 

 

References

---

• https://api.jquery.com/category/events/

 

 

---

잘못된 코드나 내용이 있다면 댓글을 남겨주세요. 즉시 수정하도록 하겠습니다! :)