[jQuery] 이벤트

기본 코드

#  이벤트 등록

$("요소").on("이벤트1 이벤트2 ...", function() {
    // 코드
});

// 또는

$("요소").이벤트(function() {
    // 코드
});

#  이벤트 강제 실행

$("요소").이벤트();

#  이벤트 취소

$("요소").off("이벤트1 이벤트2 ...");

#  태그가 가진 기본 이벤트 차단

$("요소").on("이벤트", function() {
    return false;
});

// 또는

$("요소").on("이벤트", function(e) {
    e.preventDefault();
});

  - 기본 이벤트

     ex) a 태그 : 링크 기능

     ex) submit 버튼 : 폼을 전송하는 기능

 

 

---

#  요소 무리 중, 이벤트가 발생한 요소의 인덱스 반환

$("요소").on("이벤트", function) {
    $("요소").index(this);
});

#  값이 바뀌었을 때

$("이벤트대상").on("change", function() { 코드 ; });

  - 콤보박스에서 다른 값을 선택할 때, 텍스트박스에 다른 값을 입력할 때, ...

 

 

---

로딩 이벤트

#  ready()

$(document).ready(function() { 코드; });
// 또는
$(document).on("ready", function() { 코드; });

  - 사용자가 사이트를 방문할 때 요청한 HTML 문서 객체의 로딩이 끝나면 코드 실행

  - 외부 연동 소스가 만들어지기 전에 실행됨

#  load()

$(window).load(function() { 코드; });
// 또는
$(window).on("load", function() { 코드; });

  - 외부 연동 소스의 로딩이 끝나면 코드 실행

     ex) <img>, <iframe>, <video>

 

 

반응형

728x90

---

마우스 이벤트

#  클릭 이벤트

  - 한 번 클릭 : click()

  - 더블 클릭 : dblclick()

 

#  해당 요소에 마우스를 올리거나 뗐을 때

  - 마우스를 올렸을 때 : mouseover()

  - 마우스를 뗐을 때 : mouseout()

  - 동시 지정

$("요소").hover(
    // 마우스 올렸을 때 코드
    function() {};
    // 마우스 뗐을 때 코드
    function() {};
);

 

#  해당 요소가 포함된 범위에 마우스를 올리거나 뗐을 때

  - 마우스를 올렸을 때 : mouseenter()

  - 마우스를 뗐을 때 : mouseleave()

 

#  마우스 움직임에 따른 포인터 위치 반환

$("요소1").on("mousemove", function(매개변수) { 
    $("요소2").text(매개변수.pageX);  // x 좌표가 텍스트로 입력됨
    $("요소3").text(매개변수.pageY);  // y 좌표가 텍스트로 입력됨
});

 

---

키보드 이벤트

#  키보드 자판을 눌렀을 때

// 한영키 제외 모든 키에 대해 반응
$("이벤트대상").on("keydown", function() { 코드 ; });


// 기능키에 대해 반응 X
$("이벤트대상").on("keypress", function() { 코드 ; });

  - 매개변수.keyCode : 키별 코드

     → 현재 눌린 키가 무슨 키인지 확인 가능

 

#  키보드 자판을 눌렀다가 뗐을 때

  - keyup()

 

 

---

포커스 이벤트

  - [TAP] 키를 누르거나 커서로 클릭하여 해당 요소가 선택되면 이벤트 발생

 

#  해당 요소를 대상으로 한 이벤트

  - 요소에 포커스를 둠 : focus()

  - 요소에서 포커스가 벗어남 : blur()

 

#  해당 요소의 상위 요소를 대상으로 한 이벤트

  - 요소에 포커스를 둠 : focusin()

  - 요소에서 포커스가 벗어남 : focusout()