JavaScript Form Events: A Comprehensive Guide to Handling Form Events

JavaScript Form Events

Learn how to effectively handle form events in JavaScript. Explore various form events like onsubmit, onreset, onchange, onfocus, and more. Master the art of event handling to create interactive and responsive web forms.

The concepts: JavaScript form events, form event handling, onsubmit, onreset, onchange, onfocus, onblur, oninput, onkeydown, onkeypress, onselect, oncontextmenu, onmouseenter, onmouseleave, onmouseover, onmouseout, onmousedown, onmouseup, onmousemove, ondragstart, ondrag, ondragend, ondragover, ondragenter, ondragleave, ondrop.

JavaScript provides various form events that allow you to detect and handle interactions with HTML forms.

These events are triggered when specific actions occur within a form, such as submitting the form, changing input values, or focusing on form elements. Here are some commonly used form events in JavaScript:

onsubmit:

This event is triggered when a form is submitted, either by clicking a submit button or by pressing Enter on a form field.
You can use this event to perform form validation before submitting the form to the server.

<form onsubmit="return validateForm()">
  <!-- form fields -->
  <input type="submit" value="Submit">
</form>

onreset:

This event is triggered when the clicks the reset button within a form.
It allows you to perform actions such as clearing the form fields or resetting any customizations.

<form onreset="resetForm()">
  <!-- form fields -->
  <input type="reset" value="Reset">
</form>

onchange:

This event is triggered when the value of an input field is changed.
It can be used to perform actions when the modifies the content of a form field.

<input type="text" onchange="validateInput(this.value)">

onfocus:

- This event is triggered when a form element receives focus, usually when the clicks or tabs into the field.
- You can use it to provide visual cues or perform actions when a interacts with a specific field.

<input type="text" onfocus="highlightInput(this)">

onblur:

This event is triggered when a form element loses focus, typically when the clicks or tabs out of the field.

It can be used to perform actions such as validating input or removing visual cues.

In this example, the onsubmit event is attached to the <form> element. When the form is submitted (by clicking the submit button or pressing Enter), the validateForm() function is called.input type=”text” onblur=”validateInput(this.value)”>

oninput:

This event is triggered when the value of an input field changes, including cases where the types, pastes, or deletes text.
It allows you to respond to real-time changes in the input value.

<input type="text" oninput="updateCounter(this.value)">

These are just a few examples of JavaScript form events.

You can attach event handlers to form elements using inline event attributes (as shown above) or by using JavaScript to register event listeners.

Event listeners provide more flexibility and allow for cleaner separation of HTML and JavaScript code.

All javaScript Form Events:

Here is a comprehensive list of JavaScript form events:

onsubmit: Triggered when a form is submitted.

onreset: Triggered when a form is reset.

onchange: Triggered when the value of an input element is changed.

onfocus: Triggered when an input element receives focus.

onblur: Triggered when an input element loses focus.

oninput: Triggered when the value of an input element changes.

onkeydown: Triggered when a key is pressed down while an input element is in focus.

onkeyup: Triggered when a key is released while an input element is in focus.

onkeypress: Triggered when a key is pressed while an input element is in focus.

onselect: Triggered when the text within an input element is selected.

onchange: Triggered when the selection within a select element is changed.

onfocusin: Triggered when an element or any of its descendants gain focus.

onfocusout: Triggered when an element or any of its descendants lose focus.

oncontextmenu: Triggered when the right mouse button is clicked within an element.

onmouseenter: Triggered when the mouse pointer enters an element.

onmouseleave: Triggered when the mouse pointer leaves an element.

onmouseover: Triggered when the mouse pointer is moved over an element.

onmouseout: Triggered when the mouse pointer is moved out of an element.

onmousedown: Triggered when a mouse button is pressed down on an element.

onmouseup: Triggered when a mouse button is released on an element.

onmousemove: Triggered when the mouse pointer is moved over an element.

ondragstart: Triggered when an element is dragged.

ondrag: Triggered when an element is being dragged.

ondragend: Triggered when an element’s drag operation is completed.

ondragover: Triggered when an element is being dragged over another element.

ondragenter: Triggered when an element is being dragged into another element.

ondragleave: Triggered when an element is being dragged out of another element.

ondrop: Triggered when an element is dropped on another element.

These events can be attached to form elements using inline event attributes or by registering event listeners using JavaScript. Remember to handle these events appropriately based on your specific requirements.

Complete code examples

onsubmit : complete code in html

Here’s an example of a complete HTML code that demonstrates the usage of the onsubmit event:

<!DOCTYPE html>
<html>
<head>
  <title>Form Submit Event Example</title>
</head>
<body>
  <h1>Form Submit Event Example</h1>
  <form onsubmit="return validateForm()">
    <label for="name">Name:</label>
    <input type="text" id="name" required>
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email" required>
    <br>
    <input type="submit" value="Submit">
  </form>
  <script>
    function validateForm() {
      var name = document.getElementById("name").value;
      var email = document.getElementById("email").value;

      if (name === "") {
        alert("Please enter your name.");
        return false; // Prevent form submission
      }
      if (email === "") {
        alert("Please enter your email.");
        return false; // Prevent form submission
      }
      // Perform additional validation or form processing here
      // If everything is valid, allow form submission
      return true;
    }
  </script>
</body>
</html>

Explanation:

Inside the validateForm() function, it retrieves the values of the name and email fields using their respective id attributes.
It performs basic validation by checking if either field is empty. If any field is empty, an alert message is displayed, and the function returns false to prevent the form from being submitted.
You can extend the validateForm() function to include additional validation logic as per your requirements.
If all validations pass, the function can return true to allow the form submission to proceed.

Note: The example includes basic client-side form validation using JavaScript.

It’s important to note that client-side validation should always be supplemented with server-side validation for robust data validation and security.

onreset:complete code in html

Here’s an example of a complete HTML code that demonstrates the usage of the onreset event:

<!DOCTYPE html>
<html>
<head>
  <title>Form Reset Event Example</title>
</head>
<body>
  <h1>Form Reset Event Example</h1>
  <form onreset="resetForm()">
    <label for="name">Name:</label>
    <input type="text" id="name">
    <br>
    <label for="email">Email:</label>
    <input type="email" id="email">
    <br>
    <input type="reset" value="Reset">
  </form>

  <script>
    function resetForm() {
      // Optional: Perform any additional actions before resetting the form

      // Reset form fields to their initial values
      document.getElementById("name").value = "";
      document.getElementById("email").value = "";
    }
  </script>
</body>
</html>

Explanation:

In this example, the onreset event is attached to the <form> element. When the reset button is clicked, the resetForm() function is called.
Inside the resetForm() function, you can perform any additional actions you need before resetting the form. Explanation:In this example, no additional actions are performed. The function then resets the form fields by setting their value properties to an empty string.
When the form is reset, all input fields will be cleared, reverting to their initial values or empty state.

Note: The onreset event does not trigger if the form is reset programmatically using JavaScript. In such cases, you can call the resetForm() function directly to perform the necessary actions to reset the form.

onchange:complete code in html

Here’s an example of a complete HTML code that demonstrates the usage of the onchange event:

<!DOCTYPE html>
<html>
<head>
  <title>Input Change Event Example</title>
</head>
<body>
  <h1>Input Change Event Example</h1>

  <label for="color">Select a color:</label>
  <input type="color" id="color" onchange="changeColor(this.value)">

  <div id="colorResult">Selected color: None</div>

  <script>
    function changeColor(color) {
      var colorResult = document.getElementById("colorResult");
      colorResult.textContent = "Selected color: " + color;
    }
  </script>
