1. Code Topic 9 Standard JavaScript Events Laura Friedman
cit 261:02 (Online)

2. JavaScript Events A reaction to HTML events something the browser does
something the user does
<element event=‘some JavaScript’>
<element event=“some JavaScript”>

3. JavaScript Event Handlers
Handle and verify user input, user actions, and browser actions:
Every time a page loads
When the page is closed
When a user clicks a button
Verify content when a user inputs data
And more . . .

4. JavaScript Event Methods
HTML event attributes can execute JavaScript directly
HTML event attributes can call JavaScript functions
Assign own event handler functions to HTML elements
Prevent events from being sent or being handled
And more . . .

5. HTML JavaScript DOM Events
Allow JavaScript to register different event handlers on elements in an HTML document
Events are normally in combination with functions
The function WILL NOT be executed before the event occurs (i.e. button click)

6. Examples
<button onclick="this.innerHTML = Date()">The time is?</button> The above changes the content of its own element (using this.innerHTML)
<button onclick="document.getElementById('demo').innerHTML = Date()">The time is?</button> The above changes the content of the element with id=“demo”
<button onclick=“displayDate()">The time is?</button> The above calls a JavaScript function that initiates one of the first two examples.

7. Common HTML Events Event Description onchange
An HTML element has been changed
onclick
The user clicks an HTML element
onmouseover
The user moves the mouse over an HTML element
onmouseout
The user moves the mouse away from an HTML element
onkeydown
The user pushes a keyboard key
onload
The browser has finished loading the page

8. DOM Events Print Media Mouse Animation Keyboard Transition
Server-Sent
Miscellaneous
Touch
Mouse
Keyboard
Frame/Object
Form
Drag
Clipboard

9. Resource for DOM Events

10. Demos