DOM Manipulation u0026 Event Handling Quiz: Test Your Knowledge! Quiz

1. Question 1: Selecting Elements

   Which method is used to select the first element in the document with the ID 'myElement'?

   1. document.getElementByClass('myElement')
   2. document.querySelector('#myElement')
   3. document.getElementById('myElement')
   4. document.querySelectAll('#myElement')
   5. document.getElementByName('myElement')

2. Question 2: Adding Event Listeners

   Which method is the correct way to attach an event listener to a button with the ID 'myButton' to listen for a click?

   1. myButton.attachEvent('onclick', myFunction)
   2. document.getElementById('myButton').addEventListener('click', myFunction)
   3. myButton.on('click', myFunction)
   4. document.getElementById('myButton').onClick = myFunction
   5. addEventListener('click', myFunction, 'myButton')

3. Question 3: Changing Element Content

   How do you change the text content of an HTML element with the ID 'myParagraph' to 'Hello World!' using JavaScript?

   1. document.getElementById('myParagraph').innerHTML = 'Hello World!';
   2. document.getElementById('myParagraph').textContent = 'Hello World!';
   3. document.getElementById('myParagraph').innerText = 'Hello World!';
   4. myParagraph.value = 'Hello World!'
   5. All of the above are correct

4. Question 4: Preventing Default Behavior

   Which method is used to prevent the default behavior of an HTML form submission?

   1. event.preventDefault()
   2. event.stopPropagation()
   3. event.stopImmediatePropagation()
   4. return false;
   5. stopDefault()

5. Question 5: Event Bubbling

   What is event bubbling in the context of DOM event handling?

   1. The process of an event handler being executed multiple times on the same element.
   2. The process of an event propagating from the target element up the DOM tree to its parent elements.
   3. The process of preventing an event from reaching its target element.
   4. A technique for capturing events before they reach their target.
   5. A method for cloning events and triggering them on other elements.

6. Question 6: Creating New Elements

   Which method is used to create a new HTML element in JavaScript?

   1. document.createElement()
   2. new Element()
   3. document.newElement()
   4. createElement()
   5. document.addElement()

7. Question 7: Removing Event Listeners

   What method removes an event listener that was previously attached to an element?

   1. removeEventListener()
   2. detachEvent()
   3. off()
   4. deleteEventListener()
   5. clearEventListener()

8. Question 8: Event Delegation

   What is the primary benefit of using event delegation?

   1. It simplifies event handling for dynamic content.
   2. It improves performance by reducing the number of event listeners.
   3. It allows you to capture events before they reach their target.
   4. It automatically prevents default browser behavior.
   5. Both A and B

9. Question 9: Target vs. CurrentTarget

   In an event handler, what is the difference between `event.target` and `event.currentTarget`?

   1. `event.target` refers to the element that triggered the event, while `event.currentTarget` refers to the element the event listener is attached to.
   2. `event.target` refers to the element the event listener is attached to, while `event.currentTarget` refers to the element that triggered the event.
   3. There is no difference; they both refer to the same element.
   4. `event.target` refers to the parent element, while `event.currentTarget` refers to the child element.
   5. `event.target` is only available in Internet Explorer, while `event.currentTarget` is standard.

10. Question 10: Setting Attributes

    How do you set the 'src' attribute of an image element with the ID 'myImage' to 'image.jpg'?

    1. document.getElementById('myImage').src = 'image.jpg';
    2. document.getElementById('myImage').setAttribute('src', 'image.jpg');
    3. document.getElementById('myImage').source = 'image.jpg';
    4. document.getElementById('myImage').imageSource = 'image.jpg';
    5. Both A and B are correct