Stop propagation prevents the event to bubble upwards to the parent. Consider the following HTML example.
<div id="parent">Parent div
<p id="para1">Paragraph element in the div</p>
<p id="para2">Another paragraph element</p>
</div>
<a id="link" href="www.google.com">Click me</a>
Now we will define the behavior of the above elements using Javascript. I will use jquery for a simplified code.
$("document").ready(function(){
$("#parent").click(function(e){
alert("Parent Clicked")
})
$("#para1").click(function(e){
alert("Paragraph 1 clicked")
})
$("#para2").click(function(e){
e.stopPropagation();
alert("Paragraph 2 clicked")
})
$("#link").click(function(event){
event.preventDefault();
});
})
In the above example as you can see that we have 2 child paragraph components of a parent div component. And to each component we have attached a click event. So when we are clicking a paragraph element(child) we are also clicking the div element(parent).
So in the above example when you click on paragraph 1 you get an alert "Paragraph 1 clicked" and then you get an alert "Parent Clicked". But when you click on paragraph 2 you only get the alert "Paragraph 2 clicked" and the event is stopped there and does not bubble to the parent div element.
For event.preventDefault(); in the above example there is a link which points towards google.com. But instead of navigating to google.com you can put some other behavior like an alert or something.