Question

I am hoping there is a way to do this, with one event-handler. Allow me to explain:

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

<div class="navRow">
     <!-- 5 child divs in here -->
    <div id="box-bambin" class="yellow-box navbox">
    Content 1
    </div>

    <div id="box-mamiepom" class="green-box navbox">
    Content 2
    </div>

    <div id="box-amusailes" class="orange-box navbox">
    Content 3
    </div>

    <div id="box-fracomousse" class="red-box navbox">
    Content 4
    </div>

    <div id="box-pommeEnchantee" class="blue-box navbox">
        Content 5
    </div>

</div>

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.

  $('.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.
            }
        });

  });

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.

I tried .target and currentTarget properties but they don’t give proper inner div object id.

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

• 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.

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

Thanks SO.

Answer 1

Then use on() (jQuery 1.7+) on the parent for that “single hander”, and siblings() to get the others that are not the target.

//"attach to .navRow an onmouseover for .navbox"
$('.navRow').on('mouseover','.navbox',function () {      

     //the target. "this" is the DOM element .navbox
     //to use jQuery on it, we wrap it in $();
     var target = $(this);

     //the siblings that are not the targets
     //since "target" is already a jQuery object
     //we can use siblings() on it to get its siblings
     var nonTargets = target.siblings(); 

});