jQuery Event Handling

Handling events with jQuery

Click Events

$('button').click(function() { # click event
    alert('Clicked');
});
$('button').dblclick(function() { }); # double click

Mouse Events

$('div').mouseenter(function() { }); # mouse enter
$('div').mouseleave(function() { }); # mouse leave
$('div').hover(enterFn, leaveFn); # hover (enter & leave)

Form Events

$('input').focus(function() { }); # focus event
$('input').blur(function() { }); # blur event
$('input').change(function() { }); # change event
$('form').submit(function(e) { # submit event
    e.preventDefault();
});

On Method

$('button').on('click', function() { }); # attach event
$('div').on('click', 'button', function() { }); # delegated event

Remove Event

$('button').off('click'); # remove event handler

Event Object

$('button').click(function(e) {
    e.preventDefault(); # prevent default action
    e.stopPropagation(); # stop bubbling
    console.log(e.target); # event target
});