50. Jquery - Event

1. Event

1. JqueryEvent

1. Jquery의 이벤트도 자바스크립트와 마찬가지로 사용자 동작에 매핑돼서 실행될 기능들을 미리 구현해 놓는 것.
2. 이벤트 등록 방식
   • 선택자.이벤트(click, dblclcik, load, ready, ...)(콜백함수);

     $("선택자").click(() => {
       alert("클릭");
     });

   • 선택자.on("이벤트", 콜백함수);

     $("선택자").on("click", () => {
       alert("클릭");
     });

3. 동적으로 생성되는 태그들에는 위 이벤트 등록방식은 먹히지 않는다. 동적 태그의 이벤트 등록방식은 $(document).on("이벤트", "선택자", 콜백함수);

let htmlStr = `
    <button type="button" id="btn">버튼</button>
`
$("body").append(htmlStr);

$("#btn").on("click", () => {
    //동적태그에 이방식의 이벤트 등록은 지원되지 않는다.
});

$(document).on("click", "#btn", () => {
    //동적 생성 태그에 대한 이벤트 등록
});

2. 로딩 이벤트

1. 로딩 이벤트는 HTML 웹 문서나 HTML 웹 문서 안의 지정된 객체, 이미지, 프레임 등이 로드된 후 실행될 기능을 정의할 수 있는 이벤트
2. ready(): 문서 객체를 먼저 불러올 때 사용. HTML 웹 문서의 body부분이 모두 로드 된 후에 실행되는 기능정의. 이미지, url로 걸어놓은 링크 파일들이 로드되기 전.
3. load(): HTML 웹 문서가 모두 로드된 후에 실행되는 기능정의. 이미지, url로 걸어놓은 링크 파일들이 로드되기 후.

$(document).ready(콜백함수);
$(document).on("ready", 콜백함수);

$(이미지나 프레임등 선택자).load(콜백함수);
$(이미지나 프레임등 선택자).on("load", 콜백함수);

3. 마우스 이벤트

1. 마우스를 클릭, 더블클릭, 커서이동 ... 등에 대한 이벤트 기능을 정의해 놓는 것
2. click()|dblclick(): 마우스 클릭/더블클릭에 대한 이벤트 기능 할당

선택자.click|dblclick(콜백함수);
선택자.on("click|dblclick", 콜백함수);

3. click, dblclick 이벤트 강제 발생: 클릭이나 더블클릭이 일어난 것처럼 강제로 기능을 실행 시킴.

선택자.click|dblclick();
선택자.trigger("click|dblclick");

4. mouseover/mouseout/hover: 마우스 커서가 해당 태그에 올라갔을 때 실행시킬 기능을 정의하는 것은 mouseover, 마우스 커서가 해당 태그에서 빠져나올 때 기능을 정의하는 것은 mouseout, mouseover의 기능을 둘 다 정의할 수 있는 것 hover.

선택자.mouseover|mouseout(콜백함수);
선택자.on("mouseover|mouseout", 콜백함수);
선택자.hover(마우스오버일때 콜백함수, 마우스아웃일 때 콜백함수);

5. mouseover/mouseout의 강제 이벤트 발생

선택자.mouseover|mouseout();
선택자.trigger("mouseover|mouseout");

4. focus 이벤트

1. 특정 태그에 포커스가 가거나 빠져나갈 때 기능을 정의하는 이벤트
2. focus()/focusin(): 특정 태그에 포커스가 갔을 때의 기능 정의
3. blur()/focusout(): 특정 태그에서 포커스가 빠져나갔을 때의 기능 정의

선택자.focus|focusin|blur|focusout(콜백함수);
선택자.on("focus|focusin|blur|focusout", 콜백함수);

4. focus|focusin|blur|focusout 강제 이벤트 발생

선택자.focus|blur();
선택자.trigger("focus|blur");

5. change(): 선택한 태그의 value값이 변경되고 포커스가 빠져나갔을 때의 기능 정의하는 이벤트

선택자.change(콜백함수);
선택자.on("change", 콜백함수);

6. change 강제 이벤트 발생

선택자.change();
선택자.trigger("change");

5. 키보드 이벤트

1. 키보드의 키가 눌려지거나 떼어질 때의 기능을 설정할 수 있는 이벤트
2. keydown()/keypress()/keyup(): keydown은 키가 내려갔을 때, keyup은 키가 올라갔을 때 keypress는 키가 눌렸을 때의 기능 정의
3. keydown은 물리적으로 어떤 키가 눌렸는지에 관심이 있고 keypress은 실제 어떤 값이 입력됐는지에 관심이 있다.

선택자.keydown|keyup|keypress(콜백함수);
선택자.on("keydown|keyup|keypress", 콜백함수);

4. keydown|keyup|keypress의 강제 이벤트 호출

선택자.keydown|keyup|keypress();
선택자.trigger("keydown|keyup|keypress");

6. 그룹 이벤트 등록

1. Jquery에서는 그룹 이벤트 등록 기능을 통해서 여러 이벤트에 동시에 같은 기능을 정의할 수 있다.
2. 그룹 이벤트 등록 시에는 on 키워드를 사용한다.

선택자.on("이벤트1, 이벤트2, ..., 이벤트n", (e) => {
    //이벤트별 기능 분리
    switch(e.type) {
        case "click":
    }
});
선택자.on("이벤트1 이벤트2 ... 이벤트n", (e) => {
    //이벤트 모두 같은 기능 설정
});
선택자.on({
    "이벤트1": () => {

    },
    "이벤트2": () => {

    },
    ...,
    "이벤트n": () => {

    }
})