title: What does jQuery event.relatedTarget do?
body: <p>I don't quite understand what this does</p>
  <p>I read the rather official short documentation on it</p>
  <p><a href="https://api.jquery.com/event.relatedTarget/" rel="nofollow noreferrer">https://api.jquery.com/event.relatedTarget/</a></p>
  <blockquote>
  <p>Description: The other DOM element involved in the event, if any.</p>
  <p>For mouseout, indicates the element being entered; for mouseover, indicates the element being exited.</p>
  </blockquote>
  <p>I looked at the w3schools example on it</p>
  <p><a href="https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_relatedtarget" rel="nofollow noreferrer">https://www.w3schools.com/jquery/tryit.asp?filename=tryjquery_event_relatedtarget</a></p>
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
  &lt;script src=&quot;https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js&quot;&gt;&lt;/script&gt;
  &lt;script&gt;
  $(document).ready(function(){
      $(&quot;div, p&quot;).mouseenter(function(event){
          $(&quot;#msg&quot;).html(&quot;Related target is: &quot; + event.relatedTarget.nodeName);
      });
  });
  &lt;/script&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  &lt;div style=&quot;height:200px;border:solid&quot;&gt;This is a div element 
    &lt;p style=&quot;background-color:pink&quot;&gt;This is a paragraph&lt;/p&gt;
  &lt;/div&gt;&lt;br&gt;
  
  &lt;div id=&quot;msg&quot; /&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  <p>If you specify <code>mouseenter</code> as the event, does <code>relatedTarget</code> show the current container its in?</p>
  <p>But what if you had jQuery event handler with both a &quot;mouseleave&quot; and &quot;mouseenter&quot; at same time?</p>
  <p>could someone elaborate what the use cases are for event.related target as well in the real world if any?</p>