JavaScript Event Listener Examples: Click, Mouseover, and More

📚 Quick Study Guide

• 🖱️ Event Listeners: Listen for specific events (e.g., click, mouseover) on HTML elements.
• 🎯 addEventListener(): Method used to attach an event listener to an element. Syntax: `element.addEventListener(event, function)`
• 👆 Click Event: Triggered when an element is clicked. Example: `button.addEventListener('click', function() { ... });`
• 👋 Mouseover Event: Triggered when the mouse pointer enters an element. Example: `element.addEventListener('mouseover', function() { ... });`
• ⌨️ Keydown Event: Triggered when a key is pressed. Example: `document.addEventListener('keydown', function(event) { ... });`
• 📜 Common Events: `click`, `mouseover`, `mouseout`, `keydown`, `keyup`, `submit`, `load`.
• 🛑 Removing Listeners: Use `removeEventListener(event, function)` to detach a listener.

🧪 Practice Quiz

1. Which method is used to attach an event listener to an HTML element?
   1. addEventListener()
   2. attachEvent()
   3. listenEvent()
   4. bindEvent()
2. Which event is triggered when the mouse pointer enters an element?
   1. click
   2. mouseover
   3. mouseout
   4. mousedown
3. What is the first argument of the `addEventListener()` method?
   1. The function to execute
   2. The event type
   3. The element itself
   4. The options object
4. Which event is triggered when a key is pressed?
   1. keypress
   2. keydown
   3. keyup
   4. textInput
5. How do you remove an event listener?
   1. removeEventListener()
   2. detachEventListener()
   3. deleteEventListener()
   4. clearEventListener()
6. Which event is commonly used for form submissions?
   1. change
   2. input
   3. submit
   4. formSubmit
7. What does the `event` object contain?
   1. Information about the event that occurred
   2. The target element
   3. A list of all event listeners
   4. Only the event type