jquery - mouseover / mouseout

※mouseover등 mouse이벤트와 다르게 focus는 마우스 키보드 둘다 가능.
  키보드 접근성 고려.

 

 

<p><button id="btn1">버튼1</button></p>
<p><button id="btn2">버튼2</button></p>
<p class="txt"></p>
---------------------------------------------


$(function() {
    $("#btn1").data({"text":"javascript"})
    .on({
        "mouseover": overFnc,
        "mouseout": outFnc
    });

// ==================================================

    $("#btn2").data({"text":"welcome"})
    .on({
        "mouseover focus": overFnc,
        "mouseout blur": outFnc
    });

// ==================================================

    function overFnc() {
        $(".txt").text($(this).data("text"));
    }
    function outFnc() {
        $(".txt").text("");
    }
});


결과
btn1은 mouseover 만 적용했기 때문에 버튼에 마우스를 올리면 javascript 출력
하지만 키보드로 tab을 눌러서 접근하면 반응 없음

btn2는 mouseover focus에 focus가 같이 들어있기때문에 마우스를 올리거나,
키보드로 tab을 눌러서 접근하면 welcome 출력 

 - overFnc와 outFnc는 중복 적용이 되므로 함수를 밖에서 따로 만들어 호출함