javascript _Event-keyup

denmark-choco·2020년 5월 23일
0

code-states_3주차

목록 보기
7/9

[Event-keyup 예제]

  • 키보드 이벤트 함수는 onkeyDown, onkeyUp, onkeyPress가 있다.

  • onkeyDown : 키를 눌렀을 때 발생(이벤트 발생 후 문자 입력)

  • onkeyUp : 키를 눌렀다 놓았을 때 발생(문자 입력 후 이벤트 발생)

  • onkeyPress : onkeyDown와 이벤트는 같다. shift, ctrl, backspace, tab, 한/영 등의 키를 인식하지 못한다.

1. Form을 만든다.

<h1>이벤트 연습하기</h1>
    <form>
      <div>
        <label for="onkeyDown">onkeyDown : </label>
        <input id="onkeyDown" type="text" />
      </div>
      <div>
        <label for="onkeyUp">onkeyUp : </label>
        <input id="onkeyUp" type="text" />
      </div>
      <div>
        <label for="onkeyPress">onkeyPress : </label>
        <input id="onkeyPress" type="text" />
      </div>
    </form>

2. keyup이벤트를 작성한다.

onkeyDown이 작동되는 모습

onkeyUp이 작동되는 모습

let onkeyDown = document.querySelector("#onkeyDown");
let onkeyUp = document.querySelector("#onkeyUp");
let onkeyPress = document.querySelector("#onkeyPress");

function Show_down() {
  alert("onkeyDown이 작동되었습니다.");
}

function Show_up() {
  alert("onkeyUp이 작동되었습니다.");
}

function Show_down() {
  alert("onkeyPress이 작동되었습니다.");
}

onkeyDown.addEventListener("keydown", Show_down);
onkeyUp.addEventListener("keyup", Show_up);
onkeyPress.addEventListener("keypress", Show_down);
profile
codestates_2020.05.04~ing // 이제 걸음마를 시작한 초보 개발자입니다. 혹 잘못된 부분을 발견하신다면 언제든지 말씀부탁드립니다^^!!

0개의 댓글