วัตถุ this ใน JavaScript

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

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

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

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

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

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

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

elem.addEventListener('blur', func);

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

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

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

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

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

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

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

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

กำหนดอินพุต เมื่ออินพุตนี้ได้รับโฟกัส ให้เขียนตัวเลข 1 ลงไป และเมื่อ สูญเสียโฟกัส - ให้เขียนตัวเลข 2 สำหรับการอ้างอิงถึง อินพุตภายในฟังก์ชันตัวจัดการให้ใช้ วัตถุ this

กำหนดปุ่ม ซึ่งค่าของมันคือตัวเลข 1 จงทำให้เมื่อคลิกบน ปุ่มนี้ ค่าของมันจะเพิ่มขึ้นทีละหนึ่งทุกครั้ง