JavaScript Event

Event
Description
onchange
An HTML element has been changed
onclick
The user clicks an HTML element
onmouseover
The user moves the mouse over an HTML element
onmouseout
The user moves the mouse away from an HTML element
onkeydown
The user pushes a keyboard key
onload
The browser has finished loading the page
JavaScript   Event:

(1)Example 1  onclick  event  save onclick.html:
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>

<button onclick="displayDate()">The time is?</button>

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>
(2)Example 2  on  onload  Event  save  file onload.html:
<!DOCTYPE html>
<html>
<body  onload="displayDate()">

<p>Click the button to display the date.</p>


<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>


(3)Example 3  onmouseover  save file as  onmouseover.html:
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>

<button onmouseover="displayDate()">The time is?</button>

<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

(4)Example  4  on  onchange  event  SAVE file onchange.html:
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>
<select name=city  onchange="displayDate()">
<option value=mumbai> Mumbai</option>
<option value=delhi>Delhi</option>
</select>



<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>

(5)Example 5   onkeydown   event save file as onkeydown.html:
<!DOCTYPE html>
<html>
<body>

<p>Click the button to display the date.</p>
<input type=text name=name  onkeydown="displayDate()">




<script>
function displayDate() {
    document.getElementById("demo").innerHTML = Date();
}
</script>

<p id="demo"></p>

</body>
</html>
Previous
Next Post »