'이벤트 위임 보강 영상'에 있는 예제 html이 안 보입니다
265
작성한 질문수 2
섹션5에서 제공 중인 파일을 모두 받아 봤습니다.
그런데 이벤트 위임 보강 영상에서 보이는 delegation.html이 안 보입니다..
혹시 제가 못 찾은걸까요??
답변 2
0
아, 제가 확인이 늦었습니다. 아래 소스를 사용하시면 됩니다!
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Event Delegation</title>
<link rel="stylesheet" href="../reset.css">
<style>
body {
display: flex;
align-items: center;
justify-content: center;
}
@keyframes pointer-ani {
0% { transform: scale(0); }
50% { transform: scale(1); }
100% { transform: scale(1.5); opacity: 0; }
}
.pointer {
position: absolute;
left: 0;
top: 0;
width: 60px;
height: 60px;
margin: -30px 0 0 -30px;
border-radius: 50%;
background: url('../images/ilbuni2.png') no-repeat 0 0 / cover;
transform: scale(0);
animation: pointer-ani 0.5s linear;
}
.menu {
display: flex;
margin-top: -10vh;
padding: 2em;
border-radius: 20px;
background: #eee;
}
.menu-btn {
display: inline-flex;
align-items: center;
margin: 0 1em;
padding: 0.5em 1em 0.5em 0.5em;
border: 5px solid white;
border-radius: 20px;
outline: 0;
font: 900 1.2rem NotoSans;
background: linear-gradient(0deg, rgba(223,210,0,1) 0%, rgba(255,240,0,1) 24%, rgba(255,240,0,1) 70%, rgba(255,255,255,1) 100%);
box-shadow: rgba(0,0,0,0.1) 0 0 0 1px inset;
}
.btn-label {
text-shadow: rgba(255,255,255,1) 0 1px 0;
/*pointer-events: none;*/
}
.icon {
width: 60px;
/*pointer-events: none;*/
}
</style>
<script src="IlbuniPointer.js"></script>
<script>
window.addEventListener('DOMContentLoaded', () => new IlbuniPointer());
</script>
</head>
<body>
<div class="menu">
<button class="menu-btn" data-value="1">
<img class="icon" src="../images/ilbuni1.png" alt="">
<span class="btn-label">일분이 1</span>
</button>
<button class="menu-btn" data-value="2">
<img class="icon" src="../images/ilbuni2.png" alt="">
<span class="btn-label">일분이 2</span>
</button>
<button class="menu-btn" data-value="3">
<img class="icon" src="../images/ilbuni3.png" alt="">
<span class="btn-label">일분이 3</span>
</button>
</div>
<script>
const menu = document.querySelector('.menu');
function clickHandler(event) {
let elem = event.target;
while (!elem.classList.contains('menu-btn')) {
elem = elem.parentNode;
if (elem.nodeName == 'BODY') {
elem = null;
return;
}
}
console.log(elem.dataset.value);
}
menu.addEventListener('click', clickHandler);
</script>
</body>
</html>0
안녕하세요, 인프런 AI 인턴입니다.
BONGJUN님, 강의 자료와 관련하여 문의 주셨군요.
강의 자료는 강의실에 진입하신 후, 강의 동영상을 클릭하시고 상단 바나 목차 내에 있는 구름 아이콘을 확인해 주시기 바랍니다. 강의마다 강의자료가 위치한 섹션이 다를 수 있으니 이 점 참고하시어 관련 파일을 찾아보시기 바랍니다.
더 자세한 사항은 다음 링크를 통해 확인하실 수 있습니다: 강의 자료 다운로드 정보
원하는 답변을 찾지 못하셨다면, 홈페이지 하단의 ‘문의하기’에서 직접 문의해주세요. 최대한 빠르게 답변드리도록 하겠습니다!
왼쪽/오른쪽 동작시 딜레이 문제
0
93
1
변수 범위 관련 질문
0
106
1
perspective 문의
0
100
1
생성자 함수를 클래스 함수로 변경 하고 this 오류 관련
0
150
1
스크롤이 중간 위치에 있을 때 창의 크기를 변환하면 생기는 문제
0
124
1
animation이벤트 질문이요!
0
71
1
resize handler에서 질문이 있습니다.
0
110
1
카드 뒤집힐 때 F가 보인 이유
0
149
1
3d 뒤집기 추가효과
0
216
1
전진! 3D 스크롤 21 강의 질문
1
171
1
eventlistener 질문
0
147
1
zMove 를 1000으로 설정하는 이유에 대하여.
0
168
1
[정보-23강] ES6 class 문법으로 공부하시는 분들!! 화살표 함수로도 시도해보셔요!
1
191
1
동적으로 html 생성 후 이벤트 위임 질문 있습니다.
0
264
1
rotateY()에서 deg에 따른 차이
0
196
1
코드 작성 순서
0
275
1
이미지가 없는데 첨부파일을 다운 받는 방법이 있나요??
1
392
1
섹션5 자바스크립트 이벤트 다루기 질문
1
243
1
[#전진! 3D 스크롤 11] mousePos 공식 질문 있습니다!
0
423
2
css 는 직접 작성을 해야하는걸까용?
0
323
1
translateZ 에 px 이 아닌 vw 로 값을 주신 이유가 있을가요?
0
356
2
house 부분에도 width , height 부분을 꽉 차게 주신 부분이 제가 이해한게 맞는지 궁금합니다.
0
302
2
left:-400vw 가 아닌 translateZ(100vw); 을 입력하신 이유가 궁금합니다.
0
303
2
외부에서 JS파일을 불러올땐 무조건 defer를 써도 괜찮은건가요?
0
299
2