dom-events.md

DOM Events

1. What will be the output ?

   <button onclick="console.log('One')" onclick="console.log('Two')">
     Click Me
   </button>

   • A: One
   • B: Two
   • C: One Two
   • D: Two One
   
   
   Answer

   Option: A

---

2. What will be the output ?

   <button id="button" onclick="console.log('One')">
     Click Me
   </button>
   
   <script>
     const button = document.getElementById('button');
   
     button.onclick = function() {
       console.log('Two');
     }
   </script>

   • A: One
   • B: Two
   • C: One Two
   • D: Two One
   
   
   Answer

   Option: B

---

3. What will be the output ?

   <button id="button" onclick="console.log('One')">
     Click Me
   </button>
   
   <script>
     const button = document.getElementById('button');
   
     button.addEventListener('click', function() {
       console.log('Two');
     });
   </script>

   • A: One
   • B: Two
   • C: One Two
   • D: Two One
   
   
   Answer

   Option: C

---

4. What will be the output ?

   <button id="button" onclick="console.log('One')">
     Click Me
   </button>
   
   <script>
     const button = document.getElementById('button');
   
     button.addEventListener('click', function() {
       console.log('Two');
     });
   
     button.onclick = function() {
       console.log('Three');
     }
   </script>

   • A: One Two
   • B: Two Three
   • C: Three Two
   • D: One Two Three
   
   
   Answer

   Option: C

---

5. What will be the output ?

   <button id="button">
     Click Me
   </button>
   
   <script>
     const button = document.getElementById('button');
   
     button.addEventListener('click', function() {
       console.log('One');
     });
   
     button.onclick = function() {
       console.log('Two');
     }
   </script>

   • A: One
   • B: Two
   • C: One Two
   • D: Two One
   
   
   Answer

   Option: C

---

6. What will be the output ?

   <button id="button">
     Click Me
   </button>
   
   <script>
     const button = document.getElementById('button');
   
     button.addEventListener('click', function() {
       console.log('One');
     });
   
     button.onclick = function() {
       console.log('Two');
     }
   
     button.setAttribute('onclick', "console.log('Three')");
   </script>

   • A: One Two Three
   • B: One Two
   • C: One Three
   • D: Three Two One
   
   
   Answer

   Option: C

---

7. What will be the output ?

   <button id="button" onclick="console.log('One')">
     Click Me
   </button>
   
   <script>
     const button = document.getElementById('button');
   
     button.addEventListener('click', function() {
       console.log('Two');
     });
   
     button.addEventListener('click', function() {
       console.log('Three');
     }, false);
   </script>

   • A: One Two
   • B: One Three
   • C: One Two Three
   • D: Three One Two
   
   
   Answer

   Option: C

---

8. What will be the output ?

   <button id="button" onclick="console.log('One')">
     Click Me
   </button>
   
   <script>
     const button = document.getElementById('button');
   
     function clickHandler() {
     	console.log('Two');
     }
   
     button.addEventListener('click', clickHandler);
   
     button.addEventListener('click', clickHandler, false);
   </script>

   • A: One Two
   • B: One Three
   • C: One Two Three
   • D: Three One Two
   
   
   Answer

   Option: A

---

9. What will be the output ?

   <button id="button" style="display: none;">
     Click Me
   </button>
   
   <script>
     const button = document.getElementById('button');
   
     button.onclick = function() {
       console.log('One');
     }
   
     button.addEventListener('click', function() {
       console.log('Two');
     });
   
     setTimeout(function(){
       button.click();
     }, 1000);
   </script>

   • A: One Two
   • B: One Three
   • C: One Two Three
   • D: Three One Two
   
   
   Answer

   Option: A

---

10. What will be the output ?

    <p onclick="console.log('One')">
      <div onclick="console.log('Two')">
        <h1 onclick="console.log('Three')">
          Click Me
        </h1>
      </div>
    </p>

    • A: One
    • B: Three
    • C: One Two Three
    • D: Three Two
    • E: Three Two one
    
    
    Answer

    Option: D

---

11. What will be the output ?

    <div onclick="console.log('One')">
      <div onclick="event.stopPropagation();console.log('Two');">
        <div onclick="console.log('Three')">
          Click Me
        </div>
      </div>
    </div>

    • A: One
    • B: Three
    • C: One Two Three
    • D: Three Two
    • E: Three Two one
    
    
    Answer

    Option: D

---

12. What will be the output ?

    <div onclick="console.log('One')">
      <div onclick="return false;console.log('Two');">
        <div onclick="console.log('Three')">
          Click Me
        </div>
      </div>
    </div>

    • A: One
    • B: Three
    • C: One Two Three
    • D: Three Two
    • E: Three Two one
    
    
    Answer

    Option: None of the above

---

13. What will be the output ?

    <div>
      <div class="number-box">1</div>
      <div class="number-box">2</div>
      <div class="number-box">3</div>
      <div class="number-box">4</div>
    </div>
      <script>
      const arr = document.querySelectorAll('.number-box');
      console.log(arr);
    </script>

    • A: array of length 4
    • B: undefined
    • C: NodeList of length 4
    • D: empty array
    • E: empty NodeList
    
    
    Answer

    Option: C