Science Knowings: JavaScript Course For Social Media

Form Events

Summary of Event Propagation

Welcome back! In the last session, we discussed Event Propagation and how events bubble up from the target element to the document object. In this session, we'll shift our focus to Form Events!

What are Form Events?

Form events are a type of DOM event that occurs when a user interacts with a form element, such as a text input, button, or checkbox. They provide a way for you to capture user input and respond accordingly.

Why Use Form Events?

  • Validate user input
  • Handle user actions
  • Provide feedback to users
  • Control the flow of your application

Types of Form Events

There are three main categories of form events:

  • Input Events: Occurs when the value of a form element changes.
  • Form Events: Occurs when the form itself is submitted or reset.
  • Mouse Events: Occurs when the mouse is clicked, moved, or released over a form element.

Input Events

Common input events include:

  • onchange: Occurs when the value of an input element changes.
  • oninput: Occurs when the value of an input element changes, including programmatic changes.
  • onfocus: Occurs when an input element receives focus.
  • onblur: Occurs when an input element loses focus.

Form Events

Common form events include:

  • onsubmit: Occurs when a form is submitted.
  • onreset: Occurs when a form is reset.

Mouse Events

Common mouse events include:

  • onclick: Occurs when a mouse button is clicked over a form element.
  • onmousemove: Occurs when the mouse is moved over a form element.
  • onmouseup: Occurs when a mouse button is released over a form element.

Keyboard Events

Common keyboard events include:

  • onkeydown: Occurs when a key is pressed down.
  • onkeyup: Occurs when a key is released.
  • onkeypress: Occurs when a key is pressed and released.

Handling Form Events

There are two main ways to handle form events:

  1. Event Listeners: You can add event listeners to form elements using the addEventListener() method.
  2. Event Handling Attributes: You can also assign event handlers to form elements using HTML attributes, such as onclick and onsubmit.

Event Listeners

To add an event listener to a form element using JavaScript, you can use the addEventListener() method. The syntax is as follows:

element.addEventListener(event, function, useCapture);

Where:

  • element is the form element you want to add the event listener to.
  • event is the event you want to listen for.
  • function is the function you want to execute when the event occurs.
  • useCapture is an optional parameter that specifies whether the event should be handled during the capture phase or the bubbling phase (defaults to false).

Event Handling Attributes

You can also assign event handlers to form elements using HTML attributes. The syntax is as follows:

<element event="function">

Where:

  • element is the form element you want to assign the event handler to.
  • event is the event you want to handle.
  • function is the JavaScript function you want to execute when the event occurs.

Event Object

When an event occurs, a corresponding event object is created. This object contains information about the event, such as the target element, the type of event, and the mouse coordinates.

Form Event Properties

The following properties are commonly used with form events:

  • target: The element that triggered the event.
  • type: The type of event that occurred.
  • bubbles: A boolean value indicating whether the event bubbles up the DOM tree.
  • cancelable: A boolean value indicating whether the event can be canceled.

Form Event Methods

The following methods are commonly used with form events:

  • preventDefault(): Prevents the default action of the event from occurring.
  • stopPropagation(): Stops the event from bubbling up the DOM tree.

Summary of Form Events

In this session, we covered the basics of form events, including the different types of form events, how to handle form events, the event object, and common form event properties and methods.

Next Topic: Event Delegation

In the next session, we'll discuss Event Delegation, a technique for improving the performance of your applications by attaching event listeners to parent elements instead of individual elements.