HTML and CSS Reference
In-Depth Information
Events
The next aspect of jQuery to understand is events. When writing web applications, the ap-
plication will need to respond to events initiated by the user.
These events may be any of the following:
• Clicking a link or button.
• Double clicking a button or link.
• Changing the value in a text field.
• Pressing a particular key inside an input field.
• Selecting an option in a select list.
• Focusing on an input field.
• Hovering the mouse over an element.
In addition to these user-initiated events, the application may wish to respond to browser-
initiated events such as:
• The document has finished loading.
• The web browser window is resized.
• An error occurring.
This section will first explain the ways event listeners can be registered, and will then look
at some of these events in detail.
Before beginning, we will add the examples above permanently to the tasks.html page. In
order to do this, add the following block immediately before the closing </html> tag:
<script>
$('[required="required"]').prev('label').append( '<span>*</span>').children( 'span').addClass('required');
$('tbody tr:even').addClass('even');
</script>
This is a block of inline JavaScript. We will eventually provide more structure to the web
application, and remove code such as this from the HTML page, but for now this is a simple
way of including JavaScript code in the web page.
We will now begin by adding a simple event to the sample web application we have been
working on. We will start by defining the task creation section of the screen (inside the first
section
element), to be hidden when we first come into the screen.
