Stack Overflow
Stack Overflow

Questions tagged [event-bubbling]

The concept of parent elements handling events that are propagated by a child element

In event bubbling, an event is propagated through the ancestors of the element that initially receives the event.

For example:

<div id='main' onclick='mainCode();'>
<div id='kid1' onclick='myVar=1;'></div>
<div id='kid2' onclick='myVar=2;'></div>
</div>

The click event bubbles, and so is propagated to the main <div> element after being handled by a kid <div> element.

This can make code simpler to understand, for example if mainCode() has access to the myVar variable, determining which kid sent the message is easy.

References

567 questions
23
votes
3 answers

What is the preferred way to bubble events?

I have three objects ObjectA has an ObjectB, ObjectB has an ObjectC. When ObjectC fires an event I need ObjectA to know about it, so this is what I've done... public delegate void EventFiredEventHandler(); public class ObjectA { ObjectB…
Tester101
  • 8,042
  • 13
  • 55
  • 78
23
votes
4 answers

Does stopPropgation stop the event from propagating in the capture phase?

I was looking at http://www.quirksmode.org/js/events_order.html and it is ambiguous in this part: In the Microsoft model you must set the event’s cancelBubble property to true. window.event.cancelBubble = true In the W3C model you must call the…
yic
  • 700
  • 1
  • 6
  • 13
22
votes
1 answer

Why firing a defined event with dispatchEvent doesn't obey the bubbling behavior of events?

I'm confused with the script below: var event = new Event('shazam'); document.body.addEventListener('shazam',function(){ alert('body'); }); document.addEventListener('shazam',function(){ …
Shnd
  • 1,846
  • 19
  • 35
22
votes
3 answers

Mastering event bubbling

Lets say we have a HTML structure like this
...and our goal is to have an event listener on the #container only ! So, we bind a listener (jQuery…
Andre Meinhold
  • 5,087
  • 3
  • 21
  • 29
20
votes
3 answers

If you delete a DOM element, do any events that started with that element continue to bubble?

What behavior should I expect if I delete a DOM element that was used to start an event bubble, or whose child started the event bubble - will it continue to bubble if the element is removed? For example - lets say you have a table, and want to…
Matt
  • 41,216
  • 30
  • 109
  • 147
19
votes
4 answers

Angular 2 : Stop propagation of parent element's event , when clicking on link

I have a case of event bubbling. Example : // content of innerHtml is : The tag is rendered from another component through…
misha
  • 231
  • 1
  • 2
  • 5
19
votes
4 answers

Capture click on div surrounding an iframe

How can I capture a click or mousedown event on a div surrounding an iframe. I've tried attaching the function to click event on the div but since the iframe never bubbles the event up to the surrounding div the function is never called. Is there a…
Gunjan
  • 1,177
  • 2
  • 11
  • 22
19
votes
1 answer

Why does scroll event not bubble?

Today I've got kind of theoretical question. Why does scroll event not bubble? Is it connected with performance issues? I did some digging, but unfortunately didn't find any answers that would fulfill my curiosity. Thanks for your replies :)
kaapa
  • 507
  • 4
  • 12
18
votes
7 answers

jQuery event bubbling

I want to understand how exactly to interpret bubbling. Does it mean going up the HTML code hierarchy or something else? Secondly, I was going through an example and I could not understand the last part where it says The P-based click handler…
copenndthagen
  • 49,230
  • 102
  • 290
  • 442
16
votes
3 answers

Reverse event bubbling in JavaScript

As you know, events usually bubble up in JavaScript, so the event handler of the element that fires the event is executed first, then the event handler of the parent element is called and so on. This behaviour causes some problems on a project I'm…
Simon
  • 3,509
  • 18
  • 21
16
votes
1 answer

Event listeners registered for capturing phase not triggered before bubbling - why?

I'm trying to understand what determines the order in which event handlers are triggered when clicking a nested
- what I am seeing seems to be at odds with documented behaviour so I'm looking for a little help to understand it. I have 2 nested…
codebox
  • 19,927
  • 9
  • 63
  • 81
15
votes
1 answer

Javascript : How to enable stopPropagation?

With object.stopPropagation() I can stop event bubbling but how can I re-enable it? Is there a pre defined function in js something like object.startPropagation? EDIT: The Problem is that the JS remembers if you click on the "object" than stop Event…
Adam Halasz
  • 57,421
  • 66
  • 149
  • 213
14
votes
2 answers

How do I stop WPF KeyDown events from bubbling up from certain contained controls (such as TextBox)?

My program is quite large, and uses WPF, and I want to have a global shortcut key that uses 'R', with no modifiers. There are many controls such as TextBox, ListBox, ComboBox, etc. that all use letters inside the control itself, which is fine -…
redroze
  • 143
  • 1
  • 1
  • 4
14
votes
2 answers

Event Capturing, Event Bubbling and jQuery.on()

I have an interesting question about event capturing, bubbling and jQuery.on(). I have recently learned more about the difference between event capturing and event bubbling and how the two flow differently in and out of the child-parent elements…
Methedex
  • 175
  • 1
  • 8
14
votes
3 answers

When are tunneling and bubbling events useful in WPF?

I understand how bubbling and tunneling works. However, i'm confused about using them. Here is why: I want to handle a mouse click event. To bubble it, there is MouseDown and, to tunnel it, there is PreviewMouseDown. However, MouseDown doesn't…
SanSolo
  • 2,267
  • 2
  • 24
  • 32
1
2
3
…
37 38