javascript 키보드 이벤트 keydown keyup 를 위한 addEventListener 사용법 > 개발

본문 바로가기
사이트 내 전체검색

개발

javascript 키보드 이벤트 keydown keyup 를 위한 addEventListener 사용법

페이지 정보

profile_image
작성자 관리자 (112.♡.173.204)
댓글 0건 조회 1,802회 작성일 22-01-28 20:03

본문

## 기본사용법
```
window.onkeydown = (e) => console.log(e);
window.addEventListener("keydown", (e) => console.log(e));
```

## 화살표 함수에는 this 컨텍스트가 없습니다.
```
my_element.addEventListener('click', function (e) {
console.log(this.className)          // logs the className of my_element
console.log(e.currentTarget === this) // logs `true`
})

my_element.addEventListener('click', (e) => {
console.log(this.className)          // WARNING: `this` is not `my_element`
console.log(e.currentTarget === this) // logs `false`
})
```

## e.key
```
window.addEventListener("keydown", e => {
  const key = document.getElementById(e.key);
  console.log(key);
});
```

##  input 또는 input[type=text] 가 아닌 곳에서만 실행하기
```
document.body.addEventListener("keyup", function(e) {
if ($('input').is(':focus') == false) {
console.log(e.key);
}
if ($('input[type=text]').is(':focus') == false) {
console.log(e.key);
}
});
```

## 참고
https://developer.mozilla.org/ko/docs/Web/API/EventTarget/addEventListener
https://www.w3schools.com/jsref/met_element_addeventlistener.asp
https://www.daleseo.com/js-key-events/

추천0

댓글목록

등록된 댓글이 없습니다.

Total 389건 18 페이지
  • RSS
개발 목록
번호 제목 조회 추천 날짜
491932010-07
481921006-16
471917002-26
461913005-04
451912007-17
441901002-27
431876006-06
421859008-18
411856002-03
401852005-04
391844005-30
381838006-01
371831008-19
361823009-08
351807002-08
열람중1803001-28
331799002-13
321755008-03
311747005-14
301746001-31

검색


사이트 정보

Copyright © Baragi.Net. All rights reserved.