Event-handling 101 - How can I capture an event from outer <div> in embedded <div>
<p>I am hoping there is a way to do this, with one event-handler. Allow me to explain:</p>

<p>Considering this simple html snippet that replicates without cruft the idea of what I am dealing with:</p>

<pre><code>&lt;div class="navRow"&gt;
     &lt;!-- 5 child divs in here --&gt;
    &lt;div id="box-bambin" class="yellow-box navbox"&gt;
    Content 1
    &lt;/div&gt;

    &lt;div id="box-mamiepom" class="green-box navbox"&gt;
    Content 2
    &lt;/div&gt;

    &lt;div id="box-amusailes" class="orange-box navbox"&gt;
    Content 3
    &lt;/div&gt;

    &lt;div id="box-fracomousse" class="red-box navbox"&gt;
    Content 4
    &lt;/div&gt;

    &lt;div id="box-pommeEnchantee" class="blue-box navbox"&gt;
        Content 5
    &lt;/div&gt;

&lt;/div&gt;
</code></pre>

<p>I had assigned event handler to all inner divs, but I am pretty sure one can just set one event handler on the outer div and capture the events on inner divs. When I set the event handler on outer div .navRow, my mouse captures the outer div event.</p>

<pre><code>  $('.navRow', context).mouseover(function (event, domEle) {      

     var targetBox =  $(event); 

     console.log("captured event target = " + event.currentTarget);

        $('.navRow').each(function(){
            if($(this).attr('id') == $(event.target).attr('id')){
               // Found match do nothing.
              console.log("matched = " + $(this).attr('id'));
            } else{
              console.log("this = " + $(this).attr('class'));
              //* change for image.
            }
        });

  });
</code></pre>

<p>At this point I am simply trying to get the inner div that was moused-over. Please, I am very much in need of any critique / hints on bad usage I am doing. Nothing I have tried gives me inner elements #id that was moused-over.</p>

<p>I tried .target and currentTarget properties but they don't give proper inner div object id.</p>

<p>Is there a way around this, or would all inner objects need to be binded to event handlers?</p>

<ul>
<li>I had a similar piece of code  working proper with inner event handlers, just wanted to replicate code behavior, with one single event-handler if possible.</li>
</ul>

<p>I was thinking this is how bigger applications would work, I mean not having all these event handlers would simplify things somewhat, it seems?</p>

<p>Thanks SO.</p>
