Event Bubbling
Sự kiện bắt đầu từ element trigger rồi nổi bọt lên các element cha theo thứ bậc.
Minh họa
3 element lồng: div > span > button. Mỗi element gán onclick alert tên mình.
- Click button (inner most): alert "Button clicked" → "Span clicked" → "Div clicked".
- Click span: alert "Span clicked" → "Div clicked".
- Click div: chỉ alert "Div clicked".
Ví dụ
<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>
Kết quả: Click button → 3 alert bật lên lần lượt Button → Span → Div.