What is Event In Java Script

Hello friends today i am sharing with you Event in Java Script.

<!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>Js Document</title>

   <style>
      * {
         margin: 0;
         padding: 0;
         box-sizing: content-box;
      }
   </style>
</head>

<body>

   <p id="pTag">Lorem ipsum dolor sit amet consectetur adipisicing elit. Fuga ut iusto numquam voluptatem nisi qui, ex,
      exercitationem eaque, pariatur est ratione? Saepe magni dignissimos perferendis necessitatibus numquam quo ut
      earum?</p>

   <div class="container">
      <h1>JS</h1>
   </div>


   <div id="paraDiv">
      <p>Para Div Lorem ipsum dolor sit amet consectetur adipisicing elit. Cumque et voluptas repudiandae ut
         consequuntur ex, eum
         aperiam nisi. Eligendi quo delectus quia quos molestias neque dicta voluptatibus illum minus laudantium!</p>
   </div>
   <p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Autem deleniti voluptate exercitationem esse cumque
      tenetur, animi neque velit, voluptatem accusamus quasi! Totam doloribus, libero est assumenda reiciendis
      inventore! Soluta, velit?</p>
   <div id="">Time Check Here <span id="eventDemo"></span></div>
   <button onclick="document.getElementById('eventDemo').innerHTML = Date()">ON Click</button>

   <input type="text" id="reverseName" onkeyup="reverseString()" />
   <input type="text" id="showData" />

   <button type="text" onclick="myfun()">Click</button>
   <div class="container">
      <form name="form" onsubmit="return validation()">
         <input type="text" id="user" value=""><span id="userName"></span><br>
         <input type="text" id="password" value=""><span id="passWord"></span><br>
         <input type="submit" value="Submit" />
      </form>
   </div>
   <script>
      //  Let start event in java script
      let r = 8;
      document.getElementById('pTag').addEventListener('click', function (e) {
         console.log("Hello friends aapne yaha click kiya ha" + 5, e.target);
         alert("aap kya chahte ho");
         document.write("Hello friends aapne yaha click kiya ha" + r);
      })

      document.getElementById('paraDiv').addEventListener('mouseenter', function (e) {
         console.log("You enter mouse ", e.target);
      })
      document.getElementById('paraDiv').addEventListener('mouseleave', function (e) {
         console.log("You enter mouse Leave ", e.target);
      })
    
      function reverseString() {
         let newString = document.getElementById('reverseName').value;
         // alert(newString);
         let latestString = "";

         for (let i = newString.length - 1; i >= 0; i--) {
            latestString += newString[i];
         }
         document.getElementById('showData').value = latestString;
      }

   </script>
   <script>
      let str = "google";
      let links = document.links;
      // console.log(links);
      let href;
      Array.from(links).forEach(function (element) {
         href = element.href;
         console.log(href);
      })

      // local storage
      localStorage.setItem("Hello Local Storage", "This is Fine");
      localStorage.setItem("Name", "Kapil Mishra");
      // localStorage.clear();
      let name = localStorage.getItem('name');
      console.log(name);

      // event fire
      function myfun() {
         document.write("Hello you should not click here");
      }
      // var a;
      for (a = 1; a < 10; a++) {
         document.write(a + "<br>");
      }
   </script>

   <script>
      function validation() {
         var un = document.getElementById("user").value;
         var pass = document.getElementById("password").value;
         if (un == "") {
            document.getElementById("userName").innerHTML = "Please Enter Username";
            return false;
         }
         if (pass == "") {
            document.getElementById("passWord").innerHTML = "Please Enter valid Password";
            return false;
         }
      }
   </script>
</body>

</html>

Leave a Comment