</body>
</html>

Explanation:

In this example, the onchange event is attached to the <input> element of type “color”. When the value of the color input is changed, the changeColor() function is called.
Inside the changeColor() function, the selected color is received as a parameter. The function then retrieves the <div> element with the id “colorResult” using document.getElementById(). It updates the text content of the <div> to display the selected color.
As the selects a color from the color input, the changeColor() function is triggered, and the selected color is displayed in the <div> below the input field.
You can modify the logic inside the changeColor() function to perform any desired actions based on the changed input value.

Note: The onchange event is typically used with input fields that require a change in their value, such as text inputs, checkboxes, radio buttons, and select elements.

onfocus: complete code in html

Here’s an example of a complete HTML code that demonstrates the usage of the onfocus event:

<!DOCTYPE html>
<html>
<head>
  <title>Input Focus Event Example</title>
  <style>
    .highlight {
      border: 2px solid red;
    }
  </style>
</head>
<body>
  <h1>Input Focus Event Example</h1>

  <label for="name">Name:</label>
  <input type="text" id="name" onfocus="highlightInput(this)">

  <label for="email">Email:</label>
  <input type="email" id="email" onfocus="highlightInput(this)">

  <script>
    function highlightInput(input) {
      input.classList.add("highlight");
    }
  </script>
</body>
</html>

Explanation:

In this example, the onfocus event is attached to the <input> elements for “Name” and “Email”. When any of these input fields receive focus (either by clicking or tabbing into them), the highlightInput() function is called.
Inside the highlightInput() function, the input element that triggered the event is passed as a parameter (this). The function adds a CSS class called “highlight” to the input element using the classList.add() method. This class applies a red border to the focused input field, visually highlighting it.
As the focuses on either the “Name” or “Email” input field, the highlightInput() function is triggered, and the respective input field is highlighted with a red border.
You can modify the logic inside the highlightInput() function to perform any desired actions when an input field receives focus.

Note:In this example, a simple CSS class is added to highlight the input field. You can customize the CSS class and styles based on your requirements and preferences.

onblur:complete code in html

Here’s an example of a complete HTML code that demonstrates the usage of the onblur event:

<!DOCTYPE html>
<html>
<head>
  <title>Input Blur Event Example</title>
  <style>
    .error {
      color: red;
    }
  </style>
</head>
<body>
  <h1>Input Blur Event Example</h1>

  <label for="name">Name:</label>
  <input type="text" id="name" onblur="validateInput(this)">

  <label for="email">Email:</label>
  <input type="email" id="email" onblur="validateInput(this)">

  <div id="nameError" class="error"></div>
  <div id="emailError" class="error"></div>

  <script>
    function validateInput(input) {
      var inputId = input.id;
      var errorElement = document.getElementById(inputId + "Error");
      
      if (input.value === "") {
        errorElement.textContent = "Field cannot be empty.";
      } else {
        errorElement.textContent = "";
      }
    }
  </script>
</body>
</html>

Explanation:

In this example, the onblur event is attached to the <input> elements for “Name” and “Email”. When either of these input fields loses focus (when the clicks outside or tabs away from them), the validateInput() function is called.
Inside the validateInput() function, the input element that triggered the event is passed as a parameter (this). The function retrieves the corresponding error element (identified by the input’s id plus “Error”) using document.getElementById().
If the input field is empty (input.value === “”), an error message is displayed in the respective error element. Otherwise, if the input field is not empty, the error message is cleared.
As the enters data in either the “Name” or “Email” input field and then moves away from the field, the validateInput() function is triggered, and the respective error element is updated based on the validation logic.
You can modify the logic inside the validateInput() function to perform any desired actions for input validation or error handling.

Note:In this example, a simple error message is displayed using a CSS class named “error”. You can customize the CSS class and styles or modify the error handling as per your requirements.

oninput: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the oninput event:

<!DOCTYPE html>
<html>
<head>
  <title>Input Input Event Example</title>
</head>
<body>
  <h1>Input Input Event Example</h1>

  <label for="message">Message:</label>
  <textarea id="message" oninput="updateCharacterCount(this)"></textarea>

  <div id="characterCount">Character count: 0</div>

  <script>
    function updateCharacterCount(input) {
      var message = input.value;
      var characterCountElement = document.getElementById("characterCount");
      characterCountElement.textContent = "Character count: " + message.length;
    }
  </script>
</body>
</html>

Explanation:

In this example, the oninput event is attached to the <textarea> element with the id “message”. Whenever the content of the textarea is modified (e.g., when the types, pastes, or deletes text), the updateCharacterCount() function is called.
Inside the updateCharacterCount() function, the value of the textarea is retrieved using input.value. The length of the message is then calculated, and the character count is updated in the <div> element with the id “characterCount”.
As the types or modifies the content in the textarea, the updateCharacterCount() function is triggered, and the character count is updated in the <div> element below the textarea.
You can modify the logic inside the updateCharacterCount() function to perform any desired actions based on the input changes.

Note:In this example, the character count is calculated and displayed as the types. You can customize the functionality to meet your specific needs, such as validating the input or performing real-time updates based on the input value.

onkeydown: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onkeydown event:

<!DOCTYPE html>
<html>
<head>
  <title>Key Down Event Example</title>
</head>
<body>
  <h1>Key Down Event Example</h1>

  <input type="text" id="textInput" onkeydown="handleKeyDown(event)">
  <div id="keyInfo">Last Key Pressed: None</div>
  <script>
    function handleKeyDown(event) {
      var keyInfo = document.getElementById("keyInfo");
      var keyPressed = event.key;
      keyInfo.textContent = "Last Key Pressed: " + keyPressed;
    }
  </script>
</body>
</html>

Explanation:

In this example, the onkeydown event is attached to the <input> element of type “text”. When a key is pressed down while the input field is in focus, the handleKeyDown() function is called.
Inside the handleKeyDown() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “keyInfo” using document.getElementById(). It then extracts the key that was pressed from the event object using event.key and updates the text content of the <div> to display the last key that was pressed.
As the presses down a key while the input field is in focus, the handleKeyDown() function is triggered, and the last key pressed is displayed in the <div> below the input field.
You can modify the logic inside the handleKeyDown() function to perform any desired actions based on the key events.

Note: The onkeydown event triggers when a key is initially pressed down, and it repeats if the key is held down. If you need to detect when a key is released, you can use the onkeyup event instead.

onkeypress: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onkeypress event:

<!DOCTYPE html>
<html>
<head>
  <title>Key Press Event Example</title>
</head>
<body>
  <h1>Key Press Event Example</h1>

  <input type="text" id="textInput" onkeypress="handleKeyPress(event)">

  <div id="keyInfo">Last Key Pressed: None</div>

  <script>
    function handleKeyPress(event) {
      var keyInfo = document.getElementById("keyInfo");
      var keyPressed = event.key;
      keyInfo.textContent = "Last Key Pressed: " + keyPressed;
    }
  </script>
</body>
</html>

Explanation:

In this example, the onkeypress event is attached to the <input> element of type “text”. When a key is pressed (including alphanumeric and special keys) while the input field is in focus, the handleKeyPress() function is called.
Inside the handleKeyPress() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “keyInfo” using document.getElementById(). It then extracts the key that was pressed from the event object using event.key and updates the text content of the <div> to display the last key that was pressed.
As the presses a key while the input field is in focus, the handleKeyPress() function is triggered, and the last key pressed is displayed in the <div> below the input field.
You can modify the logic inside the handleKeyPress() function to perform any desired actions based on the key events.

