지난 시간에 d3.on()함수로 "click" 이벤트를 실험 했었습니다. 그러다 문득 키보드 키를 눌렀을 때 이벤트 발생이 궁금해서 찾아보니 "keydown" type으로 key 이벤트를 발생할 수 있음을 알게 되었고 key 이벤트를 실험을 하게 되었습니다. 오늘은 간단히 정리한 key 이벤트를 알아보도록 합시다.
key 이벤트는 HTML의 body 태그에서 이벤트가 발생하게 만들어 볼까요.
예)
d3.select("body").on("keydown", function() { ... });
이렇게 하면 body 태그가 선택되고 이 body 태그 안에서 키보드의 key가 눌러지면 이벤트가 발생하게 됩니다.
그리 어렵지 않게 키보드 이벤트를 발생시키죠.
단순히 on("keydown",동작)함수만으로 이벤트 처리를 하면 뭔가 문제가 있습니다. 그것은 키보드의 어떤 key를 누르더라도 이벤트가 발생하게 됩니다. 정확히 어떤 key를 눌렀는지를 알 수 있으면 좋겠죠.
그것은 바로 다음과 같은 함수로 누른 key 값을 알 수 있습니다.
현제 누른 키 : d3.event.keyCode
이렇게 키값을 얻을 수 있습니다.
실험 내용 :
body 영역에 key 이벤트 발생 코딩은 다음과 같습니다.
d3.select("body")
.on("keydown", function() {
캔버스 영역에 키값 출력;
});
캔버스 영역 설정하기 :
var canvas = d3.select("body").append("svg")
.attr("width",300)
.attr("height",300)
.style("background-color","yellow")
캔버스 영역에 키값 출력 :
canvas.append("text") //키값 출력
.attr("x","100")
.attr("y","150")
.style("font-size","20px")
.text("key Value: " + d3.event.keyCode)
캔버스 영역에 text로 출력하는데 출력 위치는 좌표(100,150)에 출력하는데 글자크기는 20px이고 내용은 d3.event.keyCode(누른키값)을 출력한다.
참고로 이렇게 계속 다양한 키를 누르면 출력 text가 동일한 위치에 겹쳐서 출력되기 때문에 지져분해진다.
그래서, 기존의 출력한 text를 제거해야 한다.
canvas.select("text").remove(); //이전값 제거;
여기서 select()함수를 사용해도 되고 selectAll()함수를 사용해도 됩니다.
종합해보면,
[종합 소스]
<body>
<script src="https://d3js.org/d3.v5.min.js"></script>
<script>
var canvas = d3.select("body").append("svg")
.attr("width",300)
.attr("height",300)
.style("background-color","yellow")
d3.select("body")
.on("keydown", function() {
canvas.select("text").remove(); //이전값 제거;
canvas.append("text") //키값 출력
.attr("x","100")
.attr("y","150")
.style("font-size","20px")
.text("key Value: " + d3.event.keyCode)
});
</script>
</body>
[결과]
주말이라서 간단한 예제로 key event를 실험 했네요. 좀 복잡한 예제를 만들기 귀찮아서 단순하게 키값만 출력하는 예제를 실험 했습니다.
어렸을 때-터널이 무서웠어요. 그 시커멓게 뚫린 입은 마치 내가 다가서면 삼켜버릴 것만 같았어...