키보드로 마우스 이벤트 대응하기
키보드 접근성이란 어떤 대상 요소에 마우스 이벤트를 등록했을때 마우스 없이 키보드로 대상 요소를 사용할 수 있게 하는 것
mouseover - focus
mouseout - blur
$.data() : 요소에 데이터를 저장하고, 필요한 경우 데이터를 가져오거나 수정할 수 있음.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<title>Document</title>
<script>
$(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('');
}
});
</script>
</head>
<body>
<p><button id="btn1">버튼1</button></p>
<p><button id="btn2">버튼2</button></p>
<p class="txt"></p>
</body>
</html>