[jQuery] 제이쿼리 이벤트

*출처: Do it! 자바스크립트 + 제이쿼리 입문, 정인용, 이지스퍼블리싱

 

Ch 7. 제이쿼리 이벤트

7-1. 이벤트 등록 메서드

1) 단독 이벤트 등록 메서드 

- 단독 이벤트 등록 메서드: 대상에 한 가지 동작에 대한 이벤트만 등록할 수 있다.

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

...
<button id="btn1">버튼</button>
...
<script>
  $("#btn1").click(function(){
    alert("welcome");
  });
</script>

 

 

2) 그룹 이벤트 등록 메서드 

- 그룹 이벤트 등록 메서드: 대상에 한 가지 동작 이상의 이벤트를 등록할 수 있다. '.on()' 메서드를 사용하여 이벤트를 등록한다.

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

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

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

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

/* 사용자가 버튼에 마우스 포인터를 올리거나 
키보드를 사용하여 버튼에 포커스를 맞추면 환영 메시지가 콘솔 패널에 출력된다. */

<button id="btn1">버튼</button>

//on()메서드 등록 방식 1
$("#btn1").on("mouseover focus", function(){
  console.log("welcome");
})

//on()메서드 등록 방식 2
$("#btn1").on({"mouseover focus" : function(){
  console.log("welcome");
 }
});

//on()메서드 등록 방식 3
$("#btn1").on({
  "moseover" : function() {
    console.log("welcome");
  },
  "focus" : function(){
    console.log("welcome");
  }
});

3) <a>, <form> 태그에 클릭 이벤트 적용 시 기본 이벤트 차단하기 

- <a> 요소에 click이나 dbclick을 등록하면 클릭할 때마다 <a> 에 링크된 주소로 이동하는 문제가 발생한다. 이 문제를 해결하려면 <a> 요소의 기본 이벤트를 차단해야 한다.

- <form> 요소의 제출 버튼(submit)도 action에 등록된 주소로 이동시키는 문제가 발생한다.

- 우리가 등록한 이벤트를 정상적으로 수행하려면 기본 이벤트를 차단해야 한다.

// 1. return false를 이용한 차단 방식

$("a 또는 form").이벤트 메서드(function(){
  자바스크립트 코드;
  return false;
});


// 2. preventDefault() 메서드를 이용한 차단 방식
$("a 또는 form").이벤트 메서드(function(e){
  e.preventDefault();
  자바스크립트 코드; 
});