In addition to the bind/delegate/on methods, jQuery provides direct methods for handling events. These methods, as a rule, have the name of the event being processed, and take the function of the handler for this event as a parameter:
- blur: element loses focus event
- change: event changing element value
- click: click event
- dblclick: double click
- focus: Receive element focus
- focusin: receiving focus by an element or one of its children
- focusout: loss of focus by an element or one of its children
- hover: hover over an element and move out of the element
- keydown: keyboard key press event
- keyup: key release
- mousedown: mouse click on the element
- mouseup: mouse button release
- mouseenter: hover over an element
- mouseleave: move the mouse pointer out of the element
- mousemove: move the mouse pointer within the element
- mouseout: move the mouse pointer out of the element
- mouseover: hover over an element
- ready: load the element’s DOM structure
- resize: resize the browser window
- scroll: element scroll event
- select: text selection
- submit: form submission
<button>Button 1</button>
<button>Button 2</button>
<script type="text/javascript">
$(function(){
$('button').first().click(function(){
$(this).css('background-color', 'silver');
});
$('button').last().click(function(){
$('button').first().click();
});
});
</script>
In this case, for two buttons, we add event handlers click, that is, clicks. The first button handler simply sets the color of the pressed button (which we get with the expression $(this)).
For the second button, a handler is also set in the form of a function passed to the click. Only now the handler fires the click event for the first button: $(‘button’).first().click();.
Thus, depending on the task and preferences, we can use either the bind/delegate/on methods to register event handlers, or the above methods like click or mouseenter.