jquery - focus, blur, focusin/foucusout

※focus는 마우스로 a나 input 태그를 클릭하거나 tab키를 누르면 생성된다.
 

• focus()는 대상 요소로 포커스가 이동하면 이벤트 발생.
• blur()는 포커스가 대상 요소에서 다른 요소로 이동하면 이벤트 발생.
• focusin는 대상 요소의 하위 요소 중 입력 요소로 포커스가 이동하면 이벤트 발생.
• focusout는 대상 요소의 하위 요소 중 입력 요소에서 외부 요소로 이동하면 이벤트를 발생.

 

*예제

HTML

    <form action="#">
        <p>
            <label for="used_id_1">ID</label>
            <input type="text" name="user_id_1" id="user_id_1">
        </p>
        <p>
            <label for="used_pw_1">PW</label>
            <input type="password" name="user_pw_1" id="user_pw_1">
        </p>
    </form>

    <form action="#" id="frm_2">
        <p>
            <label for="used_id_2">ID</label>
            <input type="text" name="user_id_2" id="user_id_2">
        </p>
        <p>
            <label for="used_pw_2">PW</label>
            <input type="password" name="user_pw_2" id="user_pw_2">
        </p>
    </form>

jquery

$(function(){
    $("#user_id_1, #user_pw_1").on("focus", function(){
        $(this).css({"background-color":"pink"});        
    });

    $("#user_id_1, #user_pw_1").on("blur", function(){
        $(this).css({"background-color":"#fff"});        
    });

    $("#frm_2").on("focusin", function(){
        $(this).css({"background-color":"pink"});        
    });

    $("#frm_2").on("focusout", function(){
        $(this).css({"background-color":"#fff"});
    });
});



설명
focus는 아이디 창에 마우스로 클릭하면 핑크색으로 변함,
blur는 마우스 클릭되서 핑크 상태인데 비밀번호 창으로 클릭을 바꾸면 흰색으로 바뀜.

focusin은 id frm_2를 가진 form요소의 하위 요소인 입력요소(아이디, 비번 창)에
마우스를 클릭할 경우 아이디, 비번창이 아닌 그 요소를 묶고 있는 form 요소에 색이 핑크색으로 바뀜

focusout은 id frm_2를 가진 form요소의 하위 요소인 입력요소(아이디, 비번 창)에
마우스를 frm_2의 하위 입력창 외에 요소로 이동하면 frm_2요소에 색이 흰색으로 바뀜

 

*focus

 

 

*fucusin