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
});