Scribd
Upload
8 views

06 HTML Events

Uploaded by

zoom1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
8 views

06 HTML Events

Uploaded by

zoom1
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 3

HTML Event

Dynamic HTML allows to create really interactive web-pages. It becomes possible using events in
HTML. HTML can process events from keyboard and mouse, and also some specific events, for
example, occurring where form's data was changed. For processing of events data you may use
JavaScript or VBScript.

All HTML events are listed in table below.

List of keyboard events

onkeydown Occurs when a key is pressed

onkeypress Occurs when the key is pressed and released

onkeyup Occurs when the key is released

onhelp Occurs when the F1 key if pressed

List of mouse events

onmousedown Occurs where mouse button is pressed.

onmousemove Occurs where mouse points moves above an element.

onmouseup Occurs where mouse button is released.

onmouseout Occurs when mouse pointer moves out of an element

onclick Occurs on a mouse click

ondblclick Occurs on a mouse double click

List of focus events

onfocus Occurs where element get a focus

onblur Occurs where element lost a focus

List of other tag-specific events

onabort Occurs if loading of picture is aborted. this event occurs only in <img> tag.

Occurs on error of loading picture (for example, if file not found). this event occurs
onerror
only in <img> tag.

Occurs where content of object is changes. Occurs in checkboxes, radioboxes,


onchange
passwordboxes, textboxes.

onload Occurs where page loading is complete. Uses in <body> tag.

Occurs where a fragment of text was selected. Uses in text <input> elements: text,
onselect
password, textarea.

onsubmit Occurs before form data will submitted.


Examples
<input type="button" name="test" value="Click here"
onclick="alert('Click!');">

This simple example shows a basic use of HTML events. If you click on the button, alert message with
text "Click!" will be appears.
<form name="form_test">
<table>
<tr>
<td>Please enter text here:</td>
<td><input type="text" name="entertext"
onkeyup="form_test.readtext.setAttribute('value', form_test.entertext.value.length);"
></td>
</tr>
<tr>
<td>The length of your text is:</td>
<td><input type="text" name="readtext" value="" size="4" readonly></td>
</tr>
</table>
</form>

Please enter text here:

The length of your text is:

In this more complex example you may enter some text in top textbox. Quantity of symbols you has
been entered will appear in bottom textbox.

<!DOCTYPE html>
<html>
<body>
<p>When you submit the form, a function is triggered which alerts some text.</p>

<form action="demo_form.asp" onsubmit="myFunction()">


Enter name: <input type="text" name="fname">
<input type="submit" value="Submit">
</form>
<script>

function myFunction() {
alert("The form was submitted");
}
</script>
</body>
</html>

Result:When you submit the form, a function is triggered which alerts some text.
Submit
Enter name:
<!DOCTYPE html>
<html>
<body>

<p>A function is triggered when one of the input fields get focus. The function changes the background-
color of the input field.</p>
First name: <input type="text" id="fname" onfocus="myFunction(this.id)"><br>
Last name: <input type="text" id="lname" onfocus="myFunction(this.id)">

<script>
function myFunction(x) {
document.getElementById(x).style.background = "yellow";
}
</script>
</body>
</html>
Result:

A function is triggered when one of the input fields get focus. The function changes
the background-color of the input field.
First name:
Last name:

You might also like