Lecture Notes: JavaScript Event Listeners

Introduction

• Event listeners in JavaScript allow code execution based on user interactions.
• Common interactions include clicking buttons, entering text, and pressing keys.
• Focus on understanding event listeners through code examples.

Setting Up Event Listeners

• HTML & JavaScript Setup:

  • Ensure you have an HTML element and JavaScript file linked using the defer attribute.
  • Retrieve the element using JavaScript, e.g., const button = document.getElementById('myButton');.

• Adding Event Listener:

  • Use button.addEventListener(eventType, functionName);.
  • Example event type: 'click'.
  • Example function: doSomething() that can, for instance, trigger an alert.

Example Use Cases

• Simple Applications:
  • Create a counter that increments on button clicks (similar to Cookie Clicker).
  • Toggle classes to change styles upon clicking.

Common Event Types

• Mouse Events:

  • click: Triggered on element click.
  • mouseover: Triggered when hovering over an element.
  • mouseout: Triggered when the mouse leaves an element.

• Keyboard Events:

  • Event Listener on Window:
    • Listen for keydown events to detect key presses.
    • Use the event object e to access information like key codes.
  • Console Logging Events:
    • Log key codes to console, useful in developing simple browser games.

Advanced Event Handling

• Inline Function Definition:

  • Define functions directly within addEventListener parentheses.

• Using Event Object:

  • event object provides details of the event.
  • Example: logging key press details using console.log(e).

Input Event

• Event Type: input:

  • Triggered every time a letter is entered in an input field.
  • Example use: Update a heading live as text is typed.

• Target Property:

  • event.target provides information on the element where the event occurred.

Event Listener Options

• Options Object:
  • Provides additional configurations for event listeners.
  • Example: Boolean once option to restrict listener to a single trigger.

Conclusion

• Event listeners are powerful tools in JavaScript for interactive web applications.
• Explore the vast options and configurations available for deeper implementations.
• For more learning, subscribe to the channel "Coding to Go".