DEV Community

Ranjith srt
Ranjith srt

Posted on

js | Event Handling |

Event Handling 1 :

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>

Enter fullscreen mode Exit fullscreen mode

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

Enter fullscreen mode Exit fullscreen mode

output:


<button id="button">  <button>

Enter fullscreen mode Exit fullscreen mode

click Event:



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

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

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


});

Enter fullscreen mode Exit fullscreen mode

Mouse Events:

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

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

});

Enter fullscreen mode Exit fullscreen mode

mouseout Event


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

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


});


Enter fullscreen mode Exit fullscreen mode

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

});


Enter fullscreen mode Exit fullscreen mode

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

});


Enter fullscreen mode Exit fullscreen mode

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

});

Enter fullscreen mode Exit fullscreen mode

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

});


Enter fullscreen mode Exit fullscreen mode

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

});


Enter fullscreen mode Exit fullscreen mode

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

});

Enter fullscreen mode Exit fullscreen mode

Number Events:



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

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

});

Enter fullscreen mode Exit fullscreen mode

Event Handling 2 :

Input Events:



      // var name                         input -id name
const inputName = document.getElementById("name");

                                          //input -id name
const outputName = document.getElementById("name-output");

console,log (inputName);

                         //event?   //argument 
inputName.addEventListener('input', (  ) =>{      
                                    //anomoys function                    //r
                                                                          //a
                                                                          //ra

outputName.textContent = "Typed Name: ${ inputName.Value}"  // input ulla press pannA PANNA TIGGER aagum

});

Enter fullscreen mode Exit fullscreen mode

Change Event:

                drop down menu event
Enter fullscreen mode Exit fullscreen mode

      // var name                        // input -id name
const  carSelect = document.getElementById("car");

      //output id                      //input -id name
const selectCar = document.getElementById(" select-car");



                         //event?   //argument 
carSelect.addEventListener('change', (  ) =>{      
                                    //anomoys function 


   selectCar.textContent = "select Car : ${ carSelect .Value}"  //  select panna value vaa killa kattum  (shuow)


});


Enter fullscreen mode Exit fullscreen mode

Event Handling 3

form Event:



      // var name                             form -id name
const feedbackForm = document.getElementById("feedbackForm");

                                                                   // //select two element's 


       //another id                         //div -id name
const  responseDiv = document.getElementById("response ");


console,log (feedbackForm);


                              //event?             //argument 
feedbackForm.addEventListener('subnit', ( functin ( event ) =>{      
                                         //anomoys function                  
          //trigger event                                                                
event.preventDefault  (); // input ulla press pannA PANNA TIGGER aagum

feedbackForm.addEventListner("submit",  function ( event)){

event.preeventDefault();

    const formData = new FormData(this);

    console.log('formDats');    // ithu vara key value pair aa kaatum

    const formDataJson ={};         //json format converting

    formData.forEach((value,key ) => {

          formDataJson[ key ] = value;   // object formatt aa show aagum.

});

    console.log('formDataJson ');  

    const jsonString = JSON.stringif ( formDataJson, null ,2);  

    responseDiv.innerHTML = "<pre> $ { jsonString  } </pre>";   // ui laa string aa display aagum

    feedbackForm.rest();   // rest event

  });

Enter fullscreen mode Exit fullscreen mode

Event Handling 4

Window Event :


window.addEventListner ("resize", ( ) =>{

  const dimensions = " window dimensions: ${window.innerWidth}px x ${window.innerHeihjt}px';
  document.getElementById (" dimensions").textContent = dimensions ;

});

Enter fullscreen mode Exit fullscreen mode

load Events:


window.addEventListner("load", ( ) =>{

     console.log('window loaded');  
});                    

Enter fullscreen mode Exit fullscreen mode

Scroll Events:


window.addEventListner("scroll", ( ) =>{

     console.log('window scrolled');  
});                    


Enter fullscreen mode Exit fullscreen mode

Top comments (0)