search

yuzunsang / JS-deep-dive-study

자바스크립트 딥 다이브 스터디✨
0 stars 3 forks source link

[CH40]이벤트 #48

Open yuzunsang opened 2 months ago

yuzunsang commented 2 months ago

[퀴즈 예시] Q. 여기에 퀴즈 설명을 적으세요.

적을 코드가 있다면 밑에 적어주세요. (백틱 3개로 코드를 감싸면 코드 양식을 적을 수 있습니다.)

// 예시 코드
const arr = [1, 2, 3];
console.log("Hello");

아래 코드를 복붙해서 정답을 적어주세요.

<details>
    <summary>정답</summary>
    <div markdown="1">    
    정답 설명
    </div>
</details>
yuzunsang commented 2 months ago

Q. addEventListener 메서드 방식으로 이벤트 핸들러를 등록할 때, 전달해야 할 매개변수에 대해 설명하세요.

EventTarget.addEventListener(??, ??, ??);
정답
첫번째 매개변수 : 이벤트 타입(Ex. click)
두번째 매개변수 : 이벤트 핸들러(Ex. handleClick과 같은 함수)
세번째 매개변수 : 이벤트 전파 단계를 지정(생략하거나 false이면, bubbling / true이면 capturing)
bo-eun commented 2 months ago

Q. button 요소를 클릭했을 때 노출되는 콘솔로그 결과를 예상해보세요.

...
<body>
<div>
        div 영역
        <button>버튼</button>
</div>
...

<script>

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

    document.queerySelector('div').addEventListener('click', () => {
        console.log('div');
    }, true);

    document.querySelector('button').addEventListener('click', () => {
        console.log('button');
    })
</script>
</body>
정답
div button body 순서대로 콘솔로그에 나온다.