JavaScript Events

JavaScript Events

July 31, 2021

 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 PerformedEvent HandlerDescription
    clickonclickWhen mouse click on an element
    mouseoveronmouseoverWhen the cursor of the mouse
    comes over the element
    mouseoutonmouseoutWhen the cursor of the mouse
    leaves an element
    mousedownonmousedownWhen the mouse button is
    pressed over the element
    mouseuponmouseupWhen the mouse button is
    released over the element
    mousemoveonmousemoveWhen the mouse movement
    takes place.


Keyboard events:

  • These event types belongs to the KeyboardEvent Object:

    EventDescription
    onkeydownThe event occurs when the user is pressing a key
    onkeypressThe event occurs when the user presses a key
    onkeyupThe event occurs when the user releases a key


Form events:

  • Event PerformedEvent HandlerDescription
    focusonfocusWhen the user focuses on an element
    submitonsubmitWhen the user submits the form
    bluronblurWhen the focus is away
    from a form element
    changeonchangeWhen 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>