728x90
자바스크립트 이벤트 활용1
입력양식(form)에 관련해 내용을 알기 위해서는 HTML 기본에 대한 공부가 필요합니다.
📌 이벤트 모델(event model)
이벤트를 연결하는 방법
📌 키보드 이벤트
- keydown : 키가 눌릴 때 실행. 키보드를 꾹 누르고 있을 때도, 입력될 때도 실행
- keypress : 키가 입력되었을 때 실행.
- keyup : 키보드에서 키가 떨어질 때 실행
keypress는 웹브라우저에 따라 한국어, 중국어, 일본어를 제대로 처리하지 못하는 문제가 있어서 일반적으로 keyup 이벤트를 사용합니다.
📌 글자수 출력하기
<head>
<title>DOMContentLoaded</title>
<script>
document.addEventListener('DOMContentLoaded', ()=> {
const textarea = document.querySelector('textarea')
const h1 = document.querySelector('h1')
textarea.addEventListener('keyup', (event) => {
const length = textarea.value.length
h1.textContent = `글자 수: ${length}`
})
})
</script>
</head>
<body>
<h1></h1>
<textarea></textarea>
</body>
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}}`
})위에 3가지 방식은 많이 쓰이는 방식으로 기억해두길 바란다.
📌 키보드 키 코드 사용하기
| 이벤트 속성 이름 | 설명 |
| code | 입력한 키 |
| keyCode | 입력한 키를 나타내는 숫자 |
| altKey | alt 키 눌렀는지(불 자료형) |
| ctrlKey | ctrl키 눌렀는지(불 자료형) |
| shiftKey | shift키 눌렀는지(불 자료형) |
<head>
<title>DOMContentLoaded</title>
<script>
document.addEventListener('DOMContentLoaded', ()=> {
const h1 = document.querySelector('h1')
const print = (event) => {
let output = ''
output += `alt: ${event.altKey}<br>`
output += `ctrl: ${event.ctrlKey}<br>`
output += `shift: ${event.shiftKey}<br>`
output += `code: ${typeof(event.code) !== 'undefined' ?
event.code : event.keyCode}<br>`
h1.innerHTML = output
}
document.addEventListener('keydown', print)
document.addEventListener('keyup', print)
})
</script>
</head>
<body>
<h1></h1>
</body>
📌 키로 별 움직이기
<head>
<title>DOMContentLoaded</title>
<script>
document.addEventListener('DOMContentLoaded', ()=> {
// 별의 초기 설정
const star = document.querySelector('h1')
star.style.position = 'absolute'
// 별의 이동을 출력하는 기능
let [x, y] = [0, 0]
const block = 20
const print = () => {
star.style.left = `${x*block}px`
star.style.top = `${y*block}px`
}
print()
// 별을 이동하는 기능
const[left, up, right, down] = [37,38,39,40] //방향키 keycode
document.body.addEventListener('keydown', (event) => {
switch(event.keyCode) {
case left:
x -= 1
break
case up:
y -= 1
break
case right:
x += 1
break
case down:
y += 1
break
}
print()
})
})
</script>
</head>
<body>
<h1>⭐️</h1>
</body>
방향키를 사용하는 게임 등을 할 때는 방향키를 꾹 누르고 있을 가능성이 많으므로 keydown 이벤트를 활용합니다.
📌 기본 이벤트 막기
<head>
<title>DOMContentLoaded</title>
<script>
document.addEventListener('DOMContentLoaded', ()=> {
const imgs = document.querySelectorAll('img')
imgs.forEach((img) => {
img.addEventListener('contextmenu', (event) => {
event.preventDefault()
})
})
})
</script>
</head>
<body>
<img src="http://placekitten.com/300/300" alt="">
</body>
마우스 오른쪽 버튼 클릭하면 나오는 context menu를 기본이벤트라고 한다.
📌 체크 때만 링크 활성화 하기
<head>
<title>DOMContentLoaded</title>
<script>
document.addEventListener('DOMContentLoaded', ()=> {
let status = false
const checkbox = document.querySelector('input')
checkbox.addEventListener('change', (event) => {
status = event.currentTarget.checked
})
const link = document.querySelector('a')
link.addEventListener('click', (event) => {
if(!status) {
event.preventDefault()
}
})
})
</script>
</head>
<body>
<input type="checkbox">
<span>링크 활성화</span>
<br>
<a href="http://hanbit.co.kr">한빛미디어</a>
</body>
참고한 책 : 혼자 공부하는 자바스크립트
'JavaScript' 카테고리의 다른 글
| 자바스크립트 to do list 만들기 (0) | 2022.11.08 |
|---|---|
| 자바스크립트 이벤트 활용2 (0) | 2022.11.08 |
| 자바스크립트 문서 객체 조작하기 (0) | 2022.11.08 |
| 자바스크립트 객체와 배열 고급 (0) | 2022.11.07 |
| 자바스크립트 객체의 속성과 메소드 사용하기 (2) | 2022.11.07 |
