반응형
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>끝말잇기</title>
</head>
<body>
<div><span id="order">1</span>번째 참가자</div>
<div>제시어: <span id="word"></span></div>
<input type="text" />
<button>입력</button>
<button class="hello">버튼2</button>
<button class="hello">버튼3</button>
<script>
// 이벤트 리스너 추가하기
// 태그.addEventListener('<이벤트이름>', <이벤트리스트>);
const onClickButton = () => {
console.log('버튼 클릭');
};
const $button = document.querySelector('button');
$button.addEventListener('click', onClickButton);
// document.querySelector('button').addEventListener('click', ()=> { console.log('버튼 클릭') });
const onInput = (event) => {
console.log('글자 입력', event.target.value);
};
const $input = document.querySelector('input');
$input.addEventListener('input', onInput);
// document.addEventListener('click', function () {
// console.log(this);
// });
document.querySelector('click', () => {
console.log(this);
});
/* 이벤트 리스너 제거하기
function 함수(){}
태그.addEventListener('이벤트', 함수)
태그.removeEventListener('이벤트', 함수) */
$button.removeEventListener('click', onClickButton);
$button.addEventListener('click', () => {
console.log('버튼 클릭');
});
$button.removeEventListener('click', () => {
console.log('버튼 클릭');
});
// 키보드와 마우스 이벤트
window.addEventListener('keyup', (event) => {
console.log('keyup', event);
});
window.addEventListener('keydown', (event) => {
console.log('keydown', event);
});
window.addEventListener('mousedown', (event) => {
console.log('mousedown', event);
});
window.addEventListener('mousemove', (event) => {
console.log('mousemove', event);
});
window.addEventListener('mouseup', (event) => {
console.log('mouseup', event);
});
/* 좌표 종류
• clientX, clientY: 현재 웹 브라우저 페이지 내에서의 x, y 좌표를 가리킴(픽셀 단위).
• pageX, pageY: 현재 웹 브라우저 페이지 내에서의 x, y 좌표를 가리키지만, 스크롤이 있으면 스크롤한 픽셀 값까지 포함.
• offsetX, offsetY: 이벤트를 연결한 대상을 기준으로 마우스의 x, y 좌표를 가져옴.
• screenX, screenY: 모니터를 기준으로 모니터 왼쪽 모서리가 0.
• movementX, movementY: 지난 mousemove 이벤트와 비교해 얼마나 마우스를 움직였는지 표시. mousemove 이벤트일 때만 실제 값이 잡힘.
*/
</script>
</body>
</html>이벤트 버블링과 캡처링
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
</head>
<body>
<table border="1">
<tr>
<td>1</td>
<td>2</td>
<td>3</td>
</tr>
</table>
<script>
// 이벤트 버블링(이벤트가 발생할 때 부모 태그에도 동일한 이벤트가 발생하는 현상)
document.querySelector('td').addEventListener('click', () => {
console.log('td를 클릭했습니다.');
});
document.querySelector('tr').addEventListener('click', () => {
console.log('tr을 클릭했습니다.');
});
document.querySelector('table').addEventListener('click', () => {
console.log('table을 클릭했습니다.');
});
</script>
</body>
</html>
<script>
document.querySelector('td').addEventListener('click', (event) => {
console.log('td');
console.log(event.target);
console.log(event.currentTarget);
});
document.querySelector('tr').addEventListener('click', (event) => {
console.log('tr');
console.log(event.target);
console.log(event.currentTarget);
});
document.querySelector('table').addEventListener('click', (event) => {
console.log('table');
console.log(event.target);
console.log(event.currentTarget);
});
</script>
<script>
// 이벤트 캡쳐링 이벤트가 자식 태그로 전파되어 내려가는 현상
document.querySelector('td').addEventListener(
'click',
(event) => {
console.log('td');
console.log(event.target);
console.log(event.currentTarget);
},
true
);
document.querySelector('tr').addEventListener(
'click',
(event) => {
console.log('tr');
console.log(event.target);
console.log(event.currentTarget);
},
true
);
document.querySelector('table').addEventListener(
'click',
(event) => {
console.log('table');
console.log(event.target);
console.log(event.currentTarget);
},
true
);
</script>반응형
'개발 이야기 > 개발 도서' 카테고리의 다른 글
| 제로초 자바스크립트 입문 <window 객체> (0) | 2024.03.14 |
|---|---|
| 제로초 자바스크립트 입문 <다양한 DOM 속성> (0) | 2024.03.14 |
| 제로초 자바스크립트 입문 <HTML 파일 생성 및 DOM 사용하기> (0) | 2024.03.13 |
| 제로초 자바스크립트 입문 <프로미스와 async / await> (0) | 2024.03.12 |
| 제로초 자바스크립트 입문 <호출 스택과 이벤트 루프> (0) | 2024.03.12 |