Who's gonna save me from this dilemma?!
I shrugged at my laptop about closing the tabs, powering off the system and slipping into the ice cold evening, but then, just like a ray of sunlight...
This is a story of discovery.
A week earlier, I had already figured out the perfect project to put a seal on my vanilla JavaScript learning.
I beamed with a smile everytime I remembered the name I had given my app,
TraXpense.
From its name, TraXpense is an app that helps keep track of a user's expenses but this wasn't your average expense tracker. I had planned to spice things up using a more detailed analytical approach with CHARTS.
I had to go online and research on how to implement charts in my web app. I discovered the lovely chart.js library that helped provide an analytical clarity to TraXpense.
I was able to represent the expenses of a user based on the category(item), and the amount(price) spent.
It was fun but not easy.
ChartJs is super cool!
Back to my story...
Two days later, I was ready to start.
I began to implement everything I had learnt so far in JavaScript including the Map, Filter, and Reduce array methods, DOM manipulation, the ChartJs library to mention but a few.
Honestly, It was quite a smooth sail for the first two days not until I encountered a bug. ⛔⛔⛔
TraXpense has a transaction section where transactions(expenses) are recorded by a user.
To add a transaction, a user is required to select an expense category, date of transaction and the amount spent; this makes up a transaction block(div),
Clicking the "Done" button then inputs (append) the transaction block (div) into the transaction section.
The implementation was fun and direct, but then something strange happened.
Clicking the done button again(second time) gets 2 div boxes appended, creating the original plus a copy of it,
third click leads to 3 div boxes,the original plus extra two copies of it and so on...
Instead of just 1 each time.
Ok, that looked like a puzzle?
Check it out 👇🏽
So, clicking the "Done" button 4 times, led to the addition of 10 div boxes (transaction) instead of just 4.
It was messy.
...picking up from where I left off at the begining of this article.
I almost gave up but then I scoured through the internet till I finally found something that looked like what I was experiencing.
EVENT PROPAGATION IN JS.
What is Event Propagation?
Event Propagation is the generation and movement of Events in the DOM tree down from the Document root to the element handling the event, and up from the element back to the Document root.
Event Propagation is divided into 3 phases.
Capturing Phase.
When an event is performed, for example a click event, the event isn't generated at the element performing the event, rather it is generated at the Document root from where it travels down the tree to the element handling the event. This phase is known as the Capturing phase. The event travels down the DOM tree to the children elements but not sibling elements.
Target Phase.
When the event generated is at the element handling the event, the event/task is then executed. This phase is known as the Target Phase.
Bubbling Phase.
After the event is executed, it then travels back up to the DOCUMENT root via the PARENT elements in a phase called the BUBBLING phase.
Ok, that was beautiful,
nice presentation,
lovely piece...
but I was still stuck!!!
Understanding event propagation just wasn't enough.
However, on the bright side ☀️, I had a better sense of direction.
Based on this new information, I intuitively tried looking for something that could prevent/stop an event from executing wrongly
Digging further, I finally found something that had the words "stop" and "propagation" in it, boom!, a wave of hope swept through me.
The "stopPropagation()" and "stopImmediatePropagation()" methods!
Without any hesitation, I hurriedly copied the syntaxes, pasted it in my event listener callback function.
Now, just like the "preventDefault()" event method, these two methods are also attached to the event parameter of the callback function of an event listener.
I then reloaded the page, to sync the browser and my code, tried adding a transaction again...
And just like that...
it worked!.
Oh my!!
Adding a transaction the second and third time still resulted in the addition of one div box each containing that specific transaction.
I jolted out of my chair, heaved a sigh and then promised to share this great feat with my children someday, yh.
I wish I was joking 🌚.
After I regained consciousness from my "yayy" moment, curiosity kicked in.
Which of the two methods worked, or did both work together, and how do they even work?🤔
Find out in the second part of this article where I share
how I was able to figure out which method worked and what these methods really do in "Event Propagation".
I'm Mayowa, a front-end developer with a knack for creating value and helping people solve problems via coding and writing.
Do well to follow me.
Twitter
LinkedIn .
Thank you.
Top comments (0)