jQuery single handler for multiple events

Question

$('div').mouseenter(function() {
    $(this).slideUp(150);
});

$('div').mouseenter(function() {
    $(this).slideDown(150);
});

How can I combine this into something smaller?
Don't know enough jQuery / JS for this yet.

Possible duplicate of Combining jquery functions - on() hover/mouseenter/mouseleave — rnevius
– rnevius, Commented Nov 4, 2016 at 19:41

mukesh kudi · Accepted Answer · 2016-11-04 19:39:28Z

3

You can use .on() to bind a function to multiple events:

$('div').on('event1 event2', function(e) {
 $(this).slideToggle(150);
});

answered Nov 4, 2016 at 19:39

mukesh kudi

7296 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

George Kagan · Accepted Answer · 2016-11-04 19:41:45Z

2

$('div').on('mouseenter mouseleave', function() { 
   ...
})

Another benefit of using .on() is event delegation, meaning any future divs will also trigger the events, instead of manually binding the event on them.

edited Nov 4, 2016 at 19:41

answered Nov 4, 2016 at 19:37

George Kagan

6,1448 gold badges50 silver badges50 bronze badges

1 Comment

Alexander Graham Over a year ago

This is exactly what I need. Thanks! Accepting as answer when the system allows me to.

Collectives™ on Stack Overflow

jQuery single handler for multiple events

2 Answers 2

Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related