Question

So I am just trying to add some functions to hover. the below does about the same thing except the one with the for loop i have the target stored in an array. I actually have a few questions.

1. is this the correct use of stopPropagation?
2. what’s the best practice for doing something like this?
3. which one of the below method is faster and uses less resources?
4. I know I can use hover() but I used bind because I thought it is faster, is my thinking correct?

thank you

    for (var i in slides) {
        $(slides[i].el).bind( {
            mouseenter: function (event) {
                event.stopPropagation();
                // do something
            },
            mouseleave: function (event) {
                event.stopPropagation();
                //do something
            }
        });
    }

    $("#vehicleSlides .vehicleAreas").bind( {
        mouseenter: function (event) {
            event.stopPropagation();
            // do something
        },
        mouseleave: function (event) {
            event.stopPropagation();
            //do something
        }
    });

Answer 1

1 – is this the correct use of stopPropagation

If you wish to stop the event bubbling up the DOM tree, then yes.

2 – what’s the best practice for doing something like this

Personally, I prefer the jQuery selector followed by methods, but this is just a preference. The best practice is whatever style you and your team all agree upon and use consistently.

3 – which one of the below method is faster and uses less resources

In practical terms, there will be next to no difference between the two.

4 – I know I can use hover() but I used bind because I thought it is faster, is my thinking correct

The jQuery hover method is shorthand for the bind to mouseenter and mouseleave events, so there will be one extra function call using hover, however there will be almost no difference in performance.