key pressing 누르거나 클릭중인 이벤트 예제

by 조쉬 posted Aug 29, 2018
?

단축키

Prev이전 문서

Next다음 문서

ESC닫기

크게 작게 위로 아래로 댓글로 가기 인쇄
먼저 이벤트를 동작하게 하는 트리거에는 클릭은 있지만 클릭중?이라것은 없습니다. 그런 이유로 직접 클릭이 계속되고 있음을 구현해야합니다. 하지만 생각해보면 간단하게 구현할 수 있습니다. 그 이유는 클릭을 하는 동작이 나누어져 있기 때문입니다. 이벤트 트리거에는 아래와 같이 구분됩니다.

  • 1. keydown  //  키가 눌러진 경우 동작
  • 2. keyup  //  키를 눌러진 후 다시 올라가는 경우 동작

이 두가지는 서로 반대되는 행동으로 keydown은 키가 눌러졌음을 그리고 keyup은 손에서 띄어졋음을 알 수 있죠. 이를 사용하여 keydown 이후에 keyup 이벤트가 빌생하지 않았다면 키를 계속 누르고 있음을 알 수 있겠죠!

마우스 역시 동일합니다. 아래의 두 가지 트리거를 통하여 현재 클릭중인지 아닌지를 판단할 수 있죠.

  • 1. mousedown  //  마우스가 눌러진 경우 동작
  • 2. mouseup  //  마우스가 눌러진 후 다시 올라갈 때 동작



! 참고사항
또 다른 이벤트 트리거인 keypress는 이처럼 키를 계속해서 누르고 있을때 발생하는 것으로 생각할 수 있습니다. 하지만 key가 눌러졌을때 이벤트가 나타나며 우리가 원하는 동작은 아닙니다.

이제 위 방법을 사용하여 예제를 하나 만들어보겠습니다. 아래 코드를 봐주세요.


! 잠깐... click 이벤트와 mousedown 또는 mouseup의 차이점
혹시 이 둘의 차이점을 모르신 다면 간단하게 설명해보겠습니다. 마우스를 누르는 경우 마우스에 행해지는 동작은 두 가지, 마우스를 버튼을 누를 때와 손에 떼어 마우스 버튼이 다시 올라갈 때 두 가지로 구분될 수 있습니다. 마우스의 드래그를 생각하면 좀 더 명확한데~ 드래그 동작은 마우스가 눌러진 상태에서만 동작하게 되죠.

# 키보드 또는 마우스 계속 누르는 이벤트 예제이번 예제는 두 개의 버튼이 존재합니다. + 표시를 누르면 1이 올라가고 - 표시를 누르면 1이 내려가죠. 이때 + 표시를 계속해서 클릭하는 경우 숫자가 누를때 까지 계속해서 올라가도록 만들고자 합니다. 물론 - 표시를 계속 클릭할 경우 숫자는 계속 내려가야겠죠.


@ key_pressing.html

<input id="count" type="number" value="0" />
<button id="plus">+</button>
<button id="minus">-</button>


@ key_pressing.js
var plusEle = document.querySelector('#plus');
var minusEle = document.querySelector('#minus');
var isPressed = false;

plusEle.addEventListener('mouseup', function(event) {
  isPressed = false;
});

plusEle.addEventListener('mousedown', function(event) {
  isPressed = true;
  doInterval('1');
});

minusEle.addEventListener('mouseup', function(event) {
  isPressed = false;
});

minusEle.addEventListener('mousedown', function(event) {
  isPressed = true;
  doInterval('-1');
});

function doInterval(action) {
  if (isPressed) {
    var countEle = document.querySelector('#count');
    count.value = parseInt(count.value) + parseInt(action);

    setTimeout(function() {
      doInterval(action);
    }, 200);
  }
};

이제 마우스를 계속 누르는 경우 숫자가 계속 오르거나 계속 내리게되는 예제가 만들어졌습니다. 아래는 이를 직접 구현한 모습입니다. 직접 클릭해보세요.