event.target ใช้งานอย่างไร
event.target คือ จะเป็นการอ้างค่าของปัจจุบันที่ได้กระทำต่ออิลิเมนต์นั้น ๆ
ตัวอย่าง
โค้ด: เลือกทั้งหมด
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>ตัวอย่างการใช้ event.target</title>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.1/jquery.min.js" integrity="sha512-aVKKRRi/Q/YV+4mjoKBsE4x3H+BkegoM/em46NNlCqNTmUYADjBbeNefNxYV7giUp0VxICtqdrbqU7iVaeZNXA==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
</head>
<body>
<input type="text" name="" id="input">
<p id="test"></p>
<script>
let inputBox = document.getElementById("input");
inputBox.addEventListener("input", (event)=>{
console.log(event.target.value)
event.target.style.color = "#367E18";
$('#test').text(event.target.value);
})
</script>
</body>
</html>
- ให้สร้าง input type เป็น text กับ id คือ input เพื่อใส่ข้อความอะไรก็ได้ และแท็บ p จะเป็นส่วนแสดงข้อความใน html จะใช้ id คือ test
- ในส่วน script ในส่วน inputBox ก็เป็นการใช่งานในส่วน id input ส่วน addEventListener เป็นตรวจจับเหตุการณ์ใน input ว่า event หรือได้กรอกอะไรใน input หรือไม่
หรือบางทีเราอยากเอาค่าในวงลูปของ PHP จะไปใช้นอกวงลูปหรือไปใช้งานในส่วนอื่น ๆ ซึงเราสามารถใช้ event.target มาช่วยได้
โค้ด: เลือกทั้งหมด
$('.draggable').click(function() {
$('#myModal').modal('show');
$('#blockid').val($(this).attr('id'));
var t = $(event.target).text();
$('.modal-title').text('<?php echo $lang_racer_position ;?>'+' '+t);
});
- $('.draggable').click คือเราคลิกปุ่มของคลาส draggable จะเริ่มทำของตัวฟังก์ชัน
- $('#myModal').modal('show') คือ โชว์กล่อง popup
- $('#blockid').val($(this).attr('id')) ดึงค่าจาก attribute ของ element ในเพจ เอาที่ได้มาใส่ element id blockid
- $(event.target).text() ให้ดึงค่าจาก ในตำแหน่งของนักเตะ
- $('.modal-title').text('<?php echo $lang_racer_position ;?>'+' '+t) คือ เอาจากตัวแปรกับตำแหน่งนักเตะมาแสดงในกล่อง popup
- รับที่ส่งค่าเหตุการณ์ของ element
- สามารถเข้าถึงคุณสมบัติของ element
- แก้ไขคุณสมบัติบางอย่างของ , เช่น CSS, แอตทริบิวต์, และอื่น ๆ ได้
อ้างอิง :
https://www.w3schools.com/jsref/event_target.asp
https://iq.js.org/questions/javascript/what-is-event-target
https://www.mindphp.com/บทเรียนออนไลน์/ ... vents.html