JavaScript Events

berserkarithmeticInternet and Web Development

Dec 14, 2013 (8 years and 2 months ago)


JS Predefined Objects Document Object Model
Several predefined objects exist in any JavaScript A W3C standard under development since the mid 1990s
It defines the interface between HTML documents and
Many are nested within other objects to reflect the application programs
document structure
Not specific to any programming language
window - the window that displays the document
The language must be able to specify DOM objects
document - the displayed document
In JavaScript, HTML elements are objects with attributes
forms - array of forms in document that correspond to the element attributes
elements - array of elements in a form DOM represents a document as a tree
property arrays for anchors, links, images, etc. DOM permits tree traversals, adding and deleting nodes,
and reordering nodes
1 2
A DOM Tree JavaScript Events
JavaScript is largely event-driven
Events indicate the actions of the browser and user
<head> <body>
An event handler is a script that is implicitly executed
when an event occurs
<title> <p> <hr> <table>
Associating an event to an event handler is called
"Example" "..." <tr> <tr>
Events are represented as objects in JavaScript
<td> <td> <td> <td>
An event is often associated with a particular HTML
element (tag)
"42" "69" "40" "75"
A click on a radio button vs. a click on a link
3 4
Document Output Events, Tags, and Attributes
The document.write method should never be used in an Events are associated with tags
event handler
Tag attributes are used to connect events generated by
The output of a write method becomes part of the those tags to event handler scripts
Events generally occur after an entire document is
Event Attribute Tags
The content generated by a write method in an event
load onload <img>, <body>
handler could overwrite existing content or cause other
<a>, <input type="submit">
click onclick
<input type="radio">
5 6Registration Accessing Elements
Event handler code can be written in the attribute, but its HTML elements (DOM objects) can be accessed using
usually best to define a separate function methods as well
<body onload="displayGreeting();">
form = document.getElementById("myForm");
<input type="radio" name="menu" value="100"
for (var i=0; i < form.elements.length; i++)
form.elements[i].onclick = explainChoice;
<form action="" onsubmit="checkPasswords();">
7 8