<body>
<form id="form">FORM
<div id="div" style="background-color: aqua;">DIV
<p id="p" style="background-color: blue;">P</p>
</div>
</form>
<script src="index.js"></script>
</body>
Although I don't have a click handler on p nor on div (it's on purpose), when I click for example on div it triggers the click on a more external element (form).
JS:
let form = document.getElementById('form');
let div = document.getElementById('div');
let p = document.getElementById('p');
form.addEventListener("click", e => { // why is this event triggered when I click on p or div?
console.log("capturing form")
}, true);
div.addEventListener("focus", e => { // it's intentional
console.log("capturing div")
}, true);
p.addEventListener("focus", e => { // it's intentional
console.log("capturing p")
}, true);
Ouput:
capturing form
Is this the expected behavior?
Click handler for an event is a function that define further processing when an event occurs. With or without handler function, event will be fired by browser anyway.
As you could see in below snippet, the click event will be propagated from child element to parent elements. The event bubbling is expected behavior for click event.
let form = document.getElementById('form');
form.addEventListener("click", e => {
console.log("** click event on element: " + e.target.id);
console.log(". bubbling to element: " + e. currentTarget.id);
}, true);
form.addEventListener("keyup", e => {
console.log("** keyup event on element: " + e.target.id);
console.log(" bubbling to element: " + e. currentTarget.id);
}, true);
form.addEventListener("focusin", e => {
console.log("** focusin event on element: " + e.target.id);
console.log(" bubbling to element: " + e. currentTarget.id);
}, true);<form id="form" >FORM
<div id="div" style="background-color: aqua;">DIV
<p id="p" style="background-color: blue;">P</p>
<input id="text" type="text" />
</div>
</form>