DHTML - Events & Buttons

Web technology
Active Learning Assessment
Submitted By:
Deep Patel
130410107064
TY CE II
B Batch

DHTML: Events & Buttons
Active Learning Assessment

What is DHTML?
• DHTML is NOT a language.
• DHTML is a TERM describing the art of making dynamic and
interactive web pages.
• DHTML combines HTML, JavaScript, the HTML DOM, and CSS.
• According to the World Wide Web Consortium (W3C):
"Dynamic HTML is a term used by some vendors to describe the
combination of HTML, style sheets and scripts that allows documents
to be animated."

Events & Buttons
• Events are the actions that the user performs when they visit your
page.
• They may, for example move the mouse around or click on buttons.
• When an event happens it triggers objects that are associated with
that kind of event.
• Event Handlers catch these events and execute code in response.

• Events can be classified into 4 categories for ease of understanding:
1. Window Events
2. Mouse Events
3. Keyboard Events
4. Form Events

Window Events
• The Window itself has its own events, which trigger when a new page
is starting up (onLoad), shutting down (onUnload),being resized
(onResize), moved (onMove), canceled (onAbort) or when an error
occurs (onError).
• There is also an event triggered when the window moves to
foreground (onFocus) or changes to background (onBlur).

Mouse Events
• The mouse has a few events associated with it when a button is
pressed (onMousedown) on top of an element and when it is
released (onMouseup);
• When the mouse moves and the pointer is already over an element
(onMousemove) and when it moves away from the element
(onMouseout).
• Events are triggered also when the pointer is over an element
(onMouseover) and when it is clicked once (onClick) or twice
(onDblclick).

Keyboard Events
• Events can be triggered when the key is pressed down (onKeydown)
and when it is released (onKeyup).
• The complete key sequence, down press and up release, triggers
another event (onKeypress).

Form Events
• Events can be triggered when the reset button on the form is clicked
(onReset) or when the submit button is clicked (onSubmit).
• Even when a content is selected on a page (onSelect) event is
generated.

Events
Event When does it happen?
onabort Visitor aborts page loading
onblur Visitor leaves an object
onchange Visitor changes the value of an object
onclick Visitor clicks on an object
ondblclick Visitor double clicks on an object
onfocus Visitor makes an object active
onkeydown Key is being pressed down
onkeypress Key is pressed
onkeyup Key is being released

onload Page has finished loading
onmousedown User presses a mouse button
onmousemove Cursor moves on an object
onmouseout Cursor moves off an object
onmouseover Cursor moves over an object
onmouseup Visitor releases a mouse button
onreset Visitor resets a form
onselect Visitor selects a content on a page
onsubmit Visitor submits a form
onunload Visitor closes a page

Using Events
• Each of the events can be used to trigger scripts to run. Below
mentioned script shows how it is possible to trap the exiting of the
user from a page.
<html>
<head>
<meta http-equiv=“Content-Type” content=“text/html; charset=iso-8859-1”>
</script>
</head>
<body onUnload=“alert(‘Bye, see you again!’)”>
<h1>Hello!</h1>
</body>
</html>

Using a Mouse click & Button for events
• This script uses the button to trigger a function that will output "Hello World" in a
p element with id=“demo’.
<html>
<body>
<button onclick="myFunction()">Click me</button>
<p id="demo"></p>
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "Hello World";
}
</script>
</body>
</html>

Using Mouse over and Mouse out
• The event of mouse passing into and out of an element is captured.
<html>
<body bgcolor=“green”>
<h1 onmouseover=“style.color=‘yellow’"
onmouseout="style.color=‘black’”>Hover here!</h1>
</body>
</html>

More Mouse Events
<html>
<body>
<p id="p1" onmousedown="mouseDown()" onmouseup="mouseUp()">Click the text! </p>
<script>
function mouseDown() {
document.getElementById("p1").style.color = "red";
}
function mouseUp() {
document.getElementById("p1").style.color = "green";
}
</script>
</body>
</html>

Using Keyboard events
• A function is triggered when the user is pressing a key in
the input field.
<html>
<body>
<input type="text" onkeypress="myFunction()">
<script>
alert("You pressed a key inside the input field");
}
</script>
</body>
</html>

Using Form Events
• When you submit the form, a function is triggered which alerts some text.
<html>
<body>
<form onsubmit="myFunction()">
Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>
alert("The form was submitted");
}
</script>
</body>
</html>

Thank You!
Bibliography
• http://www.w3schools.com/tags/ref_eventattributes.asp
• Developing Web Applications – Ralph Moseley

DHTML - Events & Buttons

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (20)

Similar to DHTML - Events & Buttons

Similar to DHTML - Events & Buttons (20)

Recently uploaded

Recently uploaded (20)

DHTML - Events & Buttons