Note: The onkeypress event is triggered for most printable characters, including alphanumeric keys and some special characters. It may not be triggered for certain non-printable keys or special keys like “Shift” or “Ctrl”. If you need to detect non-printable or special keys, you can use the onkeydown or onkeyup events instead.

onselect:complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onselect event:

<!DOCTYPE html>
<html>
<head>
  <title>Select Event Example</title>
</head>
<body>
  <h1>Select Event Example</h1>

  <input type="text" value="Select me!" onselect="handleSelection()">

  <script>
    function handleSelection() {
      var selectedText = window.getSelection().toString();
      alert("Selected text: " + selectedText);
    }
  </script>
</body>
</html>

Explanation:

In this example, the onselect event is attached to the <input> element of type “text”. When the selects text within the input field (by dragging the mouse over the text), the handleSelection() function is called.
Inside the handleSelection() function, the selected text is retrieved using the window.getSelection().toString() method. The selected text is then displayed in an alert box using alert().
As the selects text within the input field, the handleSelection() function is triggered, and an alert box shows the selected text.
You can modify the logic inside the handleSelection() function to perform any desired actions with the selected text.

Note: The onselect event is typically used with input fields that allow text selection, such as text inputs or textareas. The event is triggered when the finishes selecting text, either by releasing the mouse button or by releasing the selection keys on the keyboard.

onchange: complete

Here’s an example of a complete HTML code that demonstrates the usage of the onchange event:

<!DOCTYPE html>
<html>
<head>
  <title>Change Event Example</title>
</head>
<body>
  <h1>Change Event Example</h1>

  <select id="colorSelect" onchange="changeColor(this.value)">
    <option value="">Select a color</option>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
    <option value="green">Green</option>
  </select>

  <div id="colorResult">Selected color: None</div>

  <script>
    function changeColor(color) {
      var colorResult = document.getElementById("colorResult");
      colorResult.textContent = "Selected color: " + color;
    }
  </script>
</body>
</html>

Explanation:

In this example, the onchange event is attached to the <select> element with the id “colorSelect”. When the selects an option from the dropdown menu, the changeColor() function is called.
Inside the changeColor() function, the selected color is received as a parameter. The function retrieves the <div> element with the id “colorResult” using document.getElementById(). It updates the text content of the <div> to display the selected color.
As the selects an option from the dropdown menu, the changeColor() function is triggered, and the selected color is displayed in the <div> below the dropdown.
You can modify the logic inside the changeColor() function to perform any desired actions based on the selected option.

Note:

The onchange event is typically used with form elements like select dropdowns, checkboxes, and radio buttons.

It is triggered when the changes the selection within the element.

onfocusin:complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onfocusin event:

<!DOCTYPE html>
<html>
<head>
  <title>Focus In Event Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>Focus In Event Example</h1>

  <input type="text" id="name" onfocusin="highlightInput(this)">

  <input type="text" id="email" onfocusin="highlightInput(this)">

  <script>
    function highlightInput(input) {
      input.classList.add("highlight");
    }
  </script>
</body>
</html>

Explanation:

In this example, the onfocusin event is attached to the <input> elements for “Name” and “Email”. When either of these input fields or any of their descendants gain focus, the highlightInput() function is called.
Inside the highlightInput() function, the input element that triggered the event is passed as a parameter (this). The function adds a CSS class called “highlight” to the input element using the classList.add() method. This class applies a yellow background color to the focused input field, visually highlighting it.
As the clicks or tabs into either the “Name” or “Email” input field or any of their descendants, the highlightInput() function is triggered, and the respective input field is highlighted with a yellow background.
You can modify the logic inside the highlightInput() function to perform any desired actions when an input field or its descendants receive focus.

Note: The onfocusin event triggers when an element or any of its descendants gain focus. It’s worth noting that this event may not be supported by all browsers, so it’s recommended to test it across different browsers for compatibility.

onfocusout:complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onfocusout event:

<!DOCTYPE html>
<html>
<head>
  <title>Focus Out Event Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>Focus Out Event Example</h1>

  <input type="text" id="name" onfocusout="removeHighlight(this)">

  <input type="text" id="email" onfocusout="removeHighlight(this)">

  <script>
    function removeHighlight(input) {
      input.classList.remove("highlight");
    }
  </script>
</body>
</html>

Explanation:

In this example, the onfocusout event is attached to the <input> elements for “Name” and “Email”. When either of these input fields or any of their descendants lose focus, the removeHighlight() function is called.
Inside the removeHighlight() function, the input element that triggered the event is passed as a parameter (this). The function removes the CSS class called “highlight” from the input element using the classList.remove() method. This removes the yellow background color from the input field, removing the visual highlight.
As the clicks or tabs out of either the “Name” or “Email” input field or any of their descendants, the removeHighlight() function is triggered, and the respective input field loses the yellow background color.
You can modify the logic inside the removeHighlight() function to perform any desired actions when an input field or its descendants lose focus.

Note: The onfocusout event triggers when an element or any of its descendants lose focus. It’s worth noting that this event may not be supported by all browsers, so it’s recommended to test it across different browsers for compatibility.

oncontextmenu: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the oncontextmenu event:

<!DOCTYPE html>
<html>
<head>
  <title>Context Menu Event Example</title>
</head>
<body>
  <h1>Context Menu Event Example</h1>

  <div oncontextmenu="showContextMenu(event)">
    Right-click to show context menu
  </div>

  <ul id="contextMenu" style="display: none;">
    <li>Edit</li>
    <li>Delete</li>
    <li>Copy</li>
  </ul>

  <script>
    function showContextMenu(event) {
      event.preventDefault();
      var contextMenu = document.getElementById("contextMenu");
      contextMenu.style.display = "block";
      contextMenu.style.left = event.clientX + "px";
      contextMenu.style.top = event.clientY + "px";
    }
  </script>
</body>
</html>

Explanation:

In this example, the oncontextmenu event is attached to the <div> element. When the right-clicks within the <div>, the showContextMenu() function is called.
Inside the showContextMenu() function, the event object is passed as a parameter (event). The function prevents the default context menu from appearing using event.preventDefault(). It then retrieves the <ul> element with the id “contextMenu” using document.getElementById(). It sets the display property of the context menu to “block” and positions it at the coordinates of the right-click event using event.clientX and event.clientY.
As the right-clicks within the <div>, the default context menu is prevented, and a custom context menu (represented by the <ul> element) is shown at the mouse pointer’s position.
You can modify the logic inside the showContextMenu() function to perform any desired actions when the context menu is triggered.

Note: The oncontextmenu event triggers when the right-clicks within an element. In this example, the default context menu is prevented, and a custom context menu is displayed.

onmouseenter:complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onmouseenter event:

<!DOCTYPE html>
<html>
<head>
  <title>Mouse Enter Event Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>Mouse Enter Event Example</h1>

  <div id="box" onmouseenter="highlightBox()" onmouseleave="removeHighlight()">
    Hover over me to see the effect
  </div>
  <script>
    function highlightBox() {
      var box = document.getElementById("box");
      box.classList.add("highlight");
    }
    function removeHighlight() {
      var box = document.getElementById("box");
      box.classList.remove("highlight");
    }
  </script>
</body>
</html>

Explanation:

