HTML and CSS Reference
In-Depth Information
});
</script>
</html>
If you reload the page, you should see that the task creation section (with all the input
fields) is not displayed when the page initially loads. If you click the “Add task” button
however, this section will immediately appear.
If you look at the event handler code you will see some familiar features. First, we select
the element we wish to add an event listener to using standard jQuery selection criteria:
> $('#btnAddTask')
Next we call the appropriate jQuery function on this element to add a click listener; this
function is called
click
and it accepts a JavaScript function as its parameter. In this ex-
ample, the JavaScript function passed to the click function is created on the fly as an an-
onymous function. This could also have been written as follows:
function btnAddClicked(evt) {
$(evt.target).preventDefault();
$('#taskCreation').removeClass('not');
}
$('#btnAddTask').click(btnAddClicked);
The technical term for the function we have passed to the
click
function is a callback. This
is because the function is not executed immediately; it is executed when a specific event
occurs (the user clicks the button). jQuery, like many other JavaScript libraries, makes ex-
tensive uses of callbacks, and we will see many other examples in the sections below.
You will also see that our function accepts a parameter called
evt
. When jQuery invokes
the function we passed to it, it will provide an object as a parameter representing the event
that has occurred.
The most useful feature that can be obtained from the event object is the element that
caused the event. The same event listener may be added to many elements, therefore we
will often need to find out which of these elements had the event invoked on it. This can be
extracted from the event object as follows:
evt.target
It may not be immediately obvious, but the object returned as the target is a plain DOM
object rather than a jQuery wrapped DOM object. This may sound like a minor point, but
