Event
: 프로그래밍하고 있는 시스템에서 일어나는 사건 혹은 발생인데, 우리가 원한다면 그것들에 어떠한 방식으로 응답할 수 있도록 시스템이 말해주는 것
ex) 사용자가 버튼을 클릭한다면 우리는 그 사건에 대한 결과를 응답 받기를 원할 수 있음
Event Object
: 네트워크 활동이나 사용자와의 상호작욕 같은 사건의 발생을 알리기 위한 객체
- 사용자의 행동이나, 특정 메서드를 호출함으로써 만들어질 수 있음
DOM 요소는 Event를 "받고" 받은 Event를 "처리"할 수 있음
-> Event 처리는 주로 addEventListener() 라는 처리기를 사용해 다양한 html 요소에 "부착"하게 됨
"대상에 특정 Event가 발생하면, 할 일을 등록하자"
EventTarget.addEventListener(type, listener)
addEventListener()
EventTarget.addEventListener(type, listener[, options])
// 지정한 Event가 대상에 전달될 때 마다 호출한 함수를 설정
// Event를 지원하는 모든 객체를 대상으로 지정 가능
1) type
: 반응 할 Event 유형을 나타내는 대소문자 구분 문자열
다양한 이벤트 확인)
Event reference | MDN
Events are fired to notify code of "interesting changes" that may affect code execution. These can arise from user interactions such as using a mouse or resizing a window, changes in the state of the underlying environment (e.g. low battery or media events
developer.mozilla.org
2) listener
: 지정된 타입의 Event를 수신할 객체
- JavaScript Function 객체여야 함
- 콜백 함수는 발생한 Event의 데이터를 가진 Event 객체를 유일한 매개 변수로 받음
1. 버튼을 클릭하면 특정 변수 값 변경하기)
<body>
<button id="btn">버튼</button>
<p id="counter">0</p>
<script>
const btn = document.querySelector('#btn')
let countNumber = 0
// 이벤트 핸들러 작성
btn.addEventListener('click', (event) => {
// console.log(event)
const pTag = document.querySelector('#counter')
countNumber += 1
pTag.innerText = countNumber
})
</script>
</body>
2. input에 입력하면 입력 값을 실시간으로 출력)
<body>
<input type="text" id="text-input">
<p></p>
<script>
// 1. input 객체 선택하기
const textInput = document.querySelector('#text-input')
// 2. 이벤트 핸들러 부착
textInput.addEventListener('input', (event)=>{
const pTag = document.querySelector('p')
// event 안에 정보가 담겨져 옴
pTag.innerText = event.target.value
})
</script>
</body>
3. input에 입력하면 입력 값을 실시간으로 출력하고, 버튼을 클릭하면 출력된 값의 클래스 토글
<body>
<h1></h1>
<button id="btn">클릭</button>
<input type="text">
<script>
const Btn = document.querySelector('#btn')
Btn.addEventListener('click',(event)=>{
const h1Tag = document.querySelector('h1')
h1Tag.classList.toggle('blue')
})
const textInput = document.querySelector('input')
textInput.addEventListener('input', (event)=>{
const h1Tag = document.querySelector('h1')
h1Tag.innerText = event.target.value
})
</script>
</body>
Event 취소
event.preventDefault()
: 현재 Event의 기본 동작을 중단
- HTML 요소의 기본 동작을 작동하지 않게 막음
<body>
<div>
<h1>복사해보세요!</h1>
</div>
<script>
const h1Tag = document.querySelector('h1')
h1Tag.addEventListener('copy', (event)=>{
event.preventDefault()
alert('복사할 수 없습니다 :(')
})
</script>
</body>
'Web > JavaScript' 카테고리의 다른 글
| [JavaScript] Prototype (0) | 2023.03.06 |
|---|---|
| JavaScript - 동기와 비동기 (0) | 2022.10.26 |
| JavaScript 심화 - DOM (0) | 2022.10.24 |
| JavaScript 기초- Object (0) | 2022.10.19 |
| JavaScript 기초 - Array (0) | 2022.10.19 |
댓글