키보드 이벤트
keydown
키가 눌릴 때 실행
키보드를 꾹 누르고 있을때도, 입력될 때도 실행
keypress
키가 입력되었을 때 실행
keyup
키보드에서 키가 떨어질 때 실행
→ keydown과 keypress는 웹 브라우저에 따라 아시아권 문자(한국어, 중국어, 일본어)를 제대로 처리하지 못하는 문제가 있어 일반적으로 keyup이벤트를 사용한다.
document.addEventListener('DOMContentLoaded', () => {
document.addEventListener('keydown', (event) => {
document.body.innerHTML = `<h1>keydown ${event.code}</h1>`
})
document.addEventListener('keyup', () => {
document.body.innerHTML = `<h1>keyup</h1>`
})
})실행 결과
키보드 키 코드 사용하기
code: 입력한 키
keyCode:입력한 키를 나타낸 숫자
altKey: Alt키를 눌렀는지
ctrlKey: Ctrl키를 눌렀는지
shiftKey: Shift키를 눌렀는지
남은 글자 수 출력하기(예제)
<html lang="ko">
<head>
<meta charset="UTF-8">
<title>남은 글자 수 출력하기</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const h1 = document.querySelector('h1')
const textarea = document.querySelector('textarea')
textarea.addEventListener('keyup', () => {
h1.textContent = `글자 수: ${textarea.value.length}`
})
})
</script>
</head>
<body>
<h1>글자 수: 0</h1>
<textarea></textarea>
</body>실행 결과
이벤트 발생 객체
상황에 따라 이벤트 리스너 내부에서 변수에 접근할 수 없는 경우가 있다.
코드의 규모가 커지면 이벤트 리스너를 외부로 분리하는 경우가 많아지는데 그럴 경우 event.currentTarget나 this키워드를 사용해 문제를 해결한다.
textarea.addEventListener('keyup', () => {
h1.textContent = `글자 수: ${textarea.value.length}`
})
textarea.addEventListener('keyup', (event) => {
h1.textContent = `글자 수: ${event.currentTarget.value.length}`
})
textarea.addEventListener('keyup', function () {
h1.textContent = `글자 수: ${this.value.length}`
})두번째 방법을 많이 씀
기본 이벤트 막기
event.preventDefault()메소드
<head>
<meta charset="UTF-8">
<title>이벤트 막기</title>
<script>
document.addEventListener('DOMContentLoaded', () => {
const a = document.querySelector('a')
a.addEventListener('click', (event) => {
event.preventDefault()
})
a.addEventListener('contextmenu', (event) => {
event.preventDefault()
})
})
</script>
</head>
<body>
<a href='https://velog.io/@onezeun'>링크</a>
</body>이렇게 되면 링크를 눌러도 이동하지 않는다.
인터넷에서 불펌 방지등을 구현할 때 사용하는 코드
엉망진창