메뉴 건너뛰기

조회 수 1616 추천 수 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
번호 제목 날짜 조회 수
247 유효한 링크인지 확인하는 JAVASCRIPT 2019.01.16 111404
246 [jQuery] 상위부터 차례로 지역 선택하기 2014.03.01 45683
245 Javascript - 이미지 미리보기 회전되어 나옴(EXIF) file 2021.03.09 36158
244 javascript 인쇄 미리보기, 출력, 페이지 설정 등 2014.03.01 31733
243 Checkbox : 체크박스 체크여부 확인 file 2015.06.19 19002
242 날짜 및 시간 입력 구현하기, Bootstrap DateTimePicker file 2017.04.06 16507
241 공백 검사 함수 2015.06.19 14511
240 선택(CheckBox) 된 Row 삭제 - 화면에서 추가된 Row 2015.04.28 13531
239 'focus', 엔터 누르고 이동하자! file 2015.02.03 12855
238 라디오버튼 선택 체크여부 radio checked 2014.03.01 12667
237 셀렉트(select) change Ajax 이벤트 2016.12.23 12549
236 input type file multiple list (파일 업로드 리스트 확인) file 2016.11.17 12424
235 간단한 동적 SELECT 박스 구현하기 2016.10.06 12366
234 GET방식으로 전송시 특수문자함께 전송하는 방법 2016.12.22 12336
233 텍스트박스(input type = "text") 숫자 증가, 감소 시키기 - 쇼핑몰 주문 수량 file 2015.06.19 12272
232 창 크기 최대화 시키기 file 2015.06.19 12204
231 [jQuery] 실시간 검색어 순위 순서대로 보여주기 2014.03.01 12005
230 jquery 메뉴 - 아래로 한번에 전체가 펼처짐 file 2015.04.06 11697
229 'Array', 배열 및 다차원 배열 선언에 대해 알아보자! 2015.02.03 11103
228 랜덤 배너 노출 스크립트 2019.04.29 10959
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 ... 13 Next
/ 13

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved