Skip to main content

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>

Comments

  1. Great post share by you thanks...

    Etoile Info Solutions is a known and famous Web Development Company in Phoenix Arizona. Their experienced staff members are capable of processing innovative and creative technologies to improve their business online. They are proficient in providing effective and result driven search engine optimization solutions to improve your business visibility among the audience.

    ReplyDelete

Post a Comment

Popular posts from this blog

layout code example:-

<!DOCTYPE html> <html lang="en"> <head>   <title>Bootstrap Example</title>   <meta charset="utf-8">   <meta name="viewport" content="width=device-width, initial-scale=1">   <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>   <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"></script> </head> <body>  <section>       <div class="container">         <header>           <h3  class="text-center">Services</h3>           <p class="text-center">Laudem latine pe

Jquery Sliding

jQuery Sliding Methods:-  With jQuery you can create a sliding effect on elements. jQuery has the following slide methods: slideDown() slideUp() slideToggle() (1)slideDown()  example:- <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("#flip").click(function(){     $("#panel").slideDown("slow");   }); }); </script> <style> #panel, #flip {   padding: 5px;   text-align: center;   background-color: #e5eecc;   border: solid 1px #c3c3c3; } #panel {   padding: 50px;   display: none; } </style> </head> <body> <div id="flip">Click to slide down panel</div> <div id="panel">Hello world!</div> </body> </html> (2)sldeUP()  example:- <html> <head> <script src="https://ajax.

Juqery fade

jQuery Fading Methods :-  With jQuery you can fade an element in and out of visibility. jQuery has the following fade methods: fadeIn() fadeOut() fadeToggle() fadeTo() jQuery fadeIn() Method The jQuery fadeIn() method is used to fade in a hidden element. Syntax:- $(selector).fadeIn(speed,callback); <html> <head> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script> <script> $(document).ready(function(){   $("button").click(function(){     $("#div1").fadeIn();     $("#div2").fadeIn("slow");     $("#div3").fadeIn(3000);   }); }); </script> </head> <body> <p>Demonstrate fadeIn() with different parameters.</p> <button>Click to fade in boxes</button><br><br> <div id="div1" style="width:80px;height:80px;display:none;background-color:red;"></div><