JAVASCRIPT: Understanding DOM Event life cycle

A guide to understand the phases in the life cycle of an event.

Girish Kumar
Jun 22, 2018 · 3 min read
<!DOCTYPE HTML>
<html>
<head>
<title>
Sample
</title>
</head>
<body>
<button id="demo">
Press here
</button>
</body>
</html>
Code explaining the event path visually.

Proving same event object follows the entire event flow

Code explaining the same event object follows the entire event flow.
Code explaining the event handling during event target and bubbling phase.

Event handling during Capture Phase

Code explaining the event handling during event capture phase.

Event.stopImmediatePropagation()

Code explaining the event.stopImmediatePropagation.

Event.stopPropagation()

Code explaining the event.stopPropagation.

Summary

Prod.IO

Tech and Product stories from the dev team at KNOLSKAPE

Girish Kumar

Written by

Prod.IO

Prod.IO

Tech and Product stories from the dev team at KNOLSKAPE