메뉴 건너뛰기

조회 수 250 추천 수 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
번호 제목 날짜 조회 수
186 == / === / != / !== 차이 2018.11.07 108
185 오늘 날짜 구하기 2018.11.07 104
184 jQuery 엘리먼트 선택 2018.10.26 183
183 자바스크립트 urlencode(), urldecode(), rawurlencode(), rawurldecode() 2018.10.26 190
182 자바스크립트 배열 중복값 다루기 2018.10.26 211
181 JavaScript 출생년도에 따른 나이 계산 자바스크립트 2018.09.28 275
180 엔터키 / enter key submit form 2018.09.27 217
179 팝업창 차단 "허용 메시지" 2018.09.27 215
178 테이블에서 해당 열의 인덱스 값 얻는 방법 2018.08.29 221
» key pressing 누르거나 클릭중인 이벤트 예제 2018.08.29 250
176 유용한 스크립트 모음 2018.07.24 399
175 cross site scripting을 막기위한...javascript 2018.07.24 411
174 다음 우편번호(주소) api 예시 file 2018.07.04 784
173 스마트에디터(SmartEditor)에서 textarea 유효성 체크하기 2018.07.04 732
172 반복문 사용할때 태그 식별하기 data-item 2018.07.04 469
171 SelectBox에서 선택된 항목의 텍스트, 값 가져오기 선택 옵션 넣기. 2018.07.04 522
170 체크박스(CheckBox) 전체 선택, 전체 해제 checked file 2018.07.04 655
169 스마트 에디터 (네이버 에디터) 에디터 내에서 이미지 크기 줄이기.(리사이징) file 2018.07.04 523
168 Javascript selectbox selected 컨트롤 file 2018.06.21 764
167 새로고침(F5) 금지 2018.03.28 1294
Board Pagination Prev 1 2 3 4 5 6 7 8 9 10 Next
/ 10

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

© k2s0o1d4e0s2i1g5n. All Rights Reserved