CodeJackpot - JS Events

JS Events

JavaScript (JS) is a programming language that is used to create interactive and dynamic web pages. One of the key features of JS is its ability to handle events. Events are actions or occurrences that happen in the browser, such as a user clicking a button or scrolling the page. JS events allow developers to respond to these actions and create dynamic and interactive web pages.

Brief Explanation of JS Events

JS events are triggered by user actions or browser actions. When an event is triggered, JS code can be executed to respond to the event. There are many different types of events that can be handled in JS, including:

Mouse events: These events are triggered by user actions with the mouse, such as clicking, hovering, or scrolling.
Keyboard events: These events are triggered by user actions with the keyboard, such as typing or pressing a key.
Form events: These events are triggered by user actions with form elements, such as submitting a form or changing the value of an input field.
Document events: These events are triggered by actions that affect the document as a whole, such as loading or unloading the page.

To handle an event in JS, you need to attach an event listener to the element that will trigger the event. An event listener is a function that is executed when the event is triggered. Here is an example of attaching an event listener to a button element:

<button id="myButton">Click me</button>

<script>
  document.getElementById("myButton").addEventListener("click", function() {
    alert("Button clicked!");
  });
</script>

In this example, we attach an event listener to a button element with the ID "myButton". When the button is clicked, the function inside the event listener is executed, which displays an alert message.

Code Examples

Here are some more examples of JS events:

Mouse Events

Mouse events are triggered by user actions with the mouse. Here are some examples:

Click event:

  <button id="myButton">Click me</button>

  <script>
    document.getElementById("myButton").addEventListener("click", function() {
      alert("Button clicked!");
    });
  </script>

Hover event:

  <div id="myDiv">Hover over me</div>

  <script>
    document.getElementById("myDiv").addEventListener("mouseover", function() {
      this.style.backgroundColor = "yellow";
    });

    document.getElementById("myDiv").addEventListener("mouseout", function() {
      this.style.backgroundColor = "";
    });
  </script>

Scroll event:

  <div id="myDiv">Scroll me</div>

  <script>
    document.getElementById("myDiv").addEventListener("scroll", function() {
      console.log("Scrolled!");
    });
  </script>

Keyboard Events

Keyboard events are triggered by user actions with the keyboard. Here are some examples:

Keydown event:

  <input type="text" id="myInput">

  <script>
    document.getElementById("myInput").addEventListener("keydown", function(event) {
      console.log("Key pressed: " + event.key);
    });
  </script>

Keypress event:

  <input type="text" id="myInput">

  <script>
    document.getElementById("myInput").addEventListener("keypress", function(event) {
      console.log("Key pressed: " + event.key);
    });
  </script>

Keyup event:

  <input type="text" id="myInput">

  <script>
    document.getElementById("myInput").addEventListener("keyup", function(event) {
      console.log("Key released: " + event.key);
    });
  </script>

Form Events

Form events are triggered by user actions with form elements. Here are some examples:

Submit event:

  <form id="myForm">
    <input type="text" name="name">
    <input type="submit" value="Submit">
  </form>

  <script>
    document.getElementById("myForm").addEventListener("submit", function(event) {
      event.preventDefault();
      console.log("Form submitted!");
    });
  </script>

Change event:

  <input type="text" id="myInput">

  <script>
    document.getElementById("myInput").addEventListener("change", function() {
      console.log("Input value changed: " + this.value);
    });
  </script>

Document Events

Document events are triggered by actions that affect the document as a whole. Here are some examples:

Load event:

  <script>
    window.addEventListener("load", function() {
      console.log("Page loaded!");
    });
  </script>

Unload event:

  <script>
    window.addEventListener("unload", function() {
      console.log("Page unloaded!");
    });
  </script>

JavaScript