DAY - 10
JavaScript - Events
Ø JavaScript's interaction with HTML is handled through
events that occur when the user or the browser manipulates a page.
Ø When the page loads, it is called an event. When the
user clicks a button, that click too is an event. Other examples include events
like pressing any key, closing a window, resizing a window, etc.
Ø Developers can use these events to execute JavaScript
coded responses, which cause buttons to close windows, messages to be displayed
to users, data to be validated, and virtually any other type of response
imaginable.
Ø Events are a part of the Document Object Model (DOM)
Level 3 and every HTML element contains a set of events which can trigger
JavaScript Code.
Ø Few examples to understand a relation between Event
and JavaScript −
Onclick Event
Ø This is the most frequently used event type which
occurs when a user clicks the left button of his mouse.
Ø You can put your validation, warning etc., against
this event type.
Ø Example
<html>
<head>
<scripttype="text/javascript">
<!--
functionsayHello(){
alert("Hello World")
}
//-->
</script>
</head>
<body>
<p>Click the following
button and see result</p>
<form>
<input type="button"onclick="sayHello()"value="Say Hello"/>
</form>
</body>
</html>
onmouseover and onmouseout
Ø These two event types will help you create nice
effects with images or even with text as well.
Ø The onmouseover event
triggers when you bring your mouse over any element and the onmouseout triggers when you move
your mouse out from that element.
Ø For example:
<html>
<head>
<script type="text/javascript">
<!--
function over(){
document.write("Mouse Over");
}
function out(){
document.write("Mouse Out");
}
//-->
</script>
</head>
<body>
<p>Bring your mouse inside
the division to see the result:</p>
<divonmouseover="over()"onmouseout="out()">
<h2>This is inside the
division </h2>
</div>
</body>
</html>
No comments:
Post a Comment
Give your valuable feedback