JavaScript Events

_*INTRODUCTION AND UNDERSTANDING JAVASCRIPT
*_Hello friends. This time, according to the title, we will discuss Events in Javascript. Do you know what an event is? An event is something the user does that triggers the nets of code. Surely my friend is still confused by this understanding. I will explain again bye, Suppose we have a button on a website or application that we build. And we want to give an action when the button is clicked. So the event here is an "event". For example, when the button is clicked it will display a sentence. So the event is a click. The following events are contained in javascript.

Mouse events:
Event Performed Event Handler Description
click onclick When mouse click on an element
mouseover onmouseover When the cursor of the mouse
comes over the element
mouseout onmouseout When the cursor of the mouse
leaves an element
mousedown onmousedown When the mouse button is
pressed over the element
mouseup onmouseup When the mouse button is
released over the element
mousemove onmousemove When the mouse movement
takes place.

Keyboard events:
These event types belongs to the KeyboardEvent Object:

Event Description
onkeydown The event occurs when the user is pressing a key
onkeypress The event occurs when the user presses a key
onkeyup The event occurs when the user releases a key

Form events:

Event Performed Event Handler Description
focus onfocus When the user focuses on an element
submit onsubmit When the user submits the form
blur onblur When the focus is away
from a form element
change onchange When the user modifies or
changes the value of a form element

HOW TO MAKE A JAVASCRIPT EVENT
To create an event with javascript, we can add attributes with the event names above, to the html element that we want to give an event for example.

JavaScript events can be defined as something the user does in a website or browser. This can be a multitude of different things such as clicking a button, closing the browser, hovering over an element on the browser, etc.

onChange Event :

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Document</title>
        <script>

            function msg(x){
                document.bgColor=x;
            }

        </script>
    </head>
    <body>

        <select onchange="msg(this.value)">
            <option value="">Select Color</option>
            <option value="Red">Red</option>
            <option value="green">Green</option>
            <option value="blue">Blue</option>
        </select>

    </body>
</html>

onChange, Event With DOM :

<html lang="en">    
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>    
<body>

    <select id="selCourse" onchange="msg()">
        <option>React JS</option>
        <option>JavaScript</option>
        <option>Node JS</option>
        <option>Angular</option>
    </select>

    <script>
        function msg() {
            // alert("hi..")
            var txt = document.getElementById('selCourse').value;
            alert(txt);
        }
    </script>

</body>    
</html>

onSubmit Event :

<!DOCTYPE html>
<html lang="en">
    <head>
        <title>Document</title>
        <script>

            function msg(){
              alert("form submited")
            }

        </script>
    </head>
    <body>

       <form onsubmit="msg()">
         <button>
            Submit
         </button>
       </form>

    </body>
</html>

*onSubmit Event, DOM :: *

<!DOCTYPE html>

Document

    <form onsubmit="msg(event)" id="form">
        <input type="text" id="username">
        <input type="password" id="password">
        <button>submit</button>
    </form>

    <script>

        function msg(e){
            e.preventDefault()
            alert("form submited..")

            var username = document.getElementById('username').value
            var pass = document.getElementById('password').value

            console.log(username);
            console.log(pass)            
        }

    </script>

</body>
</html>

details https://codeguruva.blogspot.com/

Blog

MBabu

Join Our Newsletter. No Spam, Only the good stuff.

Related