[40장] 이벤트 - 2 #38
Assignees
Labels
Comments
Merged
|
Q. 다음 코드의 출력 결과를 작성해주세요 <!DOCTYPE html>
<html>
<body>
<div class="red" >
<div class="orange" >
<div class="yellow" >
<div class="green" >
</div>
</div>
</div>
</div>
<script>
const $red = document.querySelector(".red");
const $orange = document.querySelector(".orange");
const $yellow = document.querySelector(".yellow");
const $green = document.querySelector(".green");
$red.addEventListener("click", () => { console.log("빨강")}, true);
$orange.addEventListener("click", () => {console.log("주황")});
$yellow.addEventListener("click", () => {console.log("노랑")});
$green.addEventListener("click", () => {console.log("초록")});
const customEvent = new MouseEvent('click');
$yellow.dispatchEvent(customEvent);
</script>
</body>
</html>퀴즈 정답
빨강
노랑 커스텀 이벤트 객체의 bubbles 속성은 기본적으로 false이므로 버블링이 일어나지 않습니다. 하지만 |
|
Q. 다음 예제에서 출력 결과를 적어주세요. <!DOCTYPE html>
<html>
<body>
<button class="btn1" onclick="handleClick(button)">Click me</button>
<button class="btn2">Click me 2</button>
<script>
function handleClick(button) {
console.log(button); // (1)
console.log(this); // (2)
}
const $button1 = document.querySelector('.btn1');
const $button2 = document.querySelector('.btn2');
// 이벤트 핸들러 프로퍼티 방식
$button1.onclick = function (e) {
console.log(this); // (3)
console.log(this === e.currentTarget); // (4)
};
// addEventListener 메서드 방식
$button2.addEventListener('click', e => {
console.log(this); // (5)
console.log(this === e.currentTarget); // (6)
});
</script>
</body>
</html>퀴즈 정답(1) 이벤트를 바인딩한 |
|
Q. 다음 코드를 실행해 각 버튼을 클릭했을 때 색상을 예상해 주세요. <!DOCTYPE html>
<html>
<body>
<div class="container">
<button class="btn1">Button 1</button> <!-- (1) -->
<button class="btn2">Button 2</button> <!-- (2) -->
</div>
<script>
document.querySelector(".container").onclick = ({ target }) => {
if (!target.matches(".container > button")) return;
target.style.color = "yellow";
};
document.querySelector(".btn1").onclick = (e) => {
e.target.style.color = "orange";
};
document.querySelector(".btn2").onclick = (e) => {
e.stopPropagation();
e.target.style.color = "blue";
};
</script>
</body>
</html>퀴즈 정답
(1) yellow, 이벤트 위임으로 클릭된 하위 버튼 요소의 color가 yellow로 변경된다.
(2) blue, |
|
Q. 다음 코드의 지정된 부분을 한 줄의 코드로 변경해주세요! <!DOCTYPE html>
<html>
<body>
<ul id = "language">
<li id = "javascript" class="active"> JavaScript </li>
<li id = "typescript"> TypeScript </li>
<ul>
<div><em class="msg">apple</em></div>
<script>
const $language = document.getElementById('fruits');
const $msg = document.querySelector('.msg');
function activate({target}){
[...$language.children].forEach($language => {
$language.classList.toggle('active',$language === target);
$msg.textContent = target.id;
}
)
}
document.getElementByID('javascript').onclick = activate; -(1)//(1)과 (2)부분을 한 줄로 줄여주세요!
document.getElementByID('typescript').onclick = activate; -(2)
</script>
</body>
</html>퀴즈 정답$language.onclick = activate; 이벤트 위임을 사용하면 간단하게 줄일 수 있습니다. |
|
Q. 다음 코드는 코드의 의도와 다르게 에러가 발생합니다. 이 코드가 정상적으로 작동할 수 있도록 코드를 추가해 주세요. <!DOCTYPE html>
<html>
<body>
<button class="plus">+</button>
<button class="minus">-</button>
<div class="num">0</div>
<script>
class App {
constructor() {
this.$buttonPlus = document.querySelector('.plus');
this.$buttonMinus = document.querySelector('.minus');
this.$num = document.querySelector('.num');
this.count = 0;
this.$buttonPlus.onclick = this.increase; - (1)
this.$buttonMinus.onclick = this.decrease; - (2)
}
increase() {
this.$num.innerHTML = ++this.count;
}
decrease() {
this.$num.innerHTML = --this.count;
}
}
new App();
</script>
</body>
</html>퀴즈 정답this.$buttonPlus.onclick = this.increase.bind(this);
this.$buttonMinus.onclick = this.decrease.bind(this); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
데브코스 4기 프롱이들 모던 JS Deep Dive 책 뿌수기😎
아래 템플릿을 복사해서 1개이상 퀴즈를 만들어주세요. 객관식, 주관식, 단답형 모두 상관없습니다!
The text was updated successfully, but these errors were encountered: