[Do it!] 제이쿼리 이벤트

1. 제이쿼리 이벤트

사용자가 웹사이트에 방문하여 취하는 모든 동작은 '이벤트'라고 하고, 이벤트가 발생했을 때 실행되는 코드를 '이벤트 핸들러'라고 한다.

---

2. 이벤트 등록 메소드

이벤트 등록 메소드에는 하나의 이벤트만 등록할 수 있는 '단독 이벤트 등록 메소드'와 2개 이상의 이벤트를 등록할 수 있는 '그룹 이벤트 등록 메소드'가 있다.

이벤트의 기본형은 아래와 같다.

<button id = 'btn'>버튼</button>

$("#btn").click(function(){자바스크립트 코드;});

①("#btn") : 이벤트 대상
②click() : 이벤트 등록 메소드
③function(){자바스크립트 코드;} : 이벤트 핸들러

---

3. 이벤트 등록 방식

한 가지 동작에 대한 이벤트 등록 방식은 단독 이벤트 등록 메소드나 그룹 이벤트 등록 메소드를 사용하고, 두 가지 이상의 동작에 대한 이벤트 등록 방식은 그룹 이벤트 등록 메소드를 사용한다.

(1) 단독 이벤트 등록 메소드

$("이벤트 대상 선택").이벤트 등록 메소드(function(){자바스크립트 코드;});

(2) 그룹 이벤트 등록 메소드

//ver 1.
$("이벤트 대상 선택").on("이벤트 종류1 종류2 ~", function(){자바스크립트 코드;});

