이벤트에서는
각 이벤트 관련 동작들이 오브젝트로 반환이 되어, 이벤트 함수에 전달이 된다.
요소.addEventListener('mousemove', (e) => {
coordinate.textContent = `X: ${e.clientX}, Y: ${e.clientY}`
})즉, 위의 코드처럼 addEventListener에 mousemove 이벤트를 줬을 때,
- 이벤트 핸들러(이벤트가 실행되었을 때 실행되는 함수)는
- 이벤트 관련 동작의 오브젝트를 인수로 받을 수 있다.
이벤트 관련 동작의 오브젝트에는 다양한 프로퍼티가 있는데,
위 영상에서는 clientX와 clientY라는 프로퍼티를 활용해서 좌표를 표시했다.
이와 같이,
이벤트 타입을 알게되고,
그것이 반환한 오브젝트 내 프로퍼티들을 활용해서
JS로 적절히 조절할 수 있게 되면
웹 관련 프로그래밍을 조금 더 역동적으로 할 수 있게 될 것이다.
아래는 위 동영상의 전체 코드이다.
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>typewriter</title>
</head>
<body>
<h1 class="coordinate"></h1>
<input type="text">
<div class="typedisplay"></div>
<div class="display"></div>
<script>
const html = document.querySelector('html')
const coordinate = document.querySelector('.coordinate')
const input = document.querySelector('input')
const typedisplay = document.querySelector('.typedisplay')
const display = document.querySelector('.display')
const typingArray = []
html.addEventListener('mousemove', (e) => {
coordinate.textContent = `X: ${e.clientX}, Y: ${e.clientY}`
})
input.addEventListener('keyup', (e) => {
if (e.code === 'Enter') {
typingArray.unshift(input.value)
input.value = ''
render()
}
typedisplay.innerHTML = `<p>${input.value}</p>`
})
const render = () => {
display.innerHTML = typingArray.reduce((acc, e) => {
acc = acc + `<h1>${e}</h1>`
return acc
}, '')
}
</script>
</body>
</html>만약 독자분이 계시다면....
한번 쓱 읽어보시고
궁금한게 있으면 댓글로 남겨주셔요.
성심성의껏 답변드리겠습니다.
'Javascript' 카테고리의 다른 글
| 비디오 이벤트 연습(마우스 대면 플레이, 떼면 스탑 + 시간 카운트) (0) | 2022.10.31 |
|---|---|
| Pokemon viewer (프로미스 연습) 코드리뷰 (0) | 2022.10.31 |
| 이벤트 드리븐 프로그래밍 / 자주 쓰는 이벤트 타입 (0) | 2022.10.25 |
| 간단 Jest 라이브러리 사용방법 (feat. TDD) (2) | 2022.10.21 |
| 의도적으로 콜백지옥 만들기 (0) | 2022.10.19 |