In this example, the onmouseenter event is attached to the <div> element with the id “box”. When the mouse pointer enters the boundaries of the <div>, the highlightBox() function is called. Additionally, the onmouseleave event is attached to the <div> to trigger the removeHighlight() function when the mouse pointer leaves the <div>.
Inside the highlightBox() function, the <div> element is retrieved using document.getElementById(). The function adds a CSS class called “highlight” to the <div> using the classList.add() method. This class applies a yellow background color to the <div>, visually highlighting it.
Inside the removeHighlight() function, the <div> element is retrieved using document.getElementById(). The function removes the CSS class called “highlight” from the <div> using the classList.remove() method, removing the yellow background color.
As the hovers the mouse over the <div>, the highlightBox() function is triggered, and the <div> is highlighted with a yellow background. When the moves the mouse away from the <div>, the removeHighlight() function is triggered, and the yellow background color is removed.
You can modify the logic inside the highlightBox() and removeHighlight() functions to perform any desired actions when the mouse enters or leaves the element.

Note: The onmouseenter event triggers when the mouse pointer enters the boundaries of an element. It’s worth noting that this event does not bubble up the DOM tree and does not trigger if the mouse enters or leaves its child elements.

onmouseleave:complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onmouseleave event:

<!DOCTYPE html>
<html>
<head>
  <title>Mouse Leave Event Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>Mouse Leave Event Example</h1>

  <div id="box" onmouseenter="highlightBox()" onmouseleave="removeHighlight()">
    Hover over me to see the effect
  </div>

  <script>
    function highlightBox() {
      var box = document.getElementById("box");
      box.classList.add("highlight");
    }

    function removeHighlight() {
      var box = document.getElementById("box");
      box.classList.remove("highlight");
    }
  </script>
</body>
</html>

Explanation:

In this example, the onmouseenter event is attached to the <div> element with the id “box”. When the mouse pointer enters the boundaries of the <div>, the highlightBox() function is called. Additionally, the onmouseleave event is attached to the <div> to trigger the removeHighlight() function when the mouse pointer leaves the <div>.
Inside the highlightBox() function, the <div> element is retrieved using document.getElementById(). The function adds a CSS class called “highlight” to the <div> using the classList.add() method. This class applies a yellow background color to the <div>, visually highlighting it.
Inside the removeHighlight() function, the <div> element is retrieved using document.getElementById(). The function removes the CSS class called “highlight” from the <div> using the classList.remove() method, removing the yellow background color.
As the hovers the mouse over the <div>, the highlightBox() function is triggered, and the <div> is highlighted with a yellow background. When the moves the mouse away from the <div>, the removeHighlight() function is triggered, and the yellow background color is removed.
You can modify the logic inside the highlightBox() and removeHighlight() functions to perform any desired actions when the mouse enters or leaves the element.

Note: The onmouseleave event triggers when the mouse pointer leaves the boundaries of an element. It’s worth noting that this event does not bubble up the DOM tree and does not trigger if the mouse enters or leaves its child elements.

onmouseover:complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onmouseover event:

<!DOCTYPE html>
<html>
<head>
  <title>Mouse Over Event Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>Mouse Over Event Example</h1>

  <div id="box" onmouseover="highlightBox()" onmouseout="removeHighlight()">
    Hover over me to see the effect
  </div>

  <script>
    function highlightBox() {
      var box = document.getElementById("box");
      box.classList.add("highlight");
    }

    function removeHighlight() {
      var box = document.getElementById("box");
      box.classList.remove("highlight");
    }
  </script>
</body>
</html>

Explanation:

In this example, the onmouseover event is attached to the <div> element with the id “box”. When the mouse pointer moves over the <div>, the highlightBox() function is called. Additionally, the onmouseout event is attached to the <div> to trigger the removeHighlight() function when the mouse pointer moves out of the <div>.
Inside the highlightBox() function, the <div> element is retrieved using document.getElementById(). The function adds a CSS class called “highlight” to the <div> using the classList.add() method. This class applies a yellow background color to the <div>, visually highlighting it.
Inside the removeHighlight() function, the <div> element is retrieved using document.getElementById(). The function removes the CSS class called “highlight” from the <div> using the classList.remove() method, removing the yellow background color.
As the moves the mouse over the <div>, the highlightBox() function is triggered, and the <div> is highlighted with a yellow background. When the moves the mouse out of the <div>, the removeHighlight() function is triggered, and the yellow background color is removed.
You can modify the logic inside the highlightBox() and removeHighlight() functions to perform any desired actions when the mouse moves over or out of the element.

Note: The onmouseover event triggers when the mouse pointer moves over an element. It’s worth noting that this event bubbles up the DOM tree and triggers if the mouse moves over any child elements as well.

onmouseout: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onmouseout event:

<!DOCTYPE html>
<html>
<head>
  <title>Mouse Out Event Example</title>
  <style>
    .highlight {
      background-color: yellow;
    }
  </style>
</head>
<body>
  <h1>Mouse Out Event Example</h1>

  <div id="box" onmouseover="highlightBox()" onmouseout="removeHighlight()">
    Hover over me to see the effect
  </div>

  <script>
    function highlightBox() {
      var box = document.getElementById("box");
      box.classList.add("highlight");
    }

    function removeHighlight() {
      var box = document.getElementById("box");
      box.classList.remove("highlight");
    }
  </script>
</body>
</html>

Explanation:

In this example, the onmouseover event is attached to the <div> element with the id “box”. When the mouse pointer moves over the <div>, the highlightBox() function is called. Additionally, the onmouseout event is attached to the <div> to trigger the removeHighlight() function when the mouse pointer moves out of the <div>.
Inside the highlightBox() function, the <div> element is retrieved using document.getElementById().
The function adds a CSS class called “highlight” to the <div> using the classList.add() method. This class applies a yellow background color to the <div>, visually highlighting it.
Inside the removeHighlight() function, the <div> element is retrieved using document.getElementById().
The function removes the CSS class called “highlight” from the <div> using the classList.remove() method, removing the yellow background color.
As the moves the mouse over the <div>, the highlightBox() function is triggered, and the <div> is highlighted with a yellow background.
When the moves the mouse out of the <div>, the removeHighlight() function is triggered, and the yellow background color is removed.
You can modify the logic inside the highlightBox() and removeHighlight() functions to perform any desired actions when the mouse moves over or out of the element.

Note: The onmouseout event triggers when the mouse pointer moves out of an element. It’s worth noting that this event bubbles up the DOM tree and triggers if the mouse moves out of any child elements as well.

onmousedown: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onmousedown event:

<!DOCTYPE html>
<html>
<head>
  <title>Mouse Down Event Example</title>
</head>
<body>
  <h1>Mouse Down Event Example</h1>

  <button id="clickButton" onmousedown="changeText()">Click Me!</button>

  <script>
    function changeText() {
      var button = document.getElementById("clickButton");
      button.textContent = "Button Clicked!";
    }
  </script>
</body>
</html>

Explanation:

In this example, the onmousedown event is attached to the <button> element with the id “clickButton”. When the mouse button is pressed down on the button, the changeText() function is called.
Inside the changeText() function, the <button> element is retrieved using document.getElementById(). The function then updates the text content of the button to “Button Clicked!” using the textContent property.
As the presses down the mouse button on the button, the changeText() function is triggered, and the text on the button is changed to “Button Clicked!”.
You can modify the logic inside the changeText() function to perform any desired actions when the mouse button is pressed down.

Note: The onmousedown event triggers when the mouse button is pressed down on an element. It can be useful for capturing the initial interaction with a button or element.

onmouseup:complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onmouseup event:

<!DOCTYPE html>
<html>
<head>
  <title>Mouse Up Event Example</title>
</head>
<body>
  <h1>Mouse Up Event Example</h1>

  <button id="clickButton" onmouseup="changeText()">Click Me!</button>

  <script>
    function changeText() {
      var button = document.getElementById("clickButton");
      button.textContent = "Button Clicked!";
    }
  </script>
