HTML and CSS Reference
In-Depth Information
it means that it is not possible to invoke jQuery functions on this element. For instance, if
we attempt to call the
html
function on this element, the following error will occur:
Whenever you are presented with a native DOM object, it is easy to convert it to jQuery
wrapped object by selecting it:
$(evt.target)
The result of this will expose all the standard jQuery functionality:
You will also notice the following line in the click handler:
evt.preventDefault();
A single element can have multiple event listeners attached to it. Some of these will be ad-
ded explicitly by the application, but the browser may add its own action implicitly. These
implicit event listeners are called the default action of the element; for instance, a hyperlink
has a default action that invokes its specified URL when it is clicked.
In this web application we do not want hyperlinks to exhibit this default behaviour, other-
wise the page would be refreshed every time the user clicked a button. Therefore we call
preventDefault
on the event to signal that the element's default action should be supressed.
//
Using hyperlinks instead of button elements is a personal preference. Many de-
signers have historically preferred them, since they tend to be easier to style, and
more flexible to use. There is however a strong argument in favour of using the
button elements in these cases.
The final aspect of this event handler is the removal of the class that was causing this ele-
ment to be hidden, which should be familiar code by now:
$('#taskCreation').removeClass('not');
It is possible to add click listeners to any HTML element. For instance, we can add a feature
to the
table
so that when the user clicks a row it will highlight in bold. If they then click
the row again it will return to normal.
