메뉴 건너뛰기

조회 수 108 추천 수 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
번호 제목 날짜 조회 수
181 JavaScript 출생년도에 따른 나이 계산 자바스크립트 2018.09.28 91
180 엔터키 / enter key submit form 2018.09.27 60
179 팝업창 차단 "허용 메시지" 2018.09.27 63
178 테이블에서 해당 열의 인덱스 값 얻는 방법 2018.08.29 97
» key pressing 누르거나 클릭중인 이벤트 예제 2018.08.29 108
176 유용한 스크립트 모음 2018.07.24 277
175 cross site scripting을 막기위한...javascript 2018.07.24 232
174 다음 우편번호(주소) api 예시 file 2018.07.04 475
173 스마트에디터(SmartEditor)에서 textarea 유효성 체크하기 2018.07.04 480
172 반복문 사용할때 태그 식별하기 data-item 2018.07.04 357
171 SelectBox에서 선택된 항목의 텍스트, 값 가져오기 선택 옵션 넣기. 2018.07.04 370
170 체크박스(CheckBox) 전체 선택, 전체 해제 checked file 2018.07.04 451
169 스마트 에디터 (네이버 에디터) 에디터 내에서 이미지 크기 줄이기.(리사이징) file 2018.07.04 375
168 Javascript selectbox selected 컨트롤 file 2018.06.21 521
167 새로고침(F5) 금지 2018.03.28 1044
166 날짜 및 시간 입력 구현하기, Bootstrap DateTimePicker file 2017.04.06 6637
165 [INPUT BOX] 텍스트박스(INPUT 박스) 가 동적으로 추가,삭제됩니다 2017.02.18 4444
164 팝업창 가운데 띄우기 2016.12.22 4204
163 셀렉트(select) change href 이벤트 2016.12.22 3476
162 셀렉트(select) change Ajax 이벤트 2016.12.22 3424
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 Next
/ 10

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved