JavaScript and DOM Crash Course (Part 3)

Jul 18, 2024

JavaScript and DOM Crash Course (Part 3)

Topics Covered

  • Introduction to Events in JavaScript
  • Mouse Events
  • Keyboard Events
  • Handling Events with Event Listeners

Setting Up Event Listeners

  • Best Practices for Event Listeners
    • Avoid in-line event handling (e.g., onclick="alert('1')")
    • Use addEventListener method for better code organization

Practical Example: Adding a Button

  • Create a button in HTML:

    <button class="btn btn-primary btn-block" id="button">Click Here</button>
    
  • Set up event listener in JavaScript:

    const button = document.getElementById('button');
    button.addEventListener('click', function() {
      console.log('Button clicked');
    });
    

Interacting with DOM Elements

  • Change text content and styles through events:
    document.getElementById('header-title').textContent = 'Changed';
    document.querySelector('#main').style.backgroundColor = 'lightgray';
    

Working with Event Object

  • Access event-related information through event object e
  • Example properties:
    • e.target – the element that triggered the event
    • e.type – the type of event
    • e.clientX, e.clientY – mouse position relative to the browser window
    • e.offsetX, e.offsetY – mouse position relative to the element
    • e.altKey, e.ctrlKey, e.shiftKey – check if these keys are held down

Practical Examples

  • Console Logging Event Properties
    button.addEventListener('click', function(e) {
      console.log(e.target.id); // Logs the ID of the clicked element
      console.log(e.type);      // Logs the type of event
    });
    
  • Changing Element Properties
    const output = document.getElementById('output');
    output.innerHTML = `<h3>${e.target.id}</h3>`;
    
  • Mouse Events
    • click: Fires when an element is clicked
    • dblclick: Fires on double click
    • mousedown: Fires when the mouse button is pressed down
    • mouseup: Fires when the mouse button is released
    • Example:
      const div = document.getElementById('box');
      div.addEventListener('mouseenter', ...);
      div.addEventListener('mouseleave', ...);
      

Keyboard Events

  • Tracking keyboard inputs in a text box
    const input = document.querySelector('input[type="text"]');
    input.addEventListener('keydown', ...);
    input.addEventListener('keyup', ...);
    input.addEventListener('keypress', ...);
    
  • Focus and Blur Events
    • focus: Fires when an element receives focus
    • blur: Fires when an element loses focus
    input.addEventListener('focus', runEvent);
    input.addEventListener('blur', runEvent);
    
  • Cut, Copy, Paste Events
    input.addEventListener('cut', runEvent);
    input.addEventListener('paste', runEvent);
    

Form and Select Box Events

  • Handling form submission

    const form = document.querySelector('form');
    form.addEventListener('submit', function(e) {
      e.preventDefault(); // Prevents page reload
      runEvent(e);
    });
    
  • Handling change event in a select box

    const select = document.querySelector('select');
    select.addEventListener('change', function(e) {
      console.log(e.target.value); // Logs the selected option value
    });
    

In Summary

  • Events are crucial for making web pages interactive
  • Use addEventListener for better code organization
  • Familiarize yourself with various types of events (mouse, keyboard, form, etc.)
  • Leverage the event object for detailed event information

Next Steps

  • Building a small application to apply these concepts
  • Implementing add and delete item features in a list

[End of Transcript]