Most Popular Tutorials
Most Popular Tutorials :-

Simply Easy Learning at Your Fingertips. Click Tutorials Menu to view More Tutorial List





javascript events

What is Events?

  • when the user perfrom some action on html element is called events.
  • When the html page loads, it is called page load event.
  • When the user clicks on a button it is called click event.
  • when the user press any key on html elements that time events occus.

JavaScript HTML/DOM events

File name : index.php

JavaScript code is executed with HTML/DOM events. So before learning JavaScript, let’s have some idea about events.

Events :- Description
onclick :- occurs when element is clicked.
ondblclick :- occurs when element is double-clicked.
onfocus :- occurs when an element gets focus such as button, input, textarea etc.
onblur :- occurs when form looses the focus from an element.
onsubmit :- occurs when form is submitted.
onmouseover :- occurs when mouse is moved over an element.
onmouseout :- occurs when mouse is moved out from an element (after moved over).
onmousedown :- occurs when mouse button is pressed over an element.
onmouseup :- occurs when mouse is released from an element (after mouse is pressed).
onload :- occurs when document, object or frameset is loaded.
onunload :- occurs when body or frameset is unloaded.
onscroll :- occurs when document is scrolled.
onresized :- occurs when document is resized.
onreset :- occurs when form is reset.
onkeydown :- occurs when key is being pressed.
onkeypress :- occurs when user presses the key.
onkeyup :- occurs when key is released.

File name : index.php



