jquery event bubble not working

Question

I think I understand event bubble but when I put below code into practice, it doesn't seem to work. Alert stops at span level when I expect them to continue beyond that. If someone can point to what I am missing I would appreciate it. BUT I have bigger puzzler(at least to me). What is the point of event bubble? It feels like to me that event bubble should NOT be the default and should be rather an option to turn it on. Can someone kindly give me an example of WHEN auto event bubble is useful?(and please do point out if event bubble is NOT on by default and therefore explains why my code do not get the results that I am expecting).

Huge thank you for everyone as always in advance!!

  <body>
     <div>
         <h1>
        <a href="#">
               <span>Hello</span>
        </a>
         </h1>
     </div>
     <script>
        //window.addEventListener("load",function(){
    //  var els = document.querySelectorAll("*");
    //  for ( var i=0; i< els.length; i++){
    //      els[i].addEventListener("click", function(){
    //      alert('click even fired on the ' + this.nodeName + '  element');
    //      });
    //       }
    //});
        $("span").click(function(){
               alert('click even fired on the ' + this.nodeName + ' element');
    });
     </script>

Further on propagation, given below code, if I only want to match spanOut, I do not want to use bubble method.(probably will have to squeeze in span id on that?). How will bubble method help in this case?

<span> spanOut
   <div>
       divOut
   </div>
        <span>spanIn</span>
            <div>divIn</div>
        <span>spanIn2</span>
   <div>
       divOut2
   </div>
</span>

Bubbling isn't really about having one handler to handle many elements. It's more about having a handler that lets other handlers do their thing. You'd bind your event handler to spanOut, via an ID for example. Even in this case, event bubbling still happens as the event will first trigger on divIn, then spanIn, then finally spanOut. — Joseph Young, Dec 22 '15 at 02:33

Joseph Young · Accepted Answer · 2015-12-22T02:42:18.700

2

The event bubbles, not the function bound to the event. The event is actually bubbling, but the parent elements don't have anything bound to them, only the span.

This fiddle shows how the event bubbles. The alert pops up twice, as there is the actual clicked span, then another span in the hierarchy. The event is triggered on the div, but the div has no handler bound to the event.

HTML:

<span>
  <div>
    <span>
      hello
    </span>
  </div>
</span>

JavaScript:

$("span").click(function(){
  alert('click even fired on the ' + this.nodeName + ' element');
});

Event bubbling is mostly useful because typically you don't bind your event to the bottom level element, but an element higher up in the tree. If the event didn't bubble, your top level element may never receive an event trigger.

Here's another example showing stopping bubbling

edited Dec 22 '15 at 02:42

answered Dec 22 '15 at 01:21

Joseph Young

2,758
12
23

thank you. I totally get what I missed from your example. thank you. I still need to wrap my head around why bubbling is needed. Is this because not every div or whatever is labled w/ id or class? Using this method(bubble), how will you ever guaranteed that right event is being matched and triggered?? – user3502374 Dec 22 '15 at 02:24
I added more example in original post to include my question on bubble – user3502374 Dec 22 '15 at 02:26
Another words, in html/js world, do you have so many more events that you want to match all that is alike(such as ALL Spans) vs match specific span ?? I am trying to understand why matching all span cases are more important than finding one span that I am specifically looking for. – user3502374 Dec 22 '15 at 02:28
if you have many div and if you wanted certain div when click to be highlighted, this is definitely when you don't want things bubble up. So given this type of scenario, when will you be sure that you want things to bubble up? – user3502374 Dec 22 '15 at 02:36
You can either stop propogation via https://api.jquery.com/event.stoppropagation/, or use a more specific selector to make sure only the element you want to trigger on, will trigger. The latter is much better. You only want to stop bubbling if something bad happened really – Joseph Young Dec 22 '15 at 02:37
1

Joseph Young, I accepted your answer. Thank you for staying with this and giving me extended examples. I definitely got the propagation and stoppropagation. Thank you for your persistence. – user3502374 Dec 22 '15 at 02:46

jquery event bubble not working

1 Answers1