JavaScript event handler
JavaScript
event handler or an event listener is used when an event occur, you can use an
event handler to perform specific task or set of tasks. By convention, the
names for event handlers always begin with the word "on", so an event handler for the click event is called
onclick, onload, onblur, and so on.
There are several ways to
assign an event handler. The simplest way is to add them directly to the start
tag of the HTML elements using the special event-handler attributes.
Onclick:
For
example, to assign a click handler for a button element, we can use
onclick attribute, like this:
<html >
<head>
<title>JavaScript
Attaching Event Handlers Inline</title>
</head>
<body>
<button
type="button" onclick="alert('Hello World!')">Click
Me</button>
</body>
</html> Onmouseover and Onmouseout effects
The mouseover event occurs when a user moves the mouse pointer over an
element.
The mouseout event occurs when a user moves the mouse pointer from an element.
You can handle the mouseover event with the onmouseover and the mouseout event with the onmouseout event
handler. For Example:
<html lang="en">
<head>
<title>Document</title>
<script type="text/javascript">
function newImg(){
document.getElementById("img1").src="library.jpg"
}
function oldImg(){
document.getElementById("img1").src="f4.jpg"
}
</script>
</head>
<body>
<img id="img1" src="f4.jpg" width="300px" onmouseover="newImg()" onmouseout="oldImg()">
</body>
</html>
Key event:onkeypress()
The
keypress event occurs when a user presses down a key on the keyboard that has a
character value associated with it. For example, keys like Ctrl, Shift, Alt,
Esc, Arrow keys, etc. will not generate a keypress event, but will generate a
keydown and keyup event.
You
can handle the keypress event with the onkeypress event handler. The
following example will show you an alert message when the keypress event
occurs.
<!DOCTYPE
html>
<html
lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the
Keypress Event</title>
</head>
<body>
<input type="text"
onkeypress="alert('You have pressed a key inside text input!')">
<hr>
<textarea cols="30"
onkeypress="alert('You have pressed a key inside
textarea!')"></textarea>
<p><strong>Note:</strong>
Try to enter some text inside input box and textarea.</p>
</body>
</html>
Submit Event :onsubmit()
The submit
event only occurs when the user submits a form on a web page.
You can
handle the submit event with the
onsubmit event handler. The following
example will show you an alert message while submitting the form to the server.
<html
lang="en">
<head>
<meta charset="utf-8">
<title>JavaScript Handling the Submit
Event</title>
</head>
<body>
<form
action="/examples/html/action.php" method="post"
onsubmit="alert('Form data will be submitted to the server!');">
<label>First Name:</label>
<input type="text"
name="first-name" required>
<input type="submit"
value="Submit">
</form>
</body>
</html>
0 Comments