</body>
</html>

Explanation:

In this example, the onmouseup event is attached to the <button> element with the id “clickButton”. When the mouse button is released after being pressed down on the button, the changeText() function is called.
Inside the changeText() function, the <button> element is retrieved using document.getElementById(). The function then updates the text content of the button to “Button Clicked!” using the textContent property.
As the releases the mouse button after pressing it down on the button, the changeText() function is triggered, and the text on the button is changed to “Button Clicked!”.
You can modify the logic inside the changeText() function to perform any desired actions when the mouse button is released.

Note: The onmouseup event triggers when the mouse button is released after being pressed down on an element. It can be useful for capturing the action of releasing the mouse button after a click or interaction.

onmousemove: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the onmousemove event:

<!DOCTYPE html>
<html>
<head>
  <title>Mouse Move Event Example</title>
</head>
<body>
  <h1>Mouse Move Event Example</h1>

  <div id="mousePosition" onmousemove="updateMousePosition(event)">
    Move your mouse over this div
  </div>

  <script>
    function updateMousePosition(event) {
      var mousePosition = document.getElementById("mousePosition");
      var mouseX = event.clientX;
      var mouseY = event.clientY;
      mousePosition.textContent = "Mouse Position: X=" + mouseX + ", Y=" + mouseY;
    }
  </script>
</body>
</html>

Explanation:

In this example, the onmousemove event is attached to the <div> element with the id “mousePosition”. When the mouse is moved over the <div>, the updateMousePosition() function is called.
Inside the updateMousePosition() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “mousePosition” using document.getElementById(). It then extracts the mouse coordinates (X and Y) from the event object using event.clientX and event.clientY. The function updates the text content of the <div> to display the current mouse position.
As the moves the mouse over the <div>, the updateMousePosition() function is triggered, and the mouse coordinates are displayed in the <div>.
You can modify the logic inside the updateMousePosition() function to perform any desired actions based on the mouse movement.

Note: The onmousemove event triggers when the mouse is moved within an element. It can be useful for capturing and responding to mouse movements, such as tracking the mouse position or triggering interactive behaviors.

ondragstart: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the ondragstart event:

