Progressive Full Stack Application Development with Live Projects

Shopping cart
No products in the cart.
Event Handling in JavaScript
JavaScript Lesson

Event Handling in JavaScript

Event handling in JavaScript allows us to execute code in response to user actions or other events on a web page. In this lesson we will understand how to work with events in JavaScript with examples that

Basic Concepts

1. Events: These are actions or occurrences that happen in the system you’re working with, which the system tells you about so you can respond to them. For example, a mouse click, keypress, or page load.

2. Event Listeners: These are functions that wait for events to occur and then execute code in response to those events.

Adding Event Listeners

You can add event listeners to HTML elements using JavaScript. Here are some common methods:

1. Using addEventListener Method:

<button id="myButton">Click me</button>
<script>
  const button = document.getElementById('myButton');
  
  button.addEventListener('click', function() {
    alert('Button was clicked!');
  });
</script>

2. Using Inline Event Handlers:

<button onclick="alert('Button was clicked!')">Click me</button>

Note: Inline event handlers are not recommended for larger projects as they mix HTML and JavaScript code.

Common Events and Examples

1. Click Event:

<button id="clickMe">Click me</button>
<script>
  document.getElementById('clickMe').addEventListener('click', function() {
    console.log('Button clicked!');
  });
</script>

2. Mouseover Event:

<div id="hoverMe" style="width: 100px; height: 100px; background-color: lightblue;"></div>
<script>
  document.getElementById('hoverMe').addEventListener('mouseover', function() {
    this.style.backgroundColor = 'lightcoral';
  });
  document.getElementById('hoverMe').addEventListener('mouseout', function() {
    this.style.backgroundColor = 'lightblue';
  });
</script>

3. Keyboard Event:

<input type="text" id="textInput" placeholder="Type something">
<script>
  document.getElementById('textInput').addEventListener('keypress', function(event) {
    console.log(`Key pressed: ${event.key}`);
  });
</script>

4. Submit Event:

<form id="myForm">
  <input type="text" name="name" required>
  <button type="submit">Submit</button>
</form>
<script>
  document.getElementById('myForm').addEventListener('submit', function(event) {
    event.preventDefault(); // Prevent the default form submission
    alert('Form submitted!');
  });
</script>

5. Window Load Event:

If we want to be notified when a web page has fully loaded in the browser window, we can listen to the “load” event triggered by the window.

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

Event Object

When an event occurs, an event object is passed to the event handler function. This object contains useful information about the event.

<button id="myButton">Click me</button>
<script>
  document.getElementById('myButton').addEventListener('click', function(event) {
    console.log('Event type:', event.type); // 'click'
    console.log('Target element:', event.target); // The button element
  });
</script>

Removing Event Listeners

You can remove an event listener using the removeEventListener method, but you must provide the exact function reference used with addEventListener.

<button id="myButton">Click me</button>
<script>
  function handleClick() {
    alert('Button was clicked!');
  }

  const button = document.getElementById('myButton');
  button.addEventListener('click', handleClick);

  // Remove the event listener
  button.removeEventListener('click', handleClick);
</script>

Conclusion

Event handling is crucial for creating interactive web applications. By using addEventListener, you can handle a variety of user interactions and system events, making your web pages dynamic and responsive. Always remember to handle events appropriately and to clean up event listeners when they are no longer needed.

Leave a Reply