목차
- keypress 예제 - 키보드 키 누르기 이벤트
- keypress 정의
- keypress 구문
- keypress 예제 - 이벤트 적용 방식별 차이
※ 폐기예고 (Deprecated)된 속성이니 사용 금지. (대신, onkeydown 사용)
keypress 예제 - 키보드 키 누르기 이벤트
<input type="text" onkeypress="homzzang()">
<script>
function homzzang() {
alert("홈짱닷컴 Homzzang.com");
}
</script>
결과보기
keypress 정의
사용자가 키보드 키를 누를 때 실행.
1.
keypress 이벤트 관련 이벤트 순서
- 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.
폐기예고(Deprecated) 된 속성이니, 대신 keydown 이벤트 사용.
keypress 구문
[HTML]
<element onkeypress="homzzang()">
[JS]
object.onkeypress = function(){homzzang()};
또는,
object.addEventListener("keypress", homzzang);
keypress 예제 - 이벤트 적용 방식별 차이
[HTML속성방식]
<input type="text" id="hz" onkeypress="homzzang()">
<script>
function homzzang() {
document.getElementById("hz").style.backgroundColor = "yellow";
}
</script>
결과보기
[JS] - onkeypress 속성 방식
<input type="text" id="hz">
<script>
document.getElementById("hz").onkeypress = function() {homzzang()};
function homzzang() {
document.getElementById("hz").style.backgroundColor = "yellow";
}
</script>
결과보기
[JS] - addEventListener() 메서드 방식
<input type="text" id="hz">
<script>
document.getElementById("hz").addEventListener("keypress", homzzang);
function homzzang() {
document.getElementById("hz").style.backgroundColor = "yellow";
}
</script>
결과보기
