js | Event Handling 1|

This content originally appeared on DEV Community and was authored by Ranjith Jr

Event Handling :

Html:

 < !DOCTYPE html>
<html lang="en">
<head>
<meta charset ="UTF-8" / >
<meta http-equiv="X-UA-Compatib1e" content="IE=edge" / >
<meta name="viewport" content="width=device-width, initial-scale=l.e"
< link rel="icon" / >
< link rel="stylesheet" href="index.css" / >
<title>< Bootcamp</title>
</head>

< bodY>

<div class="main">

   <button Id ="button">CIick Me! < / button>

</div>

<script src=" ./index.js"></script>

</html>

const button = document.getElementBtid("button");  //select id
console.log(button);

output:

<button id="button">  <button>

click Event:

                        //event?
button.addEventListener('click', ( ) =>{      //add event
                               //anomoys function 

 // console.log('button clicked');             

   alert('button clicked');    //pop up

});

Mouse Events:

                          //event?
button.addEventListener('mouseover', ( ) =>{      //add  hover event
                          //mouse

  button.classList.add("buttonHover");            // styles  implement to jscript
                        // css style name

});

mouseout Event

                           // event?
  button.addEventListener('mouseout', ( ) =>{      //remove hover event

      button.classList.remove("buttonHover");
                            // css style name


});

keydown Event

                          //event?     //argument 
document.addEventListener('keydown', ( event ) =>{      //keyboard event    // key press panna displaylaa show aagum.

                      // enter key (key board)
       if (event.key === 'Enter'){       // enter aluthum poothu

       alert('Enter Key is Pressed!');    // display pop up on window

});

keypress Events:

                            //event?     //argument 
document.addEventListener('keypress', ( event ) =>{      //keyboard event    // key press panna displaylaa show aagum.

                      // enter key (key board)
       if (event.key === 'Enter'){              // enter aluthunaathi mudichi apram trigger agum

       alert('Enter Key is Pressed!');    // display pop up on window

});

keyup Events:

                          //event?     //argument 
document.addEventListener('keyup', ( event ) =>{      //keyboard event    // key press panna displaylaa show aagum.

                      // enter key (key board)
       if (event.key === 'Enter'){                     //key aluthittu release pannni mela vaarumpothu show aaum

       alert('Enter Key is Pressed!');    // display pop up on window

});

Shift Events:

                            //event?     //argument 
document.addEventListener('keydown', ( event ) =>{      //keyboard event    // key press panna displaylaa show aagum.

                      // enter key (key board)
       if (event.shiftkey){               // shift key pressed

       alert('shift Key is Pressed!');    // display pop up on window

});

Ctrl Events:

                          //event?     //argument 
document.addEventListener('keydown', ( event ) =>{      //keyboard event    // key press panna displaylaa show aagum.
                                      //anomoys function 


    // enter key (key board)
if (event.ctrlkey){                       // shift key pressed

    alert('ctrl Key is Pressed!');       // display pop up on window

});

Alphabets Events:

                              //event?     //argument 
//document.addEventListener('keydown', ( event ) =>{      //keyboard event    // key press panna displaylaa show aagum.


       if (event.key => 'a' && event.key <= 'z'){               //  enter alphabets key pressed

       alert('alphabets Key ' ${ event.key}' pressed!');    // display pop up on window

});

Number Events:


       if (event.key => '0' && event.key <= '9'){               //  enter number key pressed

       alert('alphabets Key ' ${ event.key}' pressed!');    // display pop up on window

});

This content originally appeared on DEV Community and was authored by Ranjith Jr

Print Share Comment Cite Upload Translate Updates

APA

Ranjith Jr | Sciencx (2024-09-05T16:25:05+00:00) js | Event Handling 1|. Retrieved from https://www.scien.cx/2024/09/05/js-event-handling-1/

MLA

" » js | Event Handling 1|." Ranjith Jr | Sciencx - Thursday September 5, 2024, https://www.scien.cx/2024/09/05/js-event-handling-1/

HARVARD

Ranjith Jr | Sciencx Thursday September 5, 2024 » js | Event Handling 1|., viewed ,<https://www.scien.cx/2024/09/05/js-event-handling-1/>

VANCOUVER

Ranjith Jr | Sciencx - » js | Event Handling 1|. [Internet]. [Accessed ]. Available from: https://www.scien.cx/2024/09/05/js-event-handling-1/

CHICAGO

" » js | Event Handling 1|." Ranjith Jr | Sciencx - Accessed . https://www.scien.cx/2024/09/05/js-event-handling-1/

IEEE

" » js | Event Handling 1|." Ranjith Jr | Sciencx [Online]. Available: https://www.scien.cx/2024/09/05/js-event-handling-1/. [Accessed: ]

rf:citation

Please log in to upload a file.

There are no updates yet.
Click the Upload button above to add an update.

You must be logged in to translate posts. Please log in or register.

Related Posts