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

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

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 . . .

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 . . .

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)

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.

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

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

Resource for DOM Events https://www.w3schools.com/jsref/dom_obj_event.asp

Demos