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

説明

🐛 Bug report

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

https://ko.javascript.info/bubbling-and-capturing

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

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

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

환경

Windows 10, Chrome

재연할 수 있는 방법

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            width: 200px;
            height: 200px;
            background-color: aqua;
        }
    </style>
</head>
<body>
    <div>
        div!!
    </div>
    <script>
        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)
    </script>
</body>
</html>

이렇게 실행 했을 때, html과 body 부분은 capture부분이 먼저 실행되고, bubble 부분이 실행되는 것을 확인할 수 있습니다. 그런데 div 부분은 capture 먼저, bubble 먼저가 아닌 단순히 event가 설정된 순서대로 실행되는 것을 확인할 수 있어요.

はじめの一歩

issue を最後まで読み、次にプロジェクトのコントリビューションガイドを読みます。

着手することを issue にコメントします — 二人が同じ作業をするのを防げます。

リポジトリをフォークし、ブランチを切って変更します。

issue 番号を参照したプルリクエストを送ります。

調査の方向性

リンク先のバブリングとキャプチャリングのチュートリアル節から始め、付属の HTML 例を実行してターゲットフェーズの動作を確認してください。両方のリスナーがターゲット上で実行される理由を正確に説明するよう説明を更新し、その後、周辺のイベント順序の例を再確認して整合性を確認してください。

索引モデルが issue の本文から書いたものです。

評価

技術スタック

javascript

領域

documentation

issue の種類

ドキュメント

難易度

1/5

見積もり時間

1時間未満

活発さ

停滞

明瞭さ

おおむね明確

初心者へのやさしさ

45/100

説明

🐛 Bug report

환경

재연할 수 있는 방법

コントリビューションガイド

はじめの一歩

調査の方向性

評価

新しい issue をメールで受け取る