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]