<!DOCTYPE html>
<html>
<head>
  <title>Drag Start Event Example</title>
  <style>
    .drag-element {
      width: 100px;
      height: 100px;
      background-color: blue;
      color: white;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <h1>Drag Start Event Example</h1>

  <div id="dragElement" class="drag-element" draggable="true" ondragstart="handleDragStart(event)">Drag me!</div>

  <script>
    function handleDragStart(event) {
      var dragElement = document.getElementById("dragElement");
      var dragData = "Hello, World!"; // Set the data to be transferred

      // Set the drag data and effect
      event.dataTransfer.setData("text/plain", dragData);
      event.dataTransfer.effectAllowed = "move";

      // Styling the drag element during drag
      dragElement.style.opacity = "0.5";
      dragElement.style.backgroundColor = "red";
      dragElement.style.color = "black";
    }
  </script>
</body>
</html>

Explanation:

In this example, the ondragstart event is attached to the <div> element with the id “dragElement”. When the starts dragging the element, the handleDragStart() function is called.
Inside the handleDragStart() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “dragElement” using document.getElementById(). It then sets the data to be transferred during the drag operation using event.dataTransfer.setData(). Explanation:In this example, the data is set as a simple string, “Hello, World!”.
The function also sets the effectAllowed property of the dataTransfer object to specify the allowed drag effect. In this case, it is set to “move” to indicate that the element can be moved.
Additionally, the function applies some styling changes to the drag element using JavaScript. The opacity, background color, and text color are modified to provide a visual cue that the element is being dragged.
As the starts dragging the element, the handleDragStart() function is triggered, and the appropriate data and styling modifications are applied.
You can modify the logic inside the handleDragStart() function to perform any desired actions during the drag start event.

Note: The ondragstart event is typically used in combination with the ondragover and ondrop events to implement drag and drop functionality. It’s important to handle those events to complete the drag and drop operation.

ondrag: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the ondrag event:

<!DOCTYPE html>
<html>
<head>
  <title>Drag Event Example</title>
  <style>
    .drag-element {
      width: 100px;
      height: 100px;
      background-color: blue;
      color: white;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <h1>Drag Event Example</h1>

  <div id="dragElement" class="drag-element" draggable="true" ondrag="handleDrag(event)">Drag me!</div>

  <script>
    function handleDrag(event) {
      var dragElement = document.getElementById("dragElement");

      // Styling the drag element during drag
      dragElement.style.opacity = "0.5";
      dragElement.style.backgroundColor = "red";
      dragElement.style.color = "black";
    }
  </script>
</body>
</html>

Explanation:

In this example, the ondrag event is attached to the <div> element with the id “dragElement”. When the drags the element, the handleDrag() function is called.
Inside the handleDrag() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “dragElement” using document.getElementById(). It then applies styling changes to the drag element using JavaScript. The opacity, background color, and text color are modified to provide a visual cue that the element is being dragged.
As the drags the element, the handleDrag() function is triggered, and the appropriate styling modifications are applied.
You can modify the logic inside the handleDrag() function to perform any desired actions during the drag event.

Note: The ondrag event is typically used in combination with the ondragstart and ondragend events to implement drag and drop functionality. It’s important to handle those events to complete the drag and drop operation.

ondragend:complete code

Here’s an example of a complete HTML code that demonstrates the usage of the ondragend event:

<!DOCTYPE html>
<html>
<head>
  <title>Drag End Event Example</title>
  <style>
    .drag-element {
      width: 100px;
      height: 100px;
      background-color: blue;
      color: white;
      text-align: center;
      line-height: 100px;
    }
  </style>
</head>
<body>
  <h1>Drag End Event Example</h1>

  <div id="dragElement" class="drag-element" draggable="true" ondragend="handleDragEnd(event)">Drag me!</div>

  <script>
    function handleDragEnd(event) {
      var dragElement = document.getElementById("dragElement");

      // Resetting the styling of the drag element after drag
      dragElement.style.opacity = "1";
      dragElement.style.backgroundColor = "blue";
      dragElement.style.color = "white";
    }
  </script>
</body>
</html>

Explanation:

In this example, the ondragend event is attached to the <div> element with the id “dragElement”. When the finishes dragging the element, the handleDragEnd() function is called.
Inside the handleDragEnd() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “dragElement” using document.getElementById(). It then resets the styling of the drag element to its original state using JavaScript. The opacity, background color, and text color are reverted to their initial values.
As the finishes dragging the element, the handleDragEnd() function is triggered, and the appropriate styling modifications are applied to restore the element’s original appearance.
You can modify the logic inside the handleDragEnd() function to perform any desired actions after the drag operation ends.

Note: The ondragend event is typically used in combination with the ondragstart and ondrag events to implement drag and drop functionality. It’s important to handle those events to complete the drag and drop operation.

ondragover:complete code

Here’s an example of a complete HTML code that demonstrates the usage of the ondragover event:

<!DOCTYPE html>
<html>
<head>
  <title>Drag Over Event Example</title>
  <style>
    .drag-element {
      width: 100px;
      height: 100px;
      background-color: blue;
      color: white;
      text-align: center;
      line-height: 100px;
    }
    .drop-area {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Drag Over Event Example</h1>

  <div id="dragElement" class="drag-element" draggable="true" ondragstart="handleDragStart(event)">Drag me!</div>

  <div id="dropArea" class="drop-area" ondragover="handleDragOver(event)" ondrop="handleDrop(event)"></div>

  <script>
    function handleDragStart(event) {
      var dragElement = document.getElementById("dragElement");
      var dragData = "Hello, World!"; // Set the data to be transferred

      // Set the drag data and effect
      event.dataTransfer.setData("text/plain", dragData);
      event.dataTransfer.effectAllowed = "move";

      // Styling the drag element during drag
      dragElement.style.opacity = "0.5";
      dragElement.style.backgroundColor = "red";
      dragElement.style.color = "black";
    }

    function handleDragOver(event) {
      event.preventDefault();
    }

    function handleDrop(event) {
      event.preventDefault();
      var dropArea = document.getElementById("dropArea");
      var dragData = event.dataTransfer.getData("text/plain");

      // Update the drop area content
      dropArea.textContent = "Dropped: " + dragData;

      // Reset the styling of the drag element after drop
      var dragElement = document.getElementById("dragElement");
      dragElement.style.opacity = "1";
      dragElement.style.backgroundColor = "blue";
      dragElement.style.color = "white";
    }
  </script>
</body>
</html>

Explanation:

In this example, the ondragover event is attached to the <div> element with the id “dropArea”. When a draggable element is dragged over the drop area, the handleDragOver() function is called. Additionally, the ondrop event is attached to the <div> to trigger the handleDrop() function when the draggable element is dropped onto the drop area.
Inside the handleDragOver() function, the event object is passed as a parameter (event). The function calls event.preventDefault() to allow the draggable element to be dropped onto the drop area.
Inside the handleDrop() function, the event object is passed as a parameter (event). The function calls event.preventDefault() to prevent the default handling of the drop event. It then retrieves the <div> element with the id “dropArea” using document.getElementById(). The function also retrieves the data that was set during the drag start event using event.dataTransfer.getData(). Explanation:In this example, the data is a simple string, “Hello, World!”.
The function updates the text content of the drop area to display the dropped data. It then resets the styling of the drag element to its original state using JavaScript.
As the draggable element is dragged over the drop area, the handleDragOver() function is triggered, and the appropriate actions are taken to allow the drop operation.
When the draggable element is dropped onto the drop area, the handleDrop() function is triggered. It updates the drop area content and resets the styling of the drag element.
You can modify the logic inside the handleDragStart(), handleDragOver(), and handleDrop() functions to perform any desired actions during the drag and drop operations.

Note: The ondragover event is essential for allowing a drop to occur. It’s important to handle this event and call event.preventDefault() to allow the drop event to trigger. Additionally, the ondragstart event is required on the draggable element, and the ondrop event is necessary on the drop area for proper drag and drop functionality.

ondragenter: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the ondragenter event:

<!DOCTYPE html>
<html>
<head>
  <title>Drag Enter Event Example</title>
  <style>
    .drag-element {
      width: 100px;
      height: 100px;
      background-color: blue;
      color: white;
      text-align: center;
      line-height: 100px;
    }
    .drop-area {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      margin-top: 20px;
    }
    .highlight {
      border: 2px dashed red;
    }
  </style>
</head>
<body>
  <h1>Drag Enter Event Example</h1>

  <div id="dragElement" class="drag-element" draggable="true" ondragstart="handleDragStart(event)">Drag me!</div>

  <div id="dropArea" class="drop-area" ondragenter="handleDragEnter(event)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)" ondrop="handleDrop(event)"></div>

  <script>
    function handleDragStart(event) {
      var dragElement = document.getElementById("dragElement");
      var dragData = "Hello, World!"; // Set the data to be transferred

      // Set the drag data and effect
      event.dataTransfer.setData("text/plain", dragData);
      event.dataTransfer.effectAllowed = "move";

      // Styling the drag element during drag
      dragElement.style.opacity = "0.5";
      dragElement.style.backgroundColor = "red";
      dragElement.style.color = "black";
    }

    function handleDragEnter(event) {
      var dropArea = document.getElementById("dropArea");
      dropArea.classList.add("highlight");
    }

    function handleDragOver(event) {
      event.preventDefault();
    }

    function handleDragLeave(event) {
      var dropArea = document.getElementById("dropArea");
      dropArea.classList.remove("highlight");
    }

    function handleDrop(event) {
      event.preventDefault();
      var dropArea = document.getElementById("dropArea");
      var dragData = event.dataTransfer.getData("text/plain");

      // Update the drop area content
      dropArea.textContent = "Dropped: " + dragData;

      // Reset the styling of the drag element after drop
      var dragElement = document.getElementById("dragElement");
      dragElement.style.opacity = "1";
      dragElement.style.backgroundColor = "blue";
      dragElement.style.color = "white";
    }
  </script>
</body>
</html>

Explanation:

In this example, the ondragenter event is attached to the <div> element with the id “dropArea”. When a draggable element is dragged into the drop area, the handleDragEnter() function is called. Additionally, the ondragover event is attached to the <div> to trigger the handleDragOver() function, and the ondragleave event is attached to the <div> to trigger the handleDragLeave() function when the draggable element is dragged out of the drop area. Lastly, the ondrop event is attached to the <div> to trigger the handleDrop() function when the draggable element is dropped onto the drop area.
Inside the handleDragEnter() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “dropArea” using document.getElementById(). It then adds a CSS class called “highlight” to the drop area using the classList.add() method. This class applies a dashed red border to the drop area, visually highlighting it.
Inside the handleDragOver() function, the event object is passed as a parameter (event). The function calls event.preventDefault() to allow the draggable element to be dropped onto the drop area.
Inside the handleDragLeave() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “dropArea” using document.getElementById(). It then removes the CSS class called “highlight” from the drop area using the classList.remove() method, removing the dashed red border.
Inside the handleDrop() function, the event object is passed as a parameter (event). The function calls event.preventDefault() to prevent the default handling of the drop event. It then retrieves the <div> element with the id “dropArea” using document.getElementById(). The function also retrieves the data that was set during the drag start event using event.dataTransfer.getData(). Explanation:In this example, the data is a simple string, “Hello, World!”.
The function updates the text content of the drop area to display the dropped data. It then resets the styling of the drag element to its original state using JavaScript.
As the draggable element is dragged into the drop area, the handleDragEnter() function is triggered, and the drop area is highlighted.
When the draggable element is dragged over the drop area, the handleDragOver() function is triggered, and the draggable element can be dropped onto the drop area.
If the draggable element is dragged out of the drop area, the handleDragLeave() function is triggered, and the highlight is removed from the drop area.
When the draggable element is dropped onto the drop area, the handleDrop() function is triggered. It updates the drop area content and resets the styling of the drag element.
You can modify the logic inside the handleDragStart(), handleDragEnter(), handleDragOver(), handleDragLeave(), and handleDrop() functions to perform any desired actions during the drag and drop operations.

Note: The ondragenter event is used to apply visual cues or actions when the draggable element enters a drop area. It works in conjunction with the ondragover, ondragleave, and ondrop events to implement drag and drop functionality.

ondragleave:complete code

Here’s an example of a complete HTML code that demonstrates the usage of the ondragleave event:

<!DOCTYPE html>
<html>
<head>
  <title>Drag Leave Event Example</title>
  <style>
    .drag-element {
      width: 100px;
      height: 100px;
      background-color: blue;
      color: white;
      text-align: center;
      line-height: 100px;
    }
    .drop-area {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      margin-top: 20px;
    }
    .highlight {
      border: 2px dashed red;
    }
  </style>
</head>
<body>
  <h1>Drag Leave Event Example</h1>

  <div id="dragElement" class="drag-element" draggable="true" ondragstart="handleDragStart(event)">Drag me!</div>

  <div id="dropArea" class="drop-area" ondragenter="handleDragEnter(event)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)" ondrop="handleDrop(event)"></div>

  <script>
    function handleDragStart(event) {
      var dragElement = document.getElementById("dragElement");
      var dragData = "Hello, World!"; // Set the data to be transferred

      // Set the drag data and effect
      event.dataTransfer.setData("text/plain", dragData);
      event.dataTransfer.effectAllowed = "move";

      // Styling the drag element during drag
      dragElement.style.opacity = "0.5";
      dragElement.style.backgroundColor = "red";
      dragElement.style.color = "black";
    }

    function handleDragEnter(event) {
      var dropArea = document.getElementById("dropArea");
      dropArea.classList.add("highlight");
    }

    function handleDragOver(event) {
      event.preventDefault();
    }

    function handleDragLeave(event) {
      var dropArea = document.getElementById("dropArea");
      dropArea.classList.remove("highlight");
    }

    function handleDrop(event) {
      event.preventDefault();
      var dropArea = document.getElementById("dropArea");
      var dragData = event.dataTransfer.getData("text/plain");

      // Update the drop area content
      dropArea.textContent = "Dropped: " + dragData;

      // Reset the styling of the drag element after drop
      var dragElement = document.getElementById("dragElement");
      dragElement.style.opacity = "1";
      dragElement.style.backgroundColor = "blue";
      dragElement.style.color = "white";
    }
  </script>
</body>
</html>

Explanation:

In this example, the ondragleave event is attached to the <div> element with the id “dropArea”. When a draggable element is dragged out of the drop area, the handleDragLeave() function is called. Additionally, the ondragenter event is attached to the <div> to trigger the handleDragEnter() function when the draggable element is dragged into the drop area. The ondragover event is attached to the <div> to trigger the handleDragOver() function, and the ondrop event is attached to the <div> to trigger the handleDrop() function when the draggable element is dropped onto the drop area.
Inside the handleDragEnter() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “dropArea” using document.getElementById(). It then adds a CSS class called “highlight” to the drop area using the classList.add() method. This class applies a dashed red border to the drop area, visually highlighting it.
Inside the handleDragOver() function, the event object is passed as a parameter (event). The function calls event.preventDefault() to allow the draggable element to be dropped onto the drop area.
Inside the handleDragLeave() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “dropArea” using document.getElementById(). It then removes the CSS class called “highlight” from the drop area using the classList.remove() method, removing the dashed red border.
Inside the handleDrop() function, the event object is passed as a parameter (event). The function calls event.preventDefault() to prevent the default handling of the drop event. It then retrieves the <div> element with the id “dropArea” using document.getElementById(). The function also retrieves the data that was set during the drag start event using event.dataTransfer.getData(). Explanation:In this example, the data is a simple string, “Hello, World!”.
The function updates the text content of the drop area to display the dropped data. It then resets the styling of the drag element to its original state using JavaScript.
As the draggable element is dragged into the drop area, the handleDragEnter() function is triggered, and the drop area is highlighted.
When the draggable element is dragged over the drop area, the handleDragOver() function is triggered, and the draggable element can be dropped onto the drop area.
If the draggable element is dragged out of the drop area, the handleDragLeave() function is triggered, and the highlight is removed from the drop area.
When the draggable element is dropped onto the drop area, the handleDrop() function is triggered. It updates the drop area content and resets the styling of the drag element.
You can modify the logic inside the handleDragStart(), handleDragEnter(), handleDragOver(), handleDragLeave(), and handleDrop() functions to perform any desired actions during the drag and drop operations.

Note: The ondragleave event is used to apply visual cues or actions when the draggable element is dragged out of a drop area. It works in conjunction with the ondragenter, ondragover, and ondrop events to implement drag and drop functionality.

ondrop: complete code

Here’s an example of a complete HTML code that demonstrates the usage of the ondrop event:

<!DOCTYPE html>
<html>
<head>
  <title>Drop Event Example</title>
  <style>
    .drag-element {
      width: 100px;
      height: 100px;
      background-color: blue;
      color: white;
      text-align: center;
      line-height: 100px;
    }
    .drop-area {
      width: 200px;
      height: 200px;
      background-color: lightgray;
      margin-top: 20px;
    }
  </style>
</head>
<body>
  <h1>Drop Event Example</h1>

  <div id="dragElement" class="drag-element" draggable="true" ondragstart="handleDragStart(event)">Drag me!</div>

  <div id="dropArea" class="drop-area" ondragenter="handleDragEnter(event)" ondragover="handleDragOver(event)" ondragleave="handleDragLeave(event)" ondrop="handleDrop(event)"></div>

  <script>
    function handleDragStart(event) {
      var dragElement = document.getElementById("dragElement");
      var dragData = "Hello, World!"; // Set the data to be transferred

      // Set the drag data and effect
      event.dataTransfer.setData("text/plain", dragData);
      event.dataTransfer.effectAllowed = "move";

      // Styling the drag element during drag
      dragElement.style.opacity = "0.5";
      dragElement.style.backgroundColor = "red";
      dragElement.style.color = "black";
    }

    function handleDragEnter(event) {
      var dropArea = document.getElementById("dropArea");
      dropArea.style.backgroundColor = "green";
    }

    function handleDragOver(event) {
      event.preventDefault();
    }

    function handleDragLeave(event) {
      var dropArea = document.getElementById("dropArea");
      dropArea.style.backgroundColor = "lightgray";
    }

    function handleDrop(event) {
      event.preventDefault();
      var dropArea = document.getElementById("dropArea");
      var dragData = event.dataTransfer.getData("text/plain");

      // Update the drop area content
      dropArea.textContent = "Dropped: " + dragData;

      // Reset the styling of the drag element after drop
      var dragElement = document.getElementById("dragElement");
      dragElement.style.opacity = "1";
      dragElement.style.backgroundColor = "blue";
      dragElement.style.color = "white";
    }
  </script>
</body>
</html>

Explanation:

In this example, the ondrop event is attached to the <div> element with the id “dropArea”. When a draggable element is dropped onto the drop area, the handleDrop() function is called. Additionally, the ondragenter event is attached to the <div> to trigger the handleDragEnter() function when the draggable element is dragged into the drop area.
The ondragover event is attached to the <div> to trigger the handleDragOver() function, and the ondragleave event is attached to the <div> to trigger the handleDragLeave() function when the draggable element is dragged out of the drop area.
Inside the handleDragStart() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “dragElement” using document.getElementById(). It then sets the data to be transferred during the drag operation using event.dataTransfer.setData(). Explanation:In this example, the data is set as a simple string, “Hello, World!”.
The function also sets the effectAllowed property of the dataTransfer object to specify the allowed drag effect. In this case, it is set to “move” to indicate that the element can be moved.
Additionally, the function applies some styling changes to the drag element using JavaScript. The opacity, background color, and text color are modified to provide a visual cue that the element is being dragged.
Inside the handleDragEnter() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “dropArea” using document.getElementById(). It then modifies the background color of the drop area to indicate that the draggable element is entering it.
Inside the handleDragOver() function, the event object is passed as a parameter (event). The function calls event.preventDefault() to allow the draggable element to be dropped onto the drop area.
Inside the handleDragLeave() function, the event object is passed as a parameter (event). The function retrieves the <div> element with the id “dropArea” using document.getElementById(). It then resets the background color of the drop area to its original state.
Inside the handleDrop() function, the event object is passed as a parameter (event). The function calls event.preventDefault() to prevent the default handling of the drop event. It then retrieves the <div> element with the id “dropArea” using document.getElementById(). The function also retrieves the data that was set during the drag start event using event.dataTransfer.getData(). Explanation:In this example, the data is a simple string, “Hello, World!”.
The function updates the text content of the drop area to display the dropped data. It then resets the styling of the drag element to its original state using JavaScript.
10.As the draggable element is dropped onto the drop area, the handleDrop() function is triggered, and the appropriate actions are taken.
11.You can modify the logic inside the handleDragStart(), handleDragEnter(), handleDragOver(), handleDragLeave(), and handleDrop() functions to perform any desired actions during the drag and drop operations.

Note: The ondrop event is used to handle the dropping of a draggable element onto a drop area. It works in conjunction with the ondragenter, ondragover, and ondragleave events to implement drag and drop functionality.

Quiz with answers

Here’s a multiple-choice quiz to test your understanding of the JavaScript form events covered in this lesson:

1-Which JavaScript event is triggered when a form is submitted?

a) onsubmit

b) onreset

c) onchange

