Why do i need to use stopPropagation()?

Question

I do not understand what does stopPropagation do.Why i need to use stopPropagation() in this code?. If i don't use it the enter key doesn't work the first time. Here is the code: http://codepen.io/Juan1417/pen/XNJeWd

$(document).ready(function () {
    $("#searchTerm").keypress(function (e) {
        if (e.which == 13) {
            $("#search").click();
            **e.stopPropagation();**
            return false;
        }
    });

    $("#search").click(function () {
        var searchTerm = $("#searchTerm").val();
        var url = "https://en.wikipedia.org/w/api.php?action=opensearch&search=" + searchTerm + "&format=json&callback=?";
        $.ajax({
            type: "GET",
            url: url,
            async: false,
            dataType: "json",
            success: function (data) {
                for (var i = 0; i < data[1].length; i++) {
                    $("#output").prepend("<li><a href=" + data[3][i] + " target='_blank'>" + data[1][i] + "</a><br><span>" + data[3][i] + "</span><br>" + data[2][i] + "</p></li>");
                }
            },
            error: function (errorMessage) {
                alert(errorMessage);
            }
        });
    });
});

Answer 1

So you click a button (which has a click handler) and it’s inside a div (which has it’s own click handler).

Due to event propagation or bubbling, both event handlers would fire. Events begin in the element where they are first created, and continue passing down until they reach the root. The only way to prevent this is by using Event.stopPropagation() which essentially means -- do not dispatch an event any further.

Hope this helps...

Answer 2

Here is some code that I wrote, in order to try to understand how event-listeners and propagation work in the DOM.

Conceptual repl.it. How I imagine the code is working under the hood: https://repl.it/@maiya_02/understanding-event-emitters

Interactive codepen. Click on nested divs to see how the eventObject bubbles up the DOM. Uncomment line 15 in the javascript, to see how stopping event propagation effects the bubbling of the event. https://codepen.io/maiya/pen/OQVYPY?editors=1111

If the structure is:

1. A button element is clicked

2. The code under the hood looks to see if there is a property (like 'click' on that button element. It looks to see if the 'click' property is assigned to a function.

   button = { 
      tagName: 'button', 
      id: 'myButton', 
      click: function(event) {
          console.log(event.currentLocation);
          },
      parentNode: //points to the div object that contains this button element
     }
   

3. If the click property is assigned to a function, that function is fired. The event object that was created when the event happened is passed as the parameter to that function.

4. If 'event propagation' is enabled, the code will then look for a property on the button element, called parentNode.

    button.parentNode = {
       tagName: 'div',
       id: 'myDiv',
       click: function(event) {
         console.log('this event is being fired in the ' + event.currentLocation.id + ' element' );
       },
       parentNode: // some other div that contains this div
    }  //object (node) that contains the button element
   

5. If this parent element also has a click property that is assigned to a function, then that function is also passed the event object and fired. Then, the code looks for that element's parent and repeats the process until it gets to the root of the DOM (the root element will not have a parentNode, so the code will stop looking there).

6. If you 'stop propagation', the code under the hood fires the click method on the button element-object and then stops looking to see if other parent element-objects have a click method.

Answer 3

Do no use stopPropagation. Ever. Period(*).

In principle your event handler cannot know that a higher level handler should not even see an event.

Instead use preventDefault to signal to other handlers that the event has already been handled, and check defaultPrevented in all handlers to avoid incorrectly handling an event twice. This becomes exceedingly important in writing complex components to be used by others.

Stopping propagation will eventually cause unintended consequences.

(*) Except in the exceedingly rare circumstances that you really, truly, must make it appear to the system that this event never even occurred to begin with.