Labels

php (35) javascript (31) phpjavascript (30) jquery (23) html (20) 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:


10 comments:

  1. Hello There. I discovered your post using msn. This is an extremely well written article. I’ll make sure to bookmark it and return to read more of your useful information. Thanks for the post. I’ll certainly comeback. marketing agencies in singapore

    ReplyDelete
  2. I am essentially satisfied together with your great work.You put truly extremely supportive data. Keep it up. Continue blogging. Hoping to perusing your next post
    van singapore

    ReplyDelete
  3. It's a shame you don't have a donate button! I'd most certainly donate to this superb blog! I suppose for now i'll settle for bookmarking and adding your RSS feed to my Google account. I look forward to brand new updates and will share this blog with my Facebook group. Chat soon!search engine company

    ReplyDelete
  4. Thank you very much for your valuable information. Digital Signature Certificate

    ReplyDelete
  5. Thanks for sharing the relevant information with us…It are good for us. Digital Signature Certificate

    ReplyDelete
  6. Thanks For Sharing This, Very Interesting And Helpful Support Provide By this blog. Class 2 Digital Signature Certificate

    ReplyDelete
  7. I really appreciate this wonderful post that you have provided for us. I assure this would be beneficial for most of the people. Apply Class 3 Digital Signature Certificate

    ReplyDelete
  8. Thanks For Sharing This, Very Interesting And Helpful Support Provide By this blog. Class 2 Digital Signature Certificate

    ReplyDelete
  9. I highly admire your post. Thanks for sharing such wonderful information, I see your post very often and share them on all social media channels.
    Digital Signature Certificate in Delhi

    ReplyDelete

More Posts

FOLLOW