jquery-8: keyup/keydown

• keyup: 키보드를 누르고 뗄 때 발생

• keydown: 키보드를 누를 때 발생

• 제이쿼리로 감싸는 이유는, 제이쿼리의 언어가 더 편하기 때문

<div></div>

div{
  width:100px;
  height:100px;
  background-color:red;
  position: absolute;
}

let $window = window.$(window);

$window.keyup(function(event){
  let marginLeft = $('div').css('margin-left')
  let marginTop = $('div').css('margin-top')
  marginLeft = parseInt(marginLeft)
  marginTop = parseInt(marginTop)
  
  if (event.keyCode == 37) {
    marginLeft = marginLeft - 10;
  }
  
  else if (event.keyCode == 39) {
    marginLeft = marginLeft + 10;
  }
  
  if (event.keyCode == 38) {
    marginTop = marginTop -10;
  }
  
  if (event.keyCode == 40) {
    marginTop = marginTop + 10;
  }
  
  $('div').css('margin-left', marginLeft + 'px')
  $('div').css('margin-top', marginTop + 'px')
});

• keycode:
  • ←: 37
  • ↑: 38
  • →: 39
  • ↓: 40
• event에는 자세한 정보가 담겨져있음
• 키보드 방향키를 입력하면

---

<div></div>

div {
  width: 100px;
  height: 100px;
  background-color: red;
  position: absolute;
  transition: all 1s;
}

div.a {
  top: 0;
  left: 0;
}

div.b {
  top: 0;
  left: 90%;
}

div.c {
  top: 90%;
  left: 0;
}

div.d {
  top: 90%;
  left: 90%;
}

let $window = window.$(window);

$window.keyup(function (event) {
  $("div").removeClass("a");
  $("div").removeClass("b");
  $("div").removeClass("c");
  $("div").removeClass("d");

  if (event.keyCode == 65) {
    $("div").addClass("a");
  } else if (event.keyCode == 66) {
    $("div").addClass("b");
  } else if (event.keyCode == 67) {
    $("div").addClass("c");
  } else if (event.keyCode == 68) {
    $("div").addClass("d");
  }
});

• a키를 누르면 top: 0; left: 0;로 이동,
• b키를 누르면 top: 0; left: 90%;로 이동,
• c와 d도 동일