TIL no.07 - jQuery - 입력 양식 이벤트

1. 입력 양식 이벤트

이벤트 이름	설명
change	입력 요소의 내용이 변경되었을 때 발생
focus	입력 요소에 초점이 맞춰질 때 발생
focusin	입력 요소에 초점이 맞춰지기 직전에 발생
focusout	입력 요소에 초점이 사라지기 직전에 발생
blur	입력 요소에 초점이 사라질 때 발생
select	입력 요소에서 문자를 선택할 때 발생 (input[type=text]와 textarea
submit	입력 양식을 제출할 때 발생 (submit 버튼 클릭, form 요소에서 발생)
reset	입력 양식을 초기화할 때 발생 (reset 버튼 클릭, form 요소에서 발생)

---

* prop( ) 메서드

• $(selector).prop(name);
• $(selector).prop(name, value);

attr( ) 메서드 : HTML요소의 속성 (attribute)
prop( ) 메서드 : 문서 객체의 속성 (property)

<input type="checkbox" checked="checked">

elem.checked	true	체크박스 상태에 따라 변화
$(elem).prop("checked")	true	체크박스 상태에 따라 변화
elem.getAttribute("checked")	"checked"	초기 체크박스 상태
$(elem).attr("checked")	"checked"	(1.6) 초기 체크박스 상태
$(elem).attr("checked")	"checked"	(1.6.1+) 체크박스 상태에 따라 변화
$(elem).attr("checked")	true	(pre-1.6) 체크박스 상태에 따라 변화

---

1.1. change 이벤트

// 입력 요소 객체의 현재 상태 변경
$("#all").on("change", function () {
  if ($(this).is(":checked", true);
      $("input.opt").prop("checked", true);
  else
      $("input.opt").prop("checked", false);
});

1.2. focus 이벤트

• $(selector).focus( );
• $(selector).focus(eventHandler);

// 선택된 문서 객체에 focus 이벤트 강제 발생
$("name").focus();

1.3. blur 이벤트

• $(selector).blur( );
• $(selector).blur(eventHandler);

// 문서 객체의 포커스 상태 강제 해제
$("#name").on("focus", function () {
  $(this).blur();

1.4. submit 이벤트

• $(selector).submit( );
• $(selector).submit (eventHandler);

$("#order").on("submit", function (event) {
  event.preventDefault( );
  // document.getElementById("name").value
  alert("Name : " + $("#name").val());
});