JavaScript Events
Published: 2023-12-13 11:37:37

_**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>
    <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>

        <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/