d) onfocus

2-Which JavaScript event is triggered when a form is reset?

a) onsubmit

b) onreset

c) onchange

d) onfocus

3-Which JavaScript event is triggered when the value of an input element is changed?

a) onsubmit

b) onreset

c) onchange

d) onfocus

4-Which JavaScript event is triggered when an input element gains focus?

a) onsubmit

b) onreset

c) onchange

d) onfocus

5-Which JavaScript event is triggered when an input element loses focus?

a) onsubmit

b) onreset

c) onchange

d) onblur

6-Which JavaScript event is triggered when the types into an input element?

a) onsubmit

b) onreset

c) onchange

d) oninput

7-Which JavaScript event is triggered when a key is pressed down?

a) onkeydown

b) onkeypress

c) onkeyup

d) onkeypressdown

8-Which JavaScript event is triggered when a key is pressed and released?

a) onkeydown

b) onkeypress

c) onkeyup

d) onkeypressdown

9-Which JavaScript event is triggered when text is selected in an input element?

a) onselect

b) onchange

c) oninput

d) onfocus

10-Which JavaScript event is triggered when the right mouse button is clicked to open the context menu?

a) oncontextmenu

b) onmousedown

c) onmouseup

d) onmouseover

11-Which JavaScript event is triggered when the mouse pointer enters an element?

