jQuery 메소드와 이벤트 2 ( input 태그 관련 이벤트 )

• input 태그 관련 이벤트
  - focus : input 태그에 포커스가 맞춰졌을 때
                ex) text인 경우 cursor가 깜빡거릴 때
  - blur : 포커스가 해제되었을 때
  - change : input 태그의 값이 변했을 때
                   1) checkbox, radio, select (마우스 선택 요소) → 값이 변했을 때 change 이벤트 발생
                   2) text 관련 요소 (키보드로 값이 변경하는 요소)
                       → 포커스가 해제되었을 때 이전 값과 다를 경우 change 이벤트 발생
  - select : 선택한 요소 입력 영역 값에 블럭이 설정된 경우
  - input : 입력과 관련된 모든 이벤트

focus / blur : <input type="text" id="focus-blur"> <br>

change 1 : <input type="checkbox" id="change1"> <br>
change 2 : <input type="text" id="change2"> <br>

select : <input type="text" id="select"> <br>

// input 태그 관련 이벤트

// 아이디가 focus-blur인 요소에 초점이 맞춰진 경우
// 배경색을 pink로 바꾸는 동작 추가
$("#focus-blur").on("focus", function(){
  $(this).css("backgroundColor", "pink");
})

// 아이디가 focus-blur인 요소에 초점이 해제된 경우
// 배경색을 원래대로 바꾸는 동작을 추가
$("#focus-blur").on("blur", function(){
  $(this).css("backgroundColor", "initial");
})

// 아이디가 change1인 요소의 체크/해제 될 때마다
// 콘솔에 "checkbox 값이 변경되었습니다." 출력
$("#change1").on("change", function(){
  console.log("checkbox 값이 변경되었습니다.");
})

// 아이디가 change2인 요소의 입력값이 변한 상태로 포커스가 해제될 때마다
// 콘솔에 "입력값이 변경되었습니다." 출력
$("#change2").on("change", function(){
  console.log("입력값이 변경되었습니다.");
})

// 아이디가 select인 요소의 입력값에 블럭이 잡힌 경우
// 콘솔에 "입력값이 블럭이 잡힙." 출력
$("#select").on("select", function(){
 console.log("입력값이 블럭이 잡힙.");
})

See the Pen 24-12-25 jquery 4-2 by Namu (@Namu-the-sans) on CodePen.

---

값이 변했을 때 chage 이벤트 발생

값이 변했을 때 chage 이벤트 발생

---

포커스가 해제되었을 때 이전 값과 다를 경우 change 이벤트 발생

---

입력 값의 영역에 블럭이 설정된 경우