CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.

CNIT 133 Interactive Web Pags –JavaScript and AJAX

Event and Event Handling

Agenda

• My Web Site: http://fog.ccsf.edu/~hyip (download syllabus, class notes).

• Event and Event handling.• Event samples.

http://fog.ccsf.edu/~hyip

Event and Event Handler Defined

• Events: are visitor and browser activities. (the phone rings)

• Event handlers: are the mechanisms that allow us to capture and actually respond to those events with a scripting language. (pick up the phone and say, “Hello”)

Writing Event Handlers

• Event handlers: are written inline with HTML, just like an HTML attribute. Therefore, Event handlers also called intrinsic event attributes. (the only different is that Event Handler executes JS script or function).

• HTML Tag: <p align=“right”>• Event handler/intrinsic event attribute: <body

onLoad=“alert(‘Hello’)”>

Events and Event Handling• JavaScript programs use an event-driven programming model. • The web browser generates an event whenever something

interesting happens to the document or to some element of it. For example, the web browser generates an event when it finishes loading a document, when the user moves the mouse over a hyperlink, or when the user clicks on a button in a form

• If a JavaScript application cares about a particular type of event for a particular document element, it can register an event handler – a JavaScript function or snippet of code – for that type of event on the element of interest. Then, when the particular event occurs, the browser invokes the handler code.

• All application with graphical user interfaces are designed this way: they sit around waiting for the user to do something interesting (i.e. they wait for events to occur), and then they respond.

Events and Event Handling

• Three distinct and incompatible event-handling models are in used: The original event model The standard event model The Internet Explorer event model

Basic Event Handling

• In the original event model, event-handling code is specified using the attributes of HTML elements. Thus, if your application needs to know when the user moves the mouse over a specific hyperlink, you use the onmouseover attribute of the <a> tag that defines the hyperlink.

• If the application needs to know when the user clicks the Submit button, you use the onClick attribute of the <input> tag that defines the button or the onsubmit attribute of the <form> element that contains that button.

Basic Event Handling• There are quite a few different event-handler attributes that you can use in the original

event model. • They are :

onblur onchange onclick onfocus onkeydown onkeypress onkeyup onload onmousedown onmousemove onmouseout onmouseover onmouseup onsubmit onunload

Event Handler Return Values• In many cases, an event handler uses its return value to

indicate the disposition of the event. For example, if you use the onsubmit event handler of a Form object to perform form validation and discover that the user has not filled in all the fields, you can return false from the handler to prevent the form from actually being submitted:

<form action = "search.cgi" onsubmit="if (this.elements[0].value.length == 0) return false; ">

<input type = "text"></form>

Event Handlers and the this Keyword

• When your event handler is invoked, it is invoked as a method of the element on which the event occurred, so the this keyword refers to that target element:

<input type="button" value="press me" onclick = "callfunc(this);">

// the this keyword refers to the Button object.

The Pseudo-protocol & the void operator

• The pseudo-protocol (javascript:) in the href attribute of an <a> or <area> tag: the idea is that instead of requesting a document, the JS pseudo-protocol will instead execute one or more JS statements, which may or may not return a URL to the href.

• The void operator: tells the interpreter to evaluate an expression and return no value. void (expression) or void expression NOTE: void is an operator, not a function, where expression is an expression to be

evaluated. Parentheses are optional.

• You want to make certain that a statement called via the pseudo-protocol does not return a value and provoke the link to load a new document indicated by the returned value. The void operator will ensure that no value is returned to the hypertext link at all.

Intrinsic Event AttributesEvent Intrinsic Event Attribute

Load onLoad (associated with windows, images)

Unload onUnload (associated only with windows)

Click onClick (associated with any elements)

MouseOver onMouseOver (associated with any elements)

MouseOut onMouseOut (associated with any elements)

Focus onFocus (associated with windows, frames, links, and form elements)

Blur onBlur (associated with windows, frames, links, and form elements)

Submit onSubmit (associated with forms)

Reset onReset (associated with forms)

Select onSelect (associated with text boxes, password, text areas)