Click Events.

  • onclick - When button is clicked
  • ondblclick - When a text is double-clicked

    • Click Events:onclick events occurs when a user clicks the left button of his mouse. The event is triggered when the html field is clicked on. This is especially useful for submit button, radio buttons and checkboxes.


    Examples :-

    When the user click on button to see result.

    File name : index.php

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "Hello JavaScript";
    }
    </script>
    </head>
    <body>

    <p>Click the button to see result.</p>

    <button onclick="myFunction()">Click me</button>

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

    </body>
    </html>

    Examples 2:-

    When the user click on button to show alert box.

    File name : index.php

    <html>
    <head>

    <script type="text/javascript">
    <!--
    function sayHello() {
    alert("Hello JavaScript")
    }
    //-->
    </script>

    </head>

    <body>
    <p>Click on hello js button and see alert message. </p>

    <form>
    <input type="button" onclick="sayHello()" value="Hello Js" />
    </form>

    </body>
    </html>

    Examples 3:-

    When the user click on button to show alert box.

    File name : index.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Click Event</title>
    </head>
    <body>
    <button type="button" onclick="alert('You have clicked a button!');">Click Me</button>
    <a href="#" onclick="alert('You have clicked a link!');">Click Me</a>
    </body>
    </html>

    Examples 3:-

    Double click events.

    File name : index.php

    <!DOCTYPE html>
    <html>
    <head>
    <script>
    function myFunction() {
    document.getElementById("demo").innerHTML = "Hello Mahtab";
    }
    </script>
    </head>
    <body>

    <p ondblclick="myFunction()">Doubleclick this paragraph to call js function.</p>

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

    </body>
    </html>

    The Contextmenu Event (oncontextmenu)

    The contextmenu event occurs when a user clicks the right mouse button on an element to open a context menu. You can handle a contextmenu event with an oncontextmenu event handler.

    File name : index.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Contextmenu Event</title>
    </head>
    <body>
    <button type="button" oncontextmenu="alert('You have right-clicked a button!');">Right Click on Me</button>
    <a href="#" oncontextmenu="alert('You have right-clicked a link!');">Right Click on Me</a>
    </body>
    </html>

    The Mouseover Event (onmouseover)

    The mouseover event occurs when a user moves the mouse pointer over an element.

    File name : index.php

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="utf-8">
    <title>JavaScript Handling the Mouseover Event</title>
    </head>
    <body>
    <button type="button" onmouseover="alert('You have placed mouse pointer over a button!');">Place Mouse Over Me</button>
    <a href="#" onmouseover="alert('You have placed mouse pointer over a link!');">Place Mouse Over Me</a>
    </body>
    </html>

    when a user changes the selected option of a <select> element that time Execute a JavaScript onchange event.

    File Name:- index.php

    <!DOCTYPE html>
    <html>
    <body>

    <p>Select a Name from the select box (Combobox).</p>

    <select id="myid" onchange="mychange()">
    <option value="Koeilwar">Koeilwar
    <option value="Ara">Ara
    <option value="Bhojpur">Bhojpur
    <option value="Buxer">Buxer
    <option value="Patna">Patna
    </select>

    <p>When you select a data from select option, a function is triggered which outputs the value of the selected option.</p>

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

    <script>
    function mychange() {
    var x = document.getElementById("myid").value;
    document.getElementById("demo").innerHTML = "You selected: " + x;
    }
    </script>

    </body>
    </html>


    File Name:- index.php

    <html>
    <head>
    <title>Onchange event example in JavaScript</title>
    <script language="Javascript">

    function selctcntry(evt, t) {
    if (t.selectedIndex > 0)
    document.getElementById("Text1").value = t.value;
    else
    document.getElementById("Text1").value = "";
    }

    </script>
    </head>
    <body>
    <table align="center">
    <tr>
    <td>
    <input type="text" id="Text1" />
    </td>
    </tr>
    <tr>
    <td>
    Select the country name from the dropdown
    </td>
    </tr>
    <tr>
    <td>
    <select onchange="selctcntry(event,this);">
    <option value="India">Select</option>
    <option value="India">India</option>
    <option value="USA">USA</option>
    <option value="China">China</option>
    <option value="Japan">Japan</option>
    <option value="Canada">Canada</option>
    </select>
    </td>
    </tr>
    </table>
    </body>
    </html>


    how to assign an "onchange" event to an input element.

    When you leave the input field, a function is triggered which transforms the input text to upper case.

    File Name:- index.php

    <!DOCTYPE html>
    <html>
    <body>

    Enter your name: <input type="text" id="fname" onchange="myFunction()">
    <script>
    function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
    }
    </script>

    </body>
    </html>

    /* ***************** OR ******************************** */
    <!DOCTYPE html>
    <html>
    <body>
    Enter your name: <input type="text" id="fname">
    <script>
    document.getElementById("fname").onchange = function() {myFunction()};

    function myFunction() {
    var x = document.getElementById("fname");
    x.value = x.value.toUpperCase();
    }
    </script>
    </body>
    </html>


    how to assign an "onchange" event to an input element.

    File Name:- index.php

    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    function OnSelectionChange (select) {
    var selectedOption = select.options[select.selectedIndex];
    alert ("The selected option is " + selectedOption.value);
    }
    </script>
    </head>
    <body>
    Select an item from the following list:<br />
    <select onchange="OnSelectionChange (this)">
    <option value="Apple" />Apple
    <option value="Pear" />Pear
    <option value="Peach" />Peach
    </select>
    </body>
    </html>


    How to pass parameters on onChange of html select

    File Name:- index.php

    function getComboA(sel) {
    var value = sel.value;
    }
    <select id="comboA" onchange="getComboA(this)">
    <option value="">Select combo</option>
    <option value="Value1">Text1</option>
    <option value="Value2">Text2</option>
    <option value="Value3">Text3</option>
    </select>
    /* ************** OR ******************* */
    <select id="yourid">
    <option value="Value 1">Text 1</option>
    <option value="Value 2">Text 2</option>
    </select>

    <script src="jquery.js"></script>
    <script>
    $('#yourid').change(function() {
    alert('The option with value ' + $(this).val() + ' and text ' + $(this).text() + ' was selected.');
    });
    </script>






    Previous Next


    Trending Tutorials


    PHP

    PHP

    100+ Tutorials
    oops

    PHP OOPs

    80+ Tutorial
    Codeigniter

    Codeigniter

    100+ Tutorial
    Laravel

    Laravel

    100+ Tutorials
    Node.js

    NODE.JS

    100+ Tutorials
    Javascript

    Javascript

    100+ Tutorials


    Review & Rating

    0.0 / 5

    0 Review

    5
    (0)

    4
    (0)

    3
    (0)

    2
    (0)

    1
    (0)

    Write Review Here


    Most Popular Tutorials

     Important Link