วิธีเพิ่ม Event Handler หลายตัวให้กับองค์ประกอบเดียวกันใน JavaScript HTML DOM

สามารถเพิ่มตัวจัดการเหตุการณ์มากกว่าหนึ่งตัวให้กับองค์ประกอบเดียวกันได้ โดยเรียก addEventListener() หลายครั้งด้วยชื่อเหตุการณ์หรือฟังก์ชันที่ต่างกัน

ตัวอย่าง

<!DOCTYPE html>
<html>
  <body>
    <p>Click the below button once to get Date.</p>
    <p>Click the below button twice to get an alert box.</p>
    <button id="btnid"> Click me </button>
    <p id="pid"></p>
    <script>
      document.getElementById("btnid").addEventListener("click", displayEvent);
      var res = document.getElementById("btnid");
      res.addEventListener("dblclick", myFunction);
      function displayEvent() {
        document.getElementById("pid").innerHTML = Date();
      }
      function myFunction() {
        alert("You clicked the button twice!");
      }
    </script>
  </body>
</html>