Manipulating Events with JavaScript

From Basic to Advanced: Complete DOM Manipulation Course

Sobre a Aula

Event Manipulation with JavaScript

Now that we have a basic understanding of events, let’s explore more advanced techniques of event manipulation using JavaScript. This will allow us to create even more engaging and personalized user experiences.

Adding Events with addEventListener

The addEventListener function in JavaScript is a powerful tool for capturing events. Let’s take the previous example of the button and add a click event using JavaScript:

var myButton = document.getElementById('myButton');

myButton.addEventListener('click', function() {
  // Code to be executed when the button is clicked
  alert('You clicked the button!');
});

Here, we’re adding an event listener to the button. When the button is clicked, the anonymous function inside addEventListener is executed.

Removing Events with removeEventListener

To remove an event listener, we need to have a reference to the same function that was used to add the listener. Let’s see an example:

function myFunction() {
  alert('The event was triggered!');
}

var myButton = document.getElementById('myButton');

// Adding the listener
myButton.addEventListener('click', myFunction);

// Removing the listener after 5 seconds
setTimeout(function() {
  myButton.removeEventListener('click', myFunction);
  alert('The listener has been removed!');
}, 5000);

Keyboard Event

Let’s add a keyboard event to a text field. In this example, we’ll display an alert whenever a key is pressed in the field:

var myTextField = document.getElementById('myTextField');

myTextField.addEventListener('keydown', function() {
  alert('A key was pressed in the text field!');
});

Try pressing keys in the text field and see the alert in action.

Adding Visual Effects with Events

Let’s create an example where an element stands out when the mouse hovers over it. We’ll use the mouseover (when the mouse enters) and mouseout (when the mouse leaves) events:

var myElement = document.getElementById('myElement');

// Adding highlight when the mouse enters
myElement.addEventListener('mouseover', function() {
  myElement.style.backgroundColor = 'lightyellow';
});

// Removing highlight when the mouse leaves
myElement.addEventListener('mouseout', function() {
  myElement.style.backgroundColor = ''; // Returns to the original state
}

In this example, we change the background color of the element when the mouse enters and restore it when the mouse leaves, creating a pleasant visual effect.

Here’s the full code

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Adding Visual Effects with Events</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

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

<script src="script.js"></script>
</body>
</html>

CSS (styles.css):

#myElement {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  transition: background-color 0.3s ease;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
}

JavaScript (script.js):

var myElement = document.getElementById('myElement');

// Adding highlight when the mouse enters
myElement.addEventListener('mouseover', function() {
  myElement.style.backgroundColor = 'lightyellow';
});

// Removing highlight when the mouse leaves
myElement.addEventListener('mouseout', function() {
  myElement.style.backgroundColor = ''; // Returns to the original state
});

Output of code

Adding Visual Effects with Events

Hover over me

Adding Animations with Events:

Let’s now add an animation to a button click. We’ll use the CSS animation class created in the previous Module 3:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Example of Events with Animation</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>

<button id="myButton" onclick="startAnimation()">Click to Animate</button>

<script src="script.js"></script>
</body>
</html>

JavaScript (script.js):

function startAnimation() {
  var myButton = document.getElementById('myButton');

  // Adding the animation class
  myButton.classList.add('animation');

  // Removing the class after the animation
  myButton.addEventListener('animationend', function() {
    myButton.classList.remove('animation');
  });
}

Here, we add the animation class when the button is clicked. Additionally, we use the animationend event to remove the class after the animation is complete, allowing it to be triggered again.

Output of code

Example of Events with Animation

Event manipulation is an essential tool for creating interactive and dynamic web pages. With it, we can respond to user actions in a personalized way and create more engaging experiences.

To enhance your skills in event manipulation, practice adding and removing events on different elements. You can start with simple events like click and mouseover, and then progress to more complex events like keydown and resize.

In the next module, we will explore advanced navigation and manipulation in the DOM. This will give us more control over the document structure and allow us to create even more complex and interactive web pages.

Siga-me

Entrar na conversa