클릭, 마우스 휠, 마우스를 올렸다 내려 놓기, 키 입력 등의 행동들이 이벤트다. 이런 이벤트가 일어났을 때 핸들러 함수를 추가할 수 있는 메서드가 addEventListener. 이번에는 이에 대한 기록을 하려고 한다.
<!DOCTYPE html>
<html lang="en">
<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>Document</title>
<style>
.parent {
width: 300px;
height: 200px;
padding: 20px;
border: 10px solid;
background-color: red;
overflow: auto;
}
.child {
width: 200px;
height: 1000px;
border: 10px solid;
background-color: aqua;
font-size: 40px;
}
</style>
</head>
<body>
<div class="parent">
<div class="child">
<a href="https://nodiemecarry.tistory.com" target="_blank">NoDieMeCarry</a>
</div>
</div>
<input/>
<script>
// addEventListener()
// 대상에 지정한 이벤트가 발생했을 때 지정한 함수가 호출
const parentEl = document.querySelector('.parent');
const childEl = document.querySelector('.child');
parentEl.addEventListener('click', () => {
console.log('Parent!');
}); // parent! 만 뜸
childEl.addEventListener('click', () => {
console.log('child!');
}); // parent! child! 둘 다 출력
// removeEventListener()
// 대상에 등록했던 이벤트리스너를 제거, 메모리 관리를 위해 필요할 수 있는 과정
// 아래 코드는 실행이 되지 않음!!
// why? => 참조할 수 있는 변수가 존재하지 않기 때문 (parent에 있는 함수는 만들어지자마자 인수로 들어가는 데이터라서 removeEventListener에 연결할 수 없음)
// 따라서 removeEventListener로 삭제할 이벤트라면 따로 변수를 만들어서 저장해야함
// childEl.addEventListener('click', ()=>{
// parentEl.removeEventListener('click', () => {
// console.log('Parent!');
// })});
const handler = () => {
console.log('click!');
}
parentEl.addEventListener('click', handler);
childEl.addEventListener('click', () => {
parentEl.removeEventListener('click',handler);
}); // click이 사라지거 parent! 만 뜨는 것을 확인할 수 있음
// 이벤트 객체
// 이벤트 객체는 대상에서 발생한 이벤트 정보를 담고 있음
parentEl.addEventListener("click", event=>{
console.log(event.target, event.target.currentTarget); // 누
});
parentEl.addEventListener("wheel", event=>{ console.log(event) }); // wheelEvent가 나옴
const inputEl = document.querySelector("input");
inputEl.addEventListener("keypress", event=>{ console.log(event.target.value) }); // 콘솔에 자판친 것 모두 출력
// 기본 동작 방지
// event.preventDefault()
// 이벤트를 방지하는 것이 아니라, 브라우저에서 일어나는 기본적인 동작만 방지
inputEl.addEventListener("keypress", event=>{
event.preventDefault();
console.log(event.target.value);
}); // input창에 아무것도 안쳐짐 => 콘솔에도 빈칸만 찍힘 => 기본 동작은 방지되나 이벤트는 발생함
parentEl.addEventListener("wheel", event=>{
event.preventDefault();
console.log(event)
}); // 브라우저는 가만히 있지만, 콘솔에 wheel event는 잘 뜸 => 기본 동작은 방지되나 이벤트는 발생함
// 핸들러 한 번만 실행
parentEl.addEventListener("click", ()=>{
console.log('click!!!');
}, {
once: true
}); // 1번만 실행됨
// 기본동작과 핸들러 실행 분리
parentEl.addEventListener("wheel", ()=>{
for (let i=0; i<10000; i++) {
console.log(i);
}
}, {
passive: true
}); // passive 옵션으로 분리할 수 있음
</script>
</body>
</html>
removeEventListener에 대한 의문이 있었는데 이번에 풀 수 있어서 좋았다. 함수 안에서 작동하는 인수기 때문에 removeEventListener에 연결할 수 없던 것!
'JAVASCRIPT' 카테고리의 다른 글
| [JavaScript] 이벤트 - 이벤트 위임, 커스텀 이벤트 (0) | 2023.04.23 |
|---|---|
| [JavaScript] 이벤트 버블링/캡쳐링 (0) | 2023.04.22 |
| [JavaScript] 동기/비동기 Promise, Async와 await (0) | 2023.04.22 |
| [JavaScript] 동기/비동기 (콜백) (0) | 2023.04.21 |
| [JavaScript] JavaScript의 동작 원리 (0) | 2023.04.21 |
