메뉴 건너뛰기

조회 수 1619 추천 수 0 댓글 0
?

단축키

Prev이전 문서

Next다음 문서

크게 작게 위로 아래로 댓글로 가기 인쇄
?

단축키

Prev이전 문서

Next다음 문서

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

  • 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);
  }
};

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

List of Articles
번호 제목 날짜 조회 수
207 [INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다 2017.02.19 8526
206 Location 객체 - URL 파싱 - URL에서 전달인자 추출하기 함수 작성 file 2015.06.19 8523
205 페이지 로드 할때 컨트롤에 포커스 주기 2015.02.03 8500
204 [단축키 설정 자바스크립트]shortcut.js 2016.12.22 8375
203 2단계 트리메뉴 마우스오버(mouseover), 온포커스(onfocus) 구현 2015.04.06 8201
202 드롭다운 메뉴를 만들어보자! -1탄 file 2015.02.03 8168
201 setTimeout() / clearTimeout() / setInterval() 2016.12.22 8162
200 브라우저별 이미지 크기 변경 file 2016.11.17 7928
199 복사방지+드래그금지+마우스우클릭 금지 2016.12.22 7909
198 정규식을 이용한 실시간 콤마(comma) 넣기 2015.06.19 7876
197 [라디오버튼 오류 체크] 간단한 문제 예제 file 2015.06.19 7712
196 양력-음력 2015.02.03 7657
195 날짜 간의 일수 계산 2014.02.27 7551
194 'checkbox', 체크박스 모두체크 그리고 모두해제! file 2015.02.03 7492
193 체크박스 체크하면 레이어 보여주기. 체크안하면 알려주기 2014.03.01 7458
192 [jQuery] textarea 글자수 카운트 2014.03.01 7420
191 response.setHeader 2016.12.22 7358
190 'blur', 이미지 클릭시 테두리를 없애자! file 2015.02.03 7353
189 'opener', 부모창과 자식창의 텍스트를 교환하자! file 2015.02.03 7308
188 창에 대한 정보얻기 (창 크기, 창 위치) file 2015.06.19 7297
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

하단 정보를 입력할 수 있습니다

© k2s0o1d4e0s2i1g5n. All Rights Reserved