javascript-tutorial / javascript-tutorial/ko.javascript.info

[Bug report] 이벤트 버블링, 캡처링 부분 수정 요청 드립니다!

未關閉
#961 0 則留言 0 個 reaction 已指派 0 人 在 GitHub 檢視

還沒有人認領這個 Issue。

主要語言
HTML
星號
2k
分支
852
PR 合併指標
30 天內沒有已合併 PR

描述

## 🐛 Bug report

안녕하세요. 항상 공부하는데에 유용하게 사용하고 있습니다!! JS를 열심히 공부하고 있는 학생입니다. 이렇게 이슈를 남겨도 되는지 모르겠는데 한번 남겨 봅니다.

https://ko.javascript.info/bubbling-and-capturing
![image](https://user-images.githubusercontent.com/38036598/103290938-03584680-4a2e-11eb-934a-c3406d0232b9.png)

공부를 하던 도중 이 부분이 설명이 이상한 것 같아 이슈를 남겨봅니다. 2번을 보시면 p가 타겟 단계이고, 캡처링과 버블링 둘다에 리스너를 설정했기 때문에 두 번 호출 됩니다라고 적혀있습니다.

그러면 target phase 에서도 캡처링 이벤트가 먼저 실행되고 버블링 이벤트가 후에 실행될 것처럼 적혀있어요. 그런데 제가 알기로는 캡처링, 버블링은 target phase가 아닐 때, 어느 phase에서 실행될 것인지를 결정하는 것으로 알고 있습니다.

즉, 캡쳐링과 버블링 둘 다에 리스너를 설정했기 때문에 두번 호출 되는 것이 아니라, 단순히 event를 두번 설정했기 때문에 두번 호출된다고 적는 것이 맞지 않나 싶어요!

## 환경

Windows 10, Chrome

## 재연할 수 있는 방법

```html



Document

div {
width: 200px;
height: 200px;
background-color: aqua;
}


div!!


const html = document.querySelector('html');
const body = document.querySelector('body');
const div = document.querySelector('div');

div.addEventListener('click', (e) => {
console.log('div!!')
});

div.addEventListener('click', (e) => {
console.log('capture div!!')
}, true);


body.addEventListener('click', () => {
console.log('bubble body!')
});

body.addEventListener('click', (e) => {
console.log('capture body!');
}, true);

html.addEventListener('click', () => {
console.log('bubble html!');
});

html.addEventListener('click', () => {
console.log('capture html!');
}, true)

```

이렇게 실행 했을 때, html과 body 부분은 capture부분이 먼저 실행되고, bubble 부분이 실행되는 것을 확인할 수 있습니다. 그런데 div 부분은 capture 먼저, bubble 먼저가 아닌 단순히 event가 설정된 순서대로 실행되는 것을 확인할 수 있어요.
![image](https://user-images.githubusercontent.com/38036598/103291365-e1ab8f00-4a2e-11eb-8bac-e274b351579a.png)

貢獻指南

開啟貢獻指南

從這裡開始

  1. 先讀完整個 Issue,再讀專案的貢獻指南。
  2. 在 Issue 下留言說明你要接手 —— 這能避免兩個人做同樣的事。
  3. Fork 儲存庫,在一個分支上完成修改。
  4. 送出 Pull Request,並在描述裡引用這個 Issue 編號。

研究方向

從連結的 bubbling 和 capturing 教學章節開始,執行提供的 HTML 範例以驗證 target phase 的行為。更新說明,準確描述為什麼兩個 listener 都會在 target 上執行,然後重新檢查周圍的事件順序範例以確保一致性。

由索引模型根據 Issue 內容生成。

評估

技術堆疊
javascript
領域
documentation
Issue 類型
文件
難度
1/5
預估耗時
1 小時以內
活躍度
停滯
描述清晰度
基本清楚
新手友好度
45/100

把新 issue 寄到你的電子郵件信箱

精選適合新手參與的 GitHub issue 摘要。