Introduction to Event Handling in Web Programming

Web Programming CSC 242 Professor John Carelli Kutztown University Computer Science Department

Events Events occur when a user or the browser interact with HTML elements, for example a page is loaded into the browser a button is clicked the mouse is moved Useful Links: W3Schools Events W3Schools DOM events reference WindowEvents.html Professor John Carelli Kutztown University Computer Science Department

Event Registration JavaScript can both initiate and respond to events DOM can be used to interact with the web page the window object is used to define how the event will be handled 1. An event handler function is defined In JavaScript 2. The handler function is registered using with the OS using window.addEventListener() Event types: load, click, Multiple events are supported Can remove a listener with removeEventListener() bubbling is supported (more on this later ) 3. When the targeted event occurs, the handler function is executed registering.html Professor John Carelli Kutztown University Computer Science Department

Older Registration Models Two types: inline and traditional both make use of HTML on attributes onload, onclick, Note: These options will overwrite existing events Only one event is supported inline on attribute appears in the HTML <div onclick = "handleEvent()"> traditional on attribute accessed in JavaScript var traditional = document.getElementById( "traditional" ); traditional.onclick = handleEvent; registering_trad.html registering_inline.html Professor John Carelli Kutztown University Computer Science Department

External JavaScript JavaScript code can be placed in external files Access using the src attribute in the <script> tag <script src= myJScode.js ></script> Allows for a common set of JavaScript functions across all pages including event handling like an external CSS style sheet More event handling in: Events and Strings Professor John Carelli Kutztown University Computer Science Department

Event Object When the browser calls an event handler function, it passes the event object to the function If a parameter is defined in the handler, the object can be used in the function Standard practice is to name the event "e" The Event Object has a variety of useful properties and methods e.target target is the element that triggered the event function handleEvent(e) { console.log(e.target); } W3Schools Event Object mouseoverout.html focusblur.html draw.html Professor John Carelli Kutztown University Computer Science Department

Event Bubbling By default, events bubble up to parent objects containing the object that triggered the initial event if a handler is in place, the parent will also respond to the event Controlled with the cancelBubble property of the event object bubbling.html Professor John Carelli Kutztown University Computer Science Department

BOM (Browser Object Model) JavaScript can communicate with the browser Referred to as the BOM No official standard, but All browsers support the window object Some useful capabilities: window.history Can be used with out window prefix history.back() - same as clicking back in the browser history.forward() - same as clicking forward in the browser Professor John Carelli Kutztown University Computer Science Department

Timer Events window object supports code execution based on timing events Some useful functions: setTimeout(function, milliseconds) Executes a function, after waiting a specified number of milliseconds. timerVariable = setInterval(function, milliseconds) Same as setTimeout(), but repeats the execution of the function continuously. clearInterval(timerVariable) stops the execution of the function in setInterval() timers.html clock.html Professor John Carelli Kutztown University Computer Science Department

AJAX AJAX allows communication with the server Capabilities: Read data from a web server - after the page has loaded Update a web page without reloading the page Send data to a web server - in the background Provides access to the browser built-in XMLHttpRequest object W3Schools XMLHttp To send request to the server Wait for a response Act on it W3Schools Example ajaxExample.html Professor John Carelli Kutztown University Computer Science Department