//ver 2.
$("이벤트 대상 선택").on({"이벤트 종류1 종류2 ~ " : function(){자바스크립트 코드;}"})

//ver 3.
$("이벤트 대상 선택").on({
    "이벤트 종류1" : function(){자바스크립트 코드;},
    "이벤트 종류2" : function(){자바스크립트 코드;},
    ~~~
    });

(3) 강제로 이벤트 발생시키기

사용자에 의해 이벤트가 발생한것이 아니라 핸들러에 의해 자동으로 이벤트가 발생했다는 의미이다. 강제로 이벤트를 발생시키려면 단독 이벤트 등록 메소드를 사용하거나 trigger()메소드를 사용하면 된다.

$("이벤트 대상").단독 이벤트 등록 메소드();
$("이벤트 대상").trigger("이벤트 종류");

(4) 이벤트 제거 메소드

이벤트를 제거하려면 off()메소드를 이용하면 된다.

$("이벤트 대상").off("제거할 이벤트 종류");

---

4. 단독 이벤트 등록 메소드

단독 이벤트 등록 메소드는 로딩 이벤트, 마우스 이벤트, 포커스 이벤트, 키보드 이벤트, 기타 이벤트로 한번 더 나눌 수 있습니다.

(1) 로딩 이벤트 메소드

(2) 마우스 이벤트

❓❓ 이때 mouseover()과 mouseenter()메소드의 차이는?
→ mouseover() 메소드는 대상 요소에 마우스 포인터가 올라가면 발생하는 이벤트이고, mouseenter() 메소드는 대상 요소가 포함된 범위에 마우스 포인터가 올라가면 발생하는 이벤트이다.

❓❓ 이때 mouseout()과 mouseleave()메소드의 차이는?
→ 위와 유사하게, mouseout() 메소드는 대상 요소에서 마우스 포인터가 벗어나면 발생하는 이벤트이고, mouseleave() 메소드는 대상 요소가 포함된 범위에서 마우스 포인터가 완전히 벗어나면 발생하는 이벤트이다.

(3) 포커스 이벤트

마우스가 없는 사용자는 키보드만을 사용한다. 이때 사용자가 키보드만으로 사이트를 이용해도 불편하지 않도록 제이쿼리가 잘 작동되어야 하는데, 이를 키보드 접근성이라고 한다.
키보드 접근성을 높이기 위해서는 마우스 이벤트를 등록할 때 가능한 a태그나 input태그에 등록하거나 마우스 이벤트에 대응하는 키보드 이벤트를 등록해야 한다.

🔍마우스 이벤트에 대한 키보드 대응 이벤트🔍

마우스 이벤트	키보드 이벤트
mouseover	focus
mouseout	blur

따라서 mouseover만 추가하지 말고 focus와 함께 적용시켜주기로 하자!
키보드로는 tab키를 누르면 포커스를 이동시킬 수 있다!

(4) 키보드 이벤트

❓❓ keypress()와 keydown()의 차이점은??
→ keypress()메소드는 기능키에 대해서는 이벤트를 발생시키지 않고, keydown()메소드는 한글 키를 제외한 모든 키에 대해서 이벤트를 발생시킨다.

(5) 이벤트가 발생한 요소 추적

이벤트 핸들러에서 $(this)를 이용하면 이벤트가 발생한 요소를 선택하여 추적할 수 있다.
또한 index()메소드를 사용하면 이벤트를 등록한 요소 중에 이벤트가 발생한 요소의 인덱스 값을 반환할 수 있다.

index() 메소드 기본형

$("이벤트 대상 선택").on("이벤트 종류", function(){
    $("이벤트 대상 선택").index(this);
});

(6) 이벤트 핸들러의 매개변수 : 이벤트 객체

사용자가 이벤트를 발생시킬 때 마다 이벤트 핸들러의 매개변수에는 이벤트 객체가 생성된다. 이벤트 객체에는 각 타입에 맞는 속성과 메소드가 포함되어 있는데 아래와 같은 기본형으로 사용된다.

$("이벤트 대상 선택").mousemove(function(매개변수){
    매개변수(이벤트 객체).속성;
});

---

5. 그룹 이벤트 등록 메소드

(1) 그룹 이벤트 등록 메소드

종류
on()
bind()
delegate()
one()

동적으로 생성된 요소에도 이벤트가 등록되게 하려면 아래와 같은 방식으로 on()메소드를 이용해야 한다. 이때 동적으로 생성된 요소라 함은, 객체 조작 메소드에 의해 새롭게 생성, 복제된 요소같은 것을 말한다.

$(document 또는 "이벤트 대상의 상위요소").on("이벤트 종류", "이벤트 대상", function(){
  자바스크립트 코드;
});

//예시
$(function(){
    $(document).on("mouseover focus",".btn_2.on",function(){
        alert("hello");
    });
    $(".btn_2").addClass("on");
}); 

//잘못된 예시(여태까지 사용한 방식)
$(function(){
    $(".btn_2.on").on("mouseover focus",function(){
        alert("hello");
    });
    $(".btn_2").addClass("on");
}); 

delegate()메소드는 선택한 요소의 하위 요소에 이벤트를 등록하고, 이벤트를 등록한 이후 동적으로 생성된 요소와 복제된 요소에도 이벤트를 등록한다.

$(document 또는 "이벤트 대상의 상위요소").delegate("이벤트 대상", "이벤트 종류", function(){
  자바스크립트 코드;
});

one()메소드는 일회성이다. 즉, 이벤트가 1회 발생하면 자동으로 이벤트가 제거된다. one() 이벤트 등록 메소드 역시 등록 방식에 따라 동적으로 이벤트를 등록할 수 있다.

//일반 이벤트 등록
$("이벤트 대상").one("이벤트 종류", function(){
  자바스크립트 코드;
});
//동적 이벤트 등록
$(document 또는 "이벤트 대상의 상위요소").one("이벤트 종류", "이벤트 대상", function(){
  자바스크립트 코드;
});

bind()메소드는 동적으로 이벤트를 등록할 수 없다. 해당 메소드는 이벤트 대상 요소에 2개 이상의 이벤트를 등록할 수 있다.

(2) 그룹 이벤트 제거 메소드

종류	제거 대상
off()	on()
unbind()	bind()
undelegate()	delegate()

제이쿼리의 다양한 효과와 애니메이션은 다음글에서 다루도록 하겠다!