a) onmouseenter

b) onmouseleave

c) onmouseover

d) onmouseout

12-Which JavaScript event is triggered when the mouse pointer leaves an element?

a) onmouseenter

b) onmouseleave

c) onmouseover

d) onmouseout

13-Which JavaScript event is triggered when the mouse pointer moves over an element?

a) onmouseenter

b) onmouseleave

c) onmouseover

d) onmousemove

14-Which JavaScript event is triggered when the mouse button is pressed down on an element?

a) onmousedown

b) onmouseup

c) onmousemove

d) onmouseover

15-Which JavaScript event is triggered when the mouse button is released after being pressed down on an element?

a) onmousedown

b) onmouseup

c) onmousemove

d) onmouseover

Answers

1-a 2-b 3-c 4-d 5-d 6-d 7-a 8-c 9-a 10-a 11-a 12-b 13-d 14-a 15-b

Quiz 2

1-Which JavaScript event is triggered when an element is being dragged?

a) ondragstart

b) ondrag

c) ondragend

d) ondragover

2-Which JavaScript event is triggered when an element is being dragged over a drop area?

a) ondragstart

b) ondrag

c) ondragend

d) ondragover

3-Which JavaScript event is triggered when an element is being dragged out of a drop area?

a) ondragstart

b) ondrag

c) ondragend

d) ondragleave

4-Which JavaScript event is triggered when an element is being dropped onto a drop area?

a) ondragstart

b) ondrag

c) ondragend

d) ondrop

5-Which JavaScript event is triggered when the dragging of an element ends?

a) ondragstart

b) ondrag

c) ondragend

d) ondrop

6-Which JavaScript event is triggered when a form element receives focus, including its child elements?

a) onfocusin

b) onfocusout

c) onmouseenter

d) onmouseleave

7-Which JavaScript event is triggered when a form element loses focus, including its child elements?

a) onfocusin

b) onfocusout

c) onmouseenter

d) onmouseleave

8-Which JavaScript event is triggered when the right mouse button is clicked on an element to open the context menu?

a) oncontextmenu

b) onmousedown

c) onmouseup

d) onmouseover

9-Which JavaScript event is triggered when the mouse pointer enters an element or any of its child elements?

a) onmouseenter

b) onmouseleave

c) onmouseover

d) onmouseout

10-Which JavaScript event is triggered when the mouse pointer leaves an element or any of its child elements?

a) onmouseenter

b) onmouseleave

c) onmouseover

d) onmouseout

Select the correct letter corresponding to the answer for each question. Good luck!

1-a 2-d 3-d 4-d 5-c 6-a 7-b 8-a 9-c 10-b

Quiz 3

1-Which JavaScript event is triggered when the drags the mouse pointer over an element?

a) ondragstart

b) ondrag

c) ondragend

d) onmousemove

2-Which JavaScript event is triggered when the starts dragging an element?

a) ondragstart

b) ondrag

c) ondragend

d) ondragover

3-Which JavaScript event is triggered when the finishes dragging an element?

a) ondragstart

b) ondrag

c) ondragend

d) ondrop

4-Which JavaScript event is triggered when the selects text in an element?

a) onselect

b) onchange

c) oninput

d) onfocus

5-Which JavaScript event is triggered when the clicks a mouse button on an element?

a) onclick

b) onmousedown

c) onmouseup

d) onmouseover

6-Which JavaScript event is triggered when the releases a mouse button after clicking on an element?

a) onclick

b) onmousedown

c) onmouseup

d) onmouseout

7-Which JavaScript event is triggered when the moves the mouse pointer inside an element?

a) onmousemove

b) onmouseenter

c) onmouseleave

d) onmouseover

8-Which JavaScript event is triggered when the moves the mouse pointer out of an element?

a) onmousemove

b) onmouseenter

c) onmouseleave

d) onmouseout

9-Which JavaScript event is triggered when the right-clicks on an element to open the context menu?

a) oncontextmenu

b) onmousedown

c) onmouseup

d) onmouseover

10-Which JavaScript event is triggered when the hovers the mouse pointer over an element?

a) onmouseenter

b) onmouseleave

c) onmouseover

d) onmouseout

Select the correct letter corresponding to the answer for each question. Good luck!

1-d 2-a 3-c 4-a 5-b 6-c 7-a 8-c 9-a 10-c

11-Which JavaScript event is triggered when the presses a keyboard key?

a) onkeydown

b) onkeypress

c) onkeyup

d) onkeytype

12-Which JavaScript event is triggered when the releases a keyboard key?

a) onkeydown

b) onkeypress

c) onkeyup

d) onkeytype

13-Which JavaScript event is triggered when the starts typing into an input field?

a) onkeydown

b) onkeypress

c) onkeyup

d) oninput

14-Which JavaScript event is triggered when the changes the value of an input field?

a) onsubmit

b) onreset

c) onchange

d) oninput

15-Which JavaScript event is triggered when the clicks outside of an input field to remove focus?

a) onsubmit

b) onreset

c) onchange

d) onblur

Select the correct letter corresponding to the answer for each question. Good luck!

1-a 2-c 3-b 4-c 5-d

JavaScript Tutorial

Curriculum

JavaScript Form Events: A Comprehensive Guide to Handling Form Events