title: (JavaScript) how does event.stopPropagation() work
body: <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>   $('input').click(function(){
          $('input').val('');
          event.stopPropagation();
          $(document).click(function(){
              $('input').val('naam'); 
          });
          
      });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>input[value="naam"] {
      font-family:  Century Gothic,CenturyGothic,AppleGothic,sans-serif; 
      color: gray;
      font-style: italic;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"&gt;&lt;/script&gt;
  &lt;form id="Erk_Member"&gt;
              Naam:
              &lt;input type="text" name="fname" value="naam" id="Name_Input"&gt;
          &lt;/form&gt;   </code></pre>
  </div>
  </div>
  </p>
  
  <p>So as you can see , I used a event.stopPropagation() and it does it work perfectly but I can just paste it and let it stay there while I don't understand it or I could understand it and know when I could use it another time.</p>
  
  <p>So I did some research, on the jQuery website and w3schools and I learned that it's prefenting jQuery from thinking that I clicked the input but also his parent. But I stil don't know how it makes this code work.</p>
  
  <p>Can somebody explane this to me in a simple way </p>