0

I understand(at least in theory) what event bubbling is in javascript. I see examples and tutorial on line. What I fail to see is, if we always put stop propagation to stop event from bubbling when there are matches, why do we need event bubbling in the first place?

Am I correct in assuming that this is so because event bubbling starts at inner most and not inner most matching?

I am just not happy with any explanation(or perhaps I am not reading what I should be reading?)

My question is very simple.

Given below code

<style>
  body * {
    margin: 10px;
    border: 1px solid blue;
  }
</style>

<form onclick="alert('form')">FORM
  <div onclick="alert('div')">DIV
    <p onclick="alert('p')">P</p>
  </div>
</form>

How is bubbling up useful if all I want was when div was clicked, do alert('div') ? In what case, do I want this thing to bubble up and also do alert 'form' when div was clicked??

user3502374
  • 781
  • 1
  • 4
  • 12
  • 6
    "if we always put stop propagation" --- do we? I usually do not. (I probably cannot even remember when I used the event's `stopPropagation` method the last time) – zerkms May 09 '17 at 02:33
  • The first thing that comes to mind when some one says event bubbling is binding events to dynamically added elements –  May 09 '17 at 02:35
  • 3
    Delegated event handlers wouldn't work without bubbling. – nnnnnn May 09 '17 at 02:35
  • 1
    Stopping propagation is only required in specific cases, frequently you **want** the event to propagate as you don't know what other listeners may be waiting for it (e.g. using event delegation). Perhaps read [*QuirksMode: Event order*](https://www.quirksmode.org/js/events_order.html). – RobG May 09 '17 at 02:36
  • 1
    Otherwise, how would `
    ` ever work and/or how would you expect it to work?     – deceze May 09 '17 at 02:42
  • Since `p` and `div` occupy mostly the same space, how would you differentiate between a click on `p` and `div`…? You *are* clicking on all three elements at the same time in effect, how else to resolve this than by triggering the event on all elements with a bubbling logic? – deceze May 10 '17 at 06:52
  • That's the part I am not understanding... IF I wanted to attach some action I want to do when user clicks on `div`, and when user click the div, what happens? Does the program finds inner most div and do alert('div')? ok.. so that is what I wanted to do. Now it's gonna bubble up to form onclick.. how does that help me? – user3502374 May 10 '17 at 06:59
  • Whenever you click anywhere on the screen, the browser figures out what elements are at that spot; in your example, `p`, `div`, `form` and `body` are all at the same spot when you click anywhere within `p` (because they're nested within one another). So the `click` event is triggered on all of those elements in order. That is what's called "bubbling", the order in which the event is triggered on all those elements (inner to outer). Each element *could* do something on its own when receiving the event. – deceze May 10 '17 at 07:11

0 Answers0