unable to understand TOPIC=“JAVA script event part (2)” on online training .
Can anyone explain about it?
It’s about some of the events in JavaScript
1)onclick event: When you click on the paragraph or text, it will execute the onclick event. If we
consider the example in video, when we click the “default view” , it will executes the
commands in change_paragraph_text() function i.e the text changes to “New text”.
2) onload event: It occurs when an object(ex: webpage) has been loaded. If we take the example
when we load the page the onload event i.e change_paragraph_text function
executes.
3) onmouseover : It occurs when we move the mouse pointer over the text. In the example
when we move the mouse over the “default view” it changes in to “New text”.
4) onmouseout : It is opposite to onmouseover. When we move mouse pointer out of the text then
this event occurs .
5) onkeyup: It occurs when we release a key . In the example after the user presses the key(on a
keyboard) and release it, the key is displaying on the page.
There are many events like this in JavaScript. Hope this helps.
1 Like
First of all ‘Event’ is something that happens or change in something on user interaction
example: Clicking on the button, Hovering on text, etc.
Events explained in ‘JAVA script event part (2)’ are:
1)onload
it occurs when Webpage/Html document has finished loading
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function change_bgcolor()
{
document.getElementById("text").style.backgroundColor="yellow";
}
</script>
</head>
<body onload="change_bgcolor()">
<h4 id="text" style="background-color: Red;">This is a sentence with red color</h4>
</body>
</html>
notice that the background color should be red but its yellow because of onload() event it was changed when the page was completly loaded.
2)onmouseover
it occurs when you hover the mouse over HTML elements such as buttons, text, etc.
in simple words just take your mouse over the element and it will change according to your code.
3)onmouseout
it occurs when you move your mouse away from the HTML elements
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function change_text()
{
document.getElementById('text').innerHTML="it's saying Bye bye";
}
function original_text()
{
document.getElementById('text').innerHTML="This should say Hello";
}
</script>
</head>
<body>
<h4 id="text" onmouseover="change_text()" onmouseout="original_text()">This should say something</h4>
</body>
</html>
4)onkeyup
this event occurs when you press and RELEASE the key
<html>
<head>
<meta charset="utf-8">
<title></title>
<script type="text/javascript">
function change_text()
{
var val=document.getElementById("key");
val.value=val.value.toUpperCase();
}
</script>
</head>
<body>
<input type="text" id="key" onkeyup="change_text()">
</body>
</html>
notice here that we type in lower case but on realesing the key it gets converted into uppercase using onkeyup event.
I have also attached some Snapshots with this, hope it helps you
and if it does do mark the doubt as solved
2 Likes
best explanation Sir . It helps a lot…THANKYOU 
1 Like