วัตถุ this ใน JavaScript

ตอนนี้เราจะทำงานกับวัตถุพิเศษ this ที่สามารถเข้าถึงได้ในฟังก์ชันตัวจัดการเหตุการณ์ วัตถุนี้ชี้ไปยังองค์ประกอบ ที่เหตุการณ์เกิดขึ้น

วัตถุ this สะดวกเมื่อองค์ประกอบ ที่เหตุการณ์เกิดขึ้น และองค์ประกอบที่ กระทำการบางอย่างเป็นผลจากเหตุการณ์ - เป็นองค์ประกอบเดียวกัน

ตัวอย่างเช่น หากเรามีอินพุต เราสามารถ ผูกตัวจัดการการสูญเสียโฟกัสให้กับมันได้ และเมื่อเหตุการณ์นั้นเกิดขึ้น ก็ทำบางอย่าง กับข้อความในอินพุตนั้น มาลองทำตามที่อธิบายกัน สมมติว่าเรามีอินพุต:

html<input id="elem" value="text">

มาเก็บลิงก์ไปยังมันในตัวแปร elem กัน:

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

มาเชื่อมฟังก์ชันตัวจัดการเหตุการณ์ blur เข้ากับมัน:

javascriptelem.addEventListener('blur', func);

ภายในฟังก์ชัน func นี้จะสามารถเข้าถึง วัตถุ this ที่ชี้ไปยังอินพุตของเราได้:

javascriptfunction func() {
  console.log(this); // มีลิงก์ไปยังองค์ประกอบของเรา
}

มาแสดงเนื้อหาของแอตทริบิวต์ value ของอินพุตของเรา:

javascriptfunction func() {
  console.log(this.value); // แสดงเนื้อหาของแอตทริบิวต์
}

ทีนี้ ลองเขียนข้อความบางอย่างลงในอินพุต:

javascriptfunction func() {
  this.value = '!!!';
}

สามารถใช้ฟังก์ชันแบบไม่ระบุชื่อได้:

javascriptelem.addEventListener('blur', function() {
  this.value = '!!!';
});