addEventListener method

เมธอด addEventListener ช่วยให้ คุณสามารถกำหนดตัวจัดการเหตุการณ์ให้กับองค์ประกอบ ด้วยมัน คุณสามารถระบุได้ ตัวอย่างเช่น ว่าจะทำอย่างไรเมื่อปุ่มถูกคลิกหรือจะ ทำอย่างไรเมื่อพิมพ์ในช่องข้อความ ในพารามิเตอร์แรก เราระบุประเภทของเหตุการณ์ ที่จะส่งต่อ ในพารามิเตอร์ที่สอง - ฟังก์ชัน ที่จะถูกเรียกใช้งานหลังจากเหตุการณ์ ที่ระบุในพารามิเตอร์แรก ใน พารามิเตอร์ที่สามซึ่งเป็นตัวเลือก เราเลือกส่ง คุณลักษณะของอ็อบเจกต์ (once, capture, passive) หรือพารามิเตอร์ useCapture

ไวยากรณ์

javascriptelement.addEventListener('ประเภทเหตุการณ์', function, [คุณลักษณะของอ็อบเจกต์]);
หรือ
element.addEventListener('ประเภทเหตุการณ์', function, [useCapture]);

ตัวอย่าง

มาทำให้เมื่อปุ่ม ถูกคลิก จะมีข้อความแสดงขึ้น:

html<input type="button" id="button" value="คลิกฉัน">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click', function() {
  alert('ข้อความ');
});

Результат:

ตัวอย่าง

มาเขียนโค้ดเพื่อให้เมื่อเสียโฟกัส ในอินพุต จะมีข้อความแสดงขึ้นพร้อมกับ ข้อความภายในอินพุตนั้น:

html<input id="input" value="ข้อความ">

javascriptlet input = document.querySelector('#input');

input.addEventListener('blur', function() {
  alert(this.value);
});

Результат:

ตัวอย่าง

มาทำให้เมื่อปุ่มถูก คลิก จะมีข้อความแสดงขึ้นในคอนโซล เพียงครั้งเดียวเท่านั้น ในการทำเช่นนี้ เราใช้ พารามิเตอร์ที่สอง:

html<input type="button" id="button" value="คลิกฉัน">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function() {
    console.log('ข้อความ');
  },
  {
    once: true
  }
);

ตัวอย่าง

พารามิเตอร์ passive ป้องกันไม่ให้ เมธอด event.preventDefault ถูกเรียกเมื่อจัดการกับเหตุการณ์ มาลอง ใช้เมธอด event.preventDefault กับตัวอย่างที่แล้ว และตั้งค่า พารามิเตอร์ passive เป็น true:

html<input type="button" id="button" value="คลิกฉัน">

javascriptlet button = document.querySelector('#button');

button.addEventListener('click',
  function(event) {
    event.preventDefault();
    console.log('ไม่มีข้อความ');
  },
  {
    passive: true
  }
);

หลังจากรันโค้ด เราจะเห็น ข้อความต่อไปนี้:

javascript'ไม่มีข้อความ';
'ไม่สามารถเรียก preventDefault ภายในตัวฟังเหตุการณ์แบบ passive ได้'

ตัวอย่าง

พารามิเตอร์ useCapture ที่ตั้งค่าเป็น true แสดงการแพร่ของเหตุการณ์แบบ bubbling จากองค์ประกอบด้านในไปยังองค์ประกอบด้านนอก ส่วนค่า false - จาก องค์ประกอบด้านนอกไปยังองค์ประกอบด้านใน เมื่อ ส่งพารามิเตอร์ useCapture ชื่อของมันจะถูกละไว้และเขียนแค่ true หรือ false มาดูกันว่า เหตุการณ์แพร่ในองค์ประกอบพ่อแม่และลูก อย่างไรเมื่อพวกมันถูกคลิก:

html<div id="parent">พ่อแม่
  <p id="child">ลูก</p>
</div>

css#parent{
  width: 60px;
  padding: 10px;
  border: 1px solid red;
  text-align: center;
}
#child{
  width: 60px;
  marging-right: 40px;
  border: 1px solid blue;
  text-align: center;
}

javascriptlet parent = document.querySelector('#parent');
let child = document.querySelector('#parent');

parent.addEventListener('click',
  () => alert('parent'),
  true
);
child.addEventListener('click',
  () => alert('child'),
  true
);

Результат:

ดูเพิ่มเติม