문서의 이전 판입니다!

JavaScript 버블링

description : JavaScript 버블링
author : 오션
email : shlim@repia.com
lastupdate : 2023-01-26 Thu

JavaScript 버블

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Bubbling</title>
</head>
<style>
    body * {
        margin: 10px;
        border: 1px solid blue;
    }
</style>
<body>
 
<form onclick="alert('form')">FORM
    <div onclick="alert('div')">DIV 
        <p onclick="alert('p')">P</p>
    </div>
</form>
 
</body>
</html>

가장 안쪽의 <p>태그를 클릭하면 아래와 같이 이벤트가 발생합니다.

<p>할당된 onclick 핸들러가 동작합니다.
외부의 <div>에 할당된 핸들러가 동작합니다.
그 외부의 <form>에 할당된 핸들러가 동작합니다.
document 객체를 만날 때까지, 각 요소에 할당된 onclick 핸들러가 동작합니다.

Ref Link

버블링과 캡처링

오션, Javascript, Bubbling, bubble

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

목차

JavaScript 버블링

JavaScript 버블

Ref Link

문제를 잘 정의하는 것은 문제를 절반 해결한 것이다. - 2023.12

사용자 도구

사이트 도구

목차

JavaScript 버블링

JavaScript 버블

Ref Link

문서 도구