JavaScript - 문제 미리보기
문제 727
hard
다음 코드의 실행 결과로 올바른 것은?
```html
<div id="parent">
<p id="child">Click me!</p>
</div>
<script>
document.getElementById("parent").addEventListener("click", function() {
alert("Parent clicked!");
}, false);
document.getElementById("child").addEventListener("click", function() {
alert("Child clicked!");
}, false);
</script>
```
`<p>` 요소를 클릭했을 때 alert 창이 나타나는 순서는?
```html
<div id="parent">
<p id="child">Click me!</p>
</div>
<script>
document.getElementById("parent").addEventListener("click", function() {
alert("Parent clicked!");
}, false);
document.getElementById("child").addEventListener("click", function() {
alert("Child clicked!");
}, false);
</script>
```
`<p>` 요소를 클릭했을 때 alert 창이 나타나는 순서는?
정답: B
이벤트 버블링 때문입니다:
1. `<p>` 요소를 클릭하면, 클릭 이벤트가 발생합니다.
2. 두 이벤트 리스너 모두 `useCapture = false`(버블링)으로 설정되어 있습니다.
3. 버블링에서는 안쪽 요소부터 바깥쪽 요소 순서로 이벤트가 처리됩니다.
실행 순서:
1. `<p>` 요소의 클릭 이벤트 → "Child clicked!" 출력
2. 이벤트가 부모인 `<div>`로 버블링 → "Parent clicked!" 출력
만약 이벤트 전파를 중단하려면 `event.stopPropagation()`을 사용할 수 있고, 캡처링을 원한다면 세 번째 매개변수를 `true`로 설정하면 순서가 바뀝니다.
1. `<p>` 요소를 클릭하면, 클릭 이벤트가 발생합니다.
2. 두 이벤트 리스너 모두 `useCapture = false`(버블링)으로 설정되어 있습니다.
3. 버블링에서는 안쪽 요소부터 바깥쪽 요소 순서로 이벤트가 처리됩니다.
실행 순서:
1. `<p>` 요소의 클릭 이벤트 → "Child clicked!" 출력
2. 이벤트가 부모인 `<div>`로 버블링 → "Parent clicked!" 출력
만약 이벤트 전파를 중단하려면 `event.stopPropagation()`을 사용할 수 있고, 캡처링을 원한다면 세 번째 매개변수를 `true`로 설정하면 순서가 바뀝니다.
💡 학습 팁
이 문제를 포함한 JavaScript 과목의 모든 문제를 순차적으로 풀어보세요. 진행상황이 자동으로 저장되어 언제든지 이어서 학습할 수 있습니다.