Events are actions that can be triggered by users or the system. For example, clicking a button or hovering over an element are events. JavaScript allows us to execute code in response to these events by using event listeners.

Adding an Event Listener

To add an event listener to an element, we can use the addEventListener() method. This method takes two arguments: the type of event to listen for and a function to execute when the event occurs.

Here is an example of adding a click event listener to a button element:

const button = document.querySelector('button');

button.addEventListener('click', function() {
  console.log('Button was clicked');
});

In this example, we first select the button element using querySelector(). Then, we use the addEventListener() method on the button element to listen to the click event. When the event occurs, the anonymous function that we provided as the second argument will be executed.

We can also use arrow functions as the event listener function, like this:

button.addEventListener('click', () => {
  console.log('Button was clicked');
});

Using onclick and similar properties:

The onclick property is an event property of elements in an HTML document that can be used to execute a script when an element is clicked. It is similar to the addEventListener() method, but it is a property of the element rather than a method that is called on the element.

Here is an example of using the onclick property to log a message to the console when a button is clicked:

<button onclick="console.log('Button was clicked')">Click me</button>

or,

const button = document.querySelector('button');
button.onclick = function() {
  console.log('Button was clicked');
};

There are also other event properties that can be used in a similar way, such as onmouseover, onfocus, and onload.

One disadvantage of using these event properties is that they can only be used to specify a single function for the event. If you need to add multiple event listeners for the same event, you will need to use the addEventListener() method instead.

Another disadvantage is that the function specified by the event property is not bound to the element, which means that the this keyword will not refer to the element in the function. To get a reference to the element, you can use the event.target property.

In general, it is recommended to use the addEventListener() method instead of the event properties, as it is more flexible and has fewer limitations. However, there may be cases where using the event properties is more convenient, especially in simple scripts.

Removing an Event Listener

To remove an event listener, we can use the removeEventListener() method. This method takes the same arguments as addEventListener() and is called on the same element.

Here is an example of removing a click event listener from a button element:

button.removeEventListener('click', function() {
  console.log('Button was clicked');
});

Here is a list of some commonly used events in JavaScript:

• click: triggered when an element is clicked
• submit: triggered when a form is submitted
• focus: triggered when an element receives focus
• blur: triggered when an element loses focus
• change: triggered when the value of an element changes
• mouseenter: triggered when the mouse enters an element
• mouseleave: triggered when the mouse leaves an element
• keydown: triggered when a key is pressed down
• keyup: triggered when a key is released
• load: triggered when a page or element finishes loading

This is just a small selection of the events that are available in JavaScript. You can find a complete list of events in the MDN documentation.

---

Creating Interactive Websites with JavaScript

Now that we know how to handle events in JavaScript, we can use this knowledge to create interactive websites. Here are a few examples of ways we can use JavaScript to create interactivity:

Showing and Hiding Elements

We can use JavaScript to show or hide elements on the page based on user interaction. To do this, we can use the style property of an element to change its display value.

Here is an example of a function that toggles the visibility of an element:

function toggleVisibility(element) {
  if (element.style.display === 'none') {
    element.style.display = 'block';
  } else {
    element.style.display = 'none';
  }
}

To use this function, we can call it and pass in the element that we want to toggle the visibility of. For example:

const element = document.querySelector('.my-element');

toggleVisibility(element);

Changing Element Styles

We can also use JavaScript to change the styles of elements on the page. To do this, we can use the style property of an element and set the value of the style that we want to change.

Here is an example of a function that changes the color of an element:

function changeColor(element, color) {
  element.style.color = color;
}

To use this function, we can call it and pass in the element that we want to change the color of, as well as the color that we want to set.

Adding and Removing Classes

We can also use JavaScript to add or remove classes from elements. This can be useful for applying styles or changing the behavior of elements.

To add a class to an element, we can use the classList.add() method. To remove a class, we can use the classList.remove() method.

Here is an example of a function that toggles a class on an element:

function toggleClass(element, className) {
  if (element.classList.contains(className)) {
    element.classList.remove(className);
  } else {
    element.classList.add(className);
  }
}

To use this function, we can call it and pass in the element that we want to toggle the class on, as well as the class name.

Handling Form Input

JavaScript can also be used to handle form input. We can use the value property of form elements to get the current value of the input, and the addEventListener() method to listen for events such as the submit event on a form element.

Here is an example of a function that logs the values of all the inputs in a form when the form is submitted:

function handleFormSubmit(event) {
  event.preventDefault();
  const form = event.target;
  const inputs = form.elements;
  for (let i = 0; i < inputs.length; i++) {
    console.log(inputs[i].value);
  }
}

const form = document.querySelector('form');
form.addEventListener('submit', handleFormSubmit);

In this example, we use the preventDefault() method on the event object to prevent the default behavior of the form submission (which is to refresh the page). Then, we get the form element from the event target and the input elements from the form. Finally, we use a loop to iterate through the input elements and log their values to the console.

---

Practice Exercise

Here is a list of practice exercises using the concepts from the tutorial in real-life scenarios:

1. Creating a toggle switch: Create a switch that can be clicked to toggle between two states (e.g. on and off). When the switch is clicked, the state should change and a message should be displayed to the user indicating the new state.
2. Validating a form: Create a form with various input fields (e.g. text, email, password). Use JavaScript to validate the form before it is submitted. Display error messages to the user if any of the fields are invalid.
3. Filtering a list: Create a list of items and a search field. Use JavaScript to filter the list as the user types in the search field. Only show the items that match the search query.
4. Creating a carousel: Create a carousel that displays a series of images. Add buttons to navigate between the images and have the carousel automatically rotate through the images at a set interval.
5. Building a calculator: Create a simple calculator that allows the user to perform basic math operations (e.g. addition, subtraction, multiplication, division). Use JavaScript to update the result as the user enters numbers and selects operations.

---

We have learned how to handle events in JavaScript and use this knowledge to create interactive websites. We have seen examples of showing and hiding elements, changing element styles, adding and removing classes, and handling form input. With these techniques, you can create dynamic and engaging user experiences on your websites.