Event bubbling in JavaScript
Question
There is something I can't seem to understand about the definition of bubbling.
I know that event bubbling means event propagation from inner element to outer element. I also know that you can "choose" you way of propagation with the last optional parameter of addEventListener().
The thing I do not understand is this one:
<body>
<div id = "divi">
<p id = "para">Paragraph</p>
</div>
<script>
var elementd = document.getElementById('divi');
elementd.addEventListener("click", MessageD);
function MessageD(){
alert('A message');
}
</script>
</body>
Here I attach a click event to my div element. By default, the click event is bubbling, which means he is going up through the DOM. But when I click on my paragraph, the click event is executed.
To my understanding, that means that the click event propagates to the "p" child element first, or DOWN the DOM. Can someone explain to me why and what happens? Thanks!
--- EDIT AFTER SOME ANSWERS ---
Maybe what troubles me is better explained through this example:
<body>
<style>
#myDiv, #results {
margin: 50px;
}
#myDiv {
padding: 10px;
width: 200px;
text-align: center;
background-color: #000;
}
#myDiv div {
margin: 10px;
background-color: #555;
}
</style>
<div id="myDiv">
<div>Text 1</div>
<div>Text 2</div>
<div>Text 3</div>
<div>Text 4</div>
</div>
<div id="results"></div>
<script>
var myDiv = document.getElementById('myDiv'),
results = document.getElementById('results');
myDiv.addEventListener('mouseover', function() {
results.innerHTML += "I'm in.<br />";
}, false);
myDiv.addEventListener('mouseout', function() {
results.innerHTML += "I'm out.<br />";
}, false);
</script>
</body>
If you try running this code, you'll be "out" and "in" any time you enter and exit a child div... meaning you'll be "in" in child divs.
Doesn't that means that the events propagate from the parent to the child, or down way?
--- FINAL EDIT --- I finally understood: I made a confusion between an event and an event handler.
An event is just a click, so anything in a page can receive it. Once you have clicked, this click event is going to go to the top of the DOM, and when it encounters click event handler, the function associated to the event handler will be executed.
Thanks everyone!
2 answers
solution1
3 ACCPTED 2015-05-29 22:22:24
To my understanding, that means that the click event propagates to the "p" child element first, or DOWN the DOM.
No. In that case the p element is the target of event. Event propagates to the div element. div element has a click handler and it's executed.
This is how events work. Target of the event is an element that has triggered the event, the target can be the element that you have attached the listener to or one of it's children/descendants. target property of the event object refers to the target element of the event and when addEventListener is used for attaching an event listener, this value of the handler refers to the owner of the handler, in this case the div element.
The fact that you have attached an event listener has nothing to do with how event works. Click events are fired whenever the user clicks. It's you, the developer, that attaches an event listener for listening to specific event triggered for an element. If you don't attach a listener, still the event is triggered.
solution2
0 2015-05-29 22:27:59
When you click on the paragraph, it's not being handled there, so it propagates up to the DIV. If you use this version of the code, it shows which element the event is being handled by. The alert says divi , not para .
var elementd = document.getElementById('divi'); elementd.addEventListener("click", MessageD); function MessageD() { alert(this.id); }
<div id="divi"> <p id="para">Paragraph</p> </div>
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.