JavaScript Event bubbling & Event capturing

Event bubbling

Event bubbling model இல் event ஆனது அந்த specific element இல் occur ஆகிறது அதைத்தொடர்ந்து upward toward என்ற முறையில் least specific element (the document or even window) என்ற முறையில் occur ஆகிறது.

Event capturing

Event capturing model இல் event ஆனது least specific element இல் ஆரம்பமாகிறது அதைத்தொடர்ந்து downward toward என்ற முறையில் அந்த குறிப்பிட்ட element வரை occur ஆகிறது.

Example


<!DOCTYPE html>
<html>
<head>
    <title>JS Event Demo</title>
</head>
<body>
    <div id="container">
        <button id='btn'>Click Me!</button>
    </div>
</body>

Event bubbling Example

Event bubbling model இல் event ஆனது அந்த specific element அதாவது id='btn' என்ற attribute கொண்ட element இல் முதலில் occur ஆகிறது அதைத்தொடர்ந்து upward toward என்ற முறையில் least specific element அதாவது div body html document என்ற முறையில் occur ஆகிறது.

Event capturing Example

Event capturing model இல் event ஆனது least specific element இல் document html body div இல் ஆரம்பமாகிறது அதைத்தொடர்ந்து downward toward என்ற முறையில் அதாவது id='btn' என்ற attribute கொண்ட element வரை occur ஆகிறது.

Comments