Change onChange (associated with text boxes, text areas, password, file uploads, select lists)

Event – onload sample<html><head>

<script language= "JavaScript" type="text/javascript">function mymessage(){alert("This message was triggered from the onload event");}</script></head>

<body onload="mymessage()"></body>

</html>

Event – onunload sample<html><head><script type="text/javascript">function mymessage(){alert("This message was triggered from the onunload event");}</script></head><body onunload="mymessage()">

<p>An alert box will display a message when you close this document!</p></body></html>

Event – onchange sample<html><head><script type="text/javascript">function preferedBrowser(){prefer=document.forms[0].browsers.value;alert("You prefer browsing internet with " + prefer);}</script></head><body><form>Choose which browser you prefer:<select id="browsers" onchange="preferedBrowser()"><option value="Internet Explorer">Internet Explorer<option value="Netscape">Netscape</select></form></body></html>

Event – onsubmit sample<html><head><script type="text/javascript">function confirmInput(){fname=document.forms[0].fname.value;alert("Hello " + fname + "! You will now be redirected to www.ccsf.edu");}</script></head><body><form onsubmit="confirmInput()" action="http://www.ccsf.edu/">Enter your name: <input id="fname" type="text" size="20"><input type="submit"></form></body></html>

Event – onblur sample<html><head><script type="text/javascript">function message(){alert("This alert box was triggered by the onblur event handler");}</script></head><body><p>The onblur event occurs when an element loses focus. Try to click or write in the input

field below, then click elsewhere in the document so the input field loses focus.</p><form>Enter your name: <input type="text" onblur="message()" size="20"></form></body></html>

Event – onfocus sample<html><head><script type="text/javascript">function message(){alert("This alert box was triggered by the onfocus event handler");}</script></head><body><form>Enter your name: <input type="text" onfocus="message()" size="20"></form></body></html>

Event – onmouseover & onmouseout sample

<html><body>

<h1 onmouseover="style.color='red'"onmouseout="style.color='black'">Mouse over this text</h1>

</body></html>

Event – onclick sample<html><head><script type="text/javascript">function disp_func() {

Alert(“This alert box was triggered by the onclick event handler”);}</script></head>

<body><input type=“button” value=click to display message” onclick=“disp_func();”>

</body></html>

Event – onmousemove sample<html><head><script type="text/javascript">var i=1;function moveright(){document.getElementById('header').style.position="relative";document.getElementById('header').style.left=i;i++;}</script></head><body onmousemove="moveright()"><h1 id="header">Move the mouse over this page</h1></body></html>

In-class sample 0• <html>• <head><title>Events</title>• <script language="JavaScript" type="text/javascript">• function callHandler(str) {

• }• </script>• </head>• <body>• <h1>Event and Event Handler</h1>• <p>Move the mouse to this text and see. • Then move the mouse out of the text and see!!</p>• <a href="">Click Here</a>• <br>• <form action="" method="post">• Text Box: <input type="text">• <br>• <input type="submit">• <input type="reset">• </form>• </body>• </html>

In-class sample 1<html><head><title>Events</title><script language="JavaScript" type="text/javascript">function callHandler(str) {alert(str);}</script></head><body onLoad="callHandler('Welcome!')" onUnload="callHandler('c ya!')"><h1>Event and Event Handler</h1><p onMouseOver="callHandler('Mouse is on top of this text')" onMouseOut="callHandler('Mouse is away from this text')">Move the mouse to this text and see. Then move the mouse out of the text and see!!</p><a href="javascript: callHandler('Ouch!')">Click Here</a><br><form action="" method="post" onSubmit="callHandler('Form submitted! Thank you!')"onReset="callHandler('Reset event'); return confirm('Are you sure to reset?')">Text Box: <input type="text" onFocus="callHandler('Focus to text box')" onBlur="callHandler('Text box lost focus')" onChange="call Handler('Text box changes data!')"onSelect="callHandler('Selected some text in text box')"><br><input type="submit"><input type="reset"></form></body></html>

CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.

Documents

Transcript of CNIT 133 Interactive Web Pags – JavaScript and AJAX Event and Event Handling.