Jquery[제이쿼리] focus() blur()메서드 배우기

안녕하세요~ 주니주니 입니다.

오늘은 제이쿼리[jquery] focus() blur()메서드 배워보겠습니다.

간단하게 준비해보았습니다.!

기본틀 확인만 해주시고 넘어가주세요.

===============================
 $('.text2').on('focus',function(){
   $('.text2').css({
    'background': "red",
    'color': "white",
    'border': "1px solid red"
   });
   alert("text2:focus"); 
  });
===============================

class text2가 주목[focus]받으면 
class text2의 css부분을 저렇게 바꾸고
 alert()메서드를 이용하여 text2:focus라고 값을 찍어라고 코딩하였습니다.
※focus()메서드는 $(대상).focus(); 이렇게 쓸경우는 어제배워보았습니다.
오늘은 대상에 주목[focus]받으면 무슨일을 하라 이렇게 쓰이게되었답니다.

실행을 한뒤 text1에 주목[focus]받았지만 아무증상이없는 모습입니다.
이상태서 탭[Tab]이나 마우스로 클릭할경우

text2에 주목[focus]받아서 이렇게 화면에 나오게되었답니다.

===============================
$('.text4').on('blur',function(){
   $('.text4').css({
    'background': "red",
    'color': "white",
    'border': "1px solid red"
   });
   alert("text4:blur"); 
  });  
===============================
위에서 설명한 내용이랑 같지만 blur()메서드만 달라요!
※blur()메서드는 focus()메서드랑 반대라고 생각하시면 편하답니다.
focus()메서드는 주목[focus]받으면 무슨일을 하는것이고 
blur()이아이는 주목[focus]받은상태에서 무관심형태로 변화면 무슨일을 하는 아이랍니다.
즉 주목[focus]받으면 모르는척 하다가 관심이사라지면 삐지는 아이에요.

text4에 관심을 주었지만! 무뚝뚝한 녀석은 모르는척을해요!

text4에 관심을 주어도 아무반응이 없길레 다른아이에게 관심을 주니! 버럭!
하면서 반응을하네요!

focus()는 주목받을때! 일어나는 메서드입니다.
blur()는 주목받다가 주목을 받지못할때 일어나는 메서드입니다.

오늘은 제이쿼리[jquery] focus() blur()메서드 배워보았습니다.
그럼다음에 또만나요~