วิธีทำงานกับเมธอด addEventListener() ใน JavaScript HTML DOM

เมธอด addEventListener() ใช้สำหรับผูกตัวจัดการเหตุการณ์กับองค์ประกอบ รองรับการระบุช่วงการจับเหตุการณ์ (capturing/bubbling) และเพิ่มหลายฟังก์ชันต่อเหตุการณ์เดียวกันได้

ตัวอย่าง

<!DOCTYPE html>
<html>
  <body>
    <p>Double click the below button.</p>
    <button id="btnid"> Double Click </button>
    <p id="pid"> </p>
    <script>
      document.getElementById("btnid").addEventListener("dblclick", displayEvent);
      function displayEvent() {
        document.getElementById("pid").innerHTML = Date();
      }
    </script>
  </body>
</html>