목차
keydown 예제 - 키보드 키 누르기 이벤트 keydown 정의 keydown 구문 keydown 예제 - 방식별 적용 예 keydown 예제 - 키보드 누르기/올리기 시 배경색 변경
keydown 예제 - 키보드 키 누르기 이벤트
<input type="text" onkeydown="homzzang()" >
<script>
function homzzang() {
alert("홈짱닷컴 Homzzang.com");
}
</script>
결과보기
keydown 정의
사용자가 키보드 키를 누를 때 실행.
1.
keydown 이벤트 관련 이벤트 순서
onkeydown onkeypress onkeyup
2.
모든 브라우저 지원.
3.
이벤트확산 : O
취소가능성 : O
이벤트타입 : KeyboardEvent
지원 HTML : 모든 HTML 요소. (제외: <base>, <bdo>, <br>, <head>, <html>, <iframe>, <meta>, <param>, <script>, <style>, <title> )
DOM 버전 : Level 2 Events
4.
슬라이드 조작할 때 유용. (key, keycode 확인하기) ★★★
window.addEventListener('keydown', function(event ) {
console.log(event .key);
console.log(event .keycode);
});
keydown 구문
[HTML]
<element onkeydown="homzzang ()">
[JS]
object .onkeydown = function(){ homzzang ()};
또는,
object .addEventListener("keydown", homzzang );
keydown 예제 - 이벤트 적용 방식별 차이
[HTML]
<input type="text" id="hz" onkeydown="homzzang ()" >
<script>
function homzzang () {
document.getElementById("hz").style.backgroundColor = "yellow";
}
</script>
결과보기
[JS] - onkeydown 속성 방식
<input type="text" id="hz">
<script>
document.getElementById("hz").onkeydown = function() {homzzang ()};
function homzzang () {
document.getElementById("hz").style.backgroundColor = "yellow";
}
</script>
결과보기
[JS] - addEventListener() 메서드 방식
<input type="text" id="hz">
<script>
document.getElementById("hz").addEventListener("keydown", homzzang );
function homzzang () {
document.getElementById("hz").style.backgroundColor = "yellow";
}
</script>
결과보기
keydown 예제 - 키보드 누르기/올리기 시 배경색 변경
<input type="text" id="hz" onkeydown="homzzang1 ()" onkeyup="homzzang2 ()" >
<script>
function homzzang1 () {
document.getElementById("hz").style.backgroundColor = "yellow";
}
function homzzang2 () {
document.getElementById("hz").style.backgroundColor = "pink";
}
</script>
결과보기
최신댓글