Labels

php (34) javascript (30) phpjavascript (29) jquery (23) html (19) mysql (14) database (9) codeigniter (4) json (4) bar chart (2) calendar (2) column chart (2) framework (2) google maps (2) query (2) tables (2) url (2) dropdown (1)

Wednesday, January 31, 2018

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.
Here we will see some examples, here I am explained few examples only.

1.Onclick Event:
It is the most frequently used event type, you just click the button then it shows the output. 
<html>

<head>
    <script type="text/javascript">
function SayHello() {
alert("Hello World");
        }
    </script>
</head>

<body>

<p>Click me then see the result</p>

<label>
    <input type="button" onclick="SayHello()" value="SayHello"/>
</label>

<label>
    <button type="button" onclick="this.innerHTML=Date()">
        Time
    </button>
</label>

</body>

</html>
Output:
                                                                          

2.Onload:
Execute a javascript immediately after a page has been loaded

<html>

<head>
    <script>
function load() {
alert("Click ok I will show output");
        }
    </script>
</head>

<body onload="load()">
<h1>Hello Viewer</h1>
</body>

</html>
output:

3.Ondblclick:
Execute a
javascript when an element is double clicked 

<!DOCTYPE html>

<html>

<head>
    <script>
        function myFunction() {
            document.getElementById("demo").innerHTML =
                "This is the example for double click event";
        }
    </script>
</head>

<body>
<p ondblclick="myFunction()">
    <button>Click Me Double</button>
</p>
<p id="demo"></p>
</body>

</html>

output:

4.Onmouseover & Onmouseout:

<!DOCTYPE html>

<html>

<head>
    <script>
        function over(x) {
            x.style.color='red'; }
        function out(x) {
            x.style.color='green';
        }
    </script>
</head>

<body>
<div onmouseover="over(this)" onmouseout="out(this)">
    <h1> Hai Visitor </h1>
</div>
</body>

</html>

Output:

Onmouseover output:                            Onmouseout output:





5. Onkeypress: 

Key press event is fired when a key that produce a character value is pressed down.

<!DOCTYPE html>

<html>

<head>
    <script>
        function press() {
            alert("You Pressed A Key Inside The Input Box");
        }
        
        function out(x) {
            x.style.color='green';
        }
    </script>
</head>

<body>
<p>If you have to press any key in text box then it shows the alert</p>
<input type="text" onkeypress="press()">
</body>

</html>
output:


No comments:

Post a Comment

More Posts

FOLLOW