이벤트 버블링
이벤트 버블링 프로세스는 이벤트를 트리거한 요소에서 시작한 다음 계층 구조의 포함 요소까지 버블링됩니다.
브리핑
다음 예에는 3개의 요소 div가 있습니다. , 범위 및 버튼 .
- 계층 구조를 유지하려면 버튼 이 필요합니다. span 안에 중첩될 요소 요소 및 범위 div 안에 중첩될 요소 요소.
- 모든 요소에 클릭 이벤트를 할당하여 요소가 클릭되었을 때 예와 같이 경고 상자가 열리고 존경받는 메시지를 표시해야 합니다.
- 프로그램을 실행하면 아래와 같은 이미지가 화면에 실행됩니다.
- 요소가 클릭되면 자동으로 외부 요소(요소 포함)도 버블링되어 실행됩니다.
- 예를 들어, 가장 안쪽에 중첩된 요소(버튼)를 클릭하면 경고 상자와 함께 다른 요소의 경고 상자(span, div)도 계층 구조를 따라 하나씩 열립니다.
- 예를 들어 범위 요소 다음 span 경고 상자 및 포함 요소 div 것입니다 하나씩 열어보세요.
- 8) 요소를 트리거한 다음 계층 구조의 포함하는 요소까지 버블링하는 이 프로세스를 이벤트 버블링이라고 합니다. .
- 9) 트리거되고 버블링된 요소가 실행됩니다.
예시
<html>
<head>
<style>
.styleClass{
display:table-cell;
border:1px solid black;
padding: 20px;
text-align:center;
}
</style>
</head>
<body>
<div class = "styleClass" onclick = "alert('Div clicked')">Div element
<span class = "styleClass" onclick ="alert('Span clicked')">span element
<input type = "button" value = "click me" onclick="alert('Button clicked')">
</span>
</div>
</body>
</html> 코드 편집기에서 프로그램을 실행하면 다음 이미지가 표시됩니다.
'click me' 버튼(버튼 요소)을 클릭하면 다음 출력이 표시됩니다.
출력
위의 "click me" 버튼(버튼 요소)을 클릭하면 다음 출력이 표시됩니다.
on clicking ok on above button alert box, we will get the following alert box with message span clicked.
on clicking ok on above span alert box, we will get the following alert box with message div clicked.
