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](http://stackoverflow.com/questions/9812062/combining-jquery-functions-on-hover-mouseenter-mouseleave) — rnevius, Nov 04 '16 at 19:41

score 3 · Answer 1 · answered Nov 04 '16 at 19:39

3

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

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

answered Nov 04 '16 at 19:39

mukesh kudi

719
6
20

George Kagan · Accepted Answer · 2016-11-04T19:41:45.563

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 04 '16 at 19:41

answered Nov 04 '16 at 19:37

George Kagan

5,913
8
46
50

1

This is exactly what I need. Thanks! Accepting as answer when the system allows me to. – Alexander Graham Nov 04 '16 at 19:40

jQuery single handler for multiple events

2 Answers2