event.target ในจาวาสคริปต์มันคืออะไร ตัวช่วย รับส่งค่า element ในหน้าเพจ

jQuery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , jQuery และ Ajax

Moderator: mindphp, ผู้ดูแลกระดาน

ภาพประจำตัวสมาชิก
Thanapoom1514
PHP VIP Members
PHP VIP Members
โพสต์: 4329
ลงทะเบียนเมื่อ: 04/07/2022 9:46 am

event.target ในจาวาสคริปต์มันคืออะไร ตัวช่วย รับส่งค่า element ในหน้าเพจ

โพสต์ที่ยังไม่ได้อ่าน โดย Thanapoom1514 »

event.target เป็นการใช้ jQuery Event ใน jQuery Event คือเหตุการณ์ต่าง ๆ ที่ผู้ใช้งานมีต่อเว็บไซต์ว่าได้ทำอะไรไปบ้าง เช่น การคลิก การเลื่อนเมาส์ การดับเบิลคลิก และอื่น ๆ ที่มีต่อการกระทำต่อเว็บไซต์ ซึ่งมีการควบคุมโดยการใช้ฟังก์ชั่นของ jQuery มาช่วยจัดการ และในบทความนี้จะมาทำความรู้จักฟังก์ชันที่มีอยู่ใน jquery ก็คือ event.target

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>
ผลลัพธ์ที่ได้
ตัวอย่างการใช้ event.target
ตัวอย่างการใช้ event.target
event.target.gif (8.13 KiB) Viewed 2759 times
อธิบายโค้ดคือ
  1. ให้สร้าง input type เป็น text กับ id คือ input เพื่อใส่ข้อความอะไรก็ได้ และแท็บ p จะเป็นส่วนแสดงข้อความใน html จะใช้ id คือ test
  2. ในส่วน 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);
                  
                  });
ผลลัพธ์ที่ได้
ใช้ event.target มาดึงค่าตำแหน่งนักเตะ
ใช้ event.target มาดึงค่าตำแหน่งนักเตะ
event.target 2.gif (1.53 MiB) Viewed 2759 times
อธิบายโค้ดคือ
  1. $('.draggable').click คือเราคลิกปุ่มของคลาส draggable จะเริ่มทำของตัวฟังก์ชัน
  2. $('#myModal').modal('show') คือ โชว์กล่อง popup
  3. $('#blockid').val($(this).attr('id')) ดึงค่าจาก attribute ของ element ในเพจ เอาที่ได้มาใส่ element id blockid
  4. $(event.target).text() ให้ดึงค่าจาก ในตำแหน่งของนักเตะ
  5. $('.modal-title').text('<?php echo $lang_racer_position ;?>'+' '+t) คือ เอาจากตัวแปรกับตำแหน่งนักเตะมาแสดงในกล่อง popup
ประโยชน์ของการใช้ event.target
  • รับที่ส่งค่าเหตุการณ์ของ element
  • สามารถเข้าถึงคุณสมบัติของ element
  • แก้ไขคุณสมบัติบางอย่างของ , เช่น CSS, แอตทริบิวต์, และอื่น ๆ ได้
สรุป คือ เราสามารถนำฟังก์ชันของ Jquery มาใช้ใน Event ต่าง ๆ ในเว็บเพจของเราได้ ซึ่งจะช่วนเราสามารถนำข้อความหรือค่าจากเพจของเราไปใช้ในส่วนอื่น ๆ โดยอาจจะไม่ใช้มา query ข้อมูลใหม่อีกรอบ และนำไปใช้ประยุกต์อื่น ๆ ได้อีกด้วย


อ้างอิง :
https://www.w3schools.com/jsref/event_target.asp
https://iq.js.org/questions/javascript/what-is-event-target
https://www.mindphp.com/บทเรียนออนไลน์/ ... vents.html
แก้ไขล่าสุดโดย Thanapoom1514 เมื่อ 09/12/2022 5:15 pm, แก้ไขไปแล้ว 1 ครั้ง.
:gfb:
ภาพประจำตัวสมาชิก
mindphp
ผู้ดูแลระบบ MindPHP
ผู้ดูแลระบบ MindPHP
โพสต์: 41232
ลงทะเบียนเมื่อ: 22/09/2008 6:18 pm
ติดต่อ:

Re: event.target ในจาวาสคริปต์มันคืออะไร ตัวช่วย รับส่งค่า element ในหน้าเพจ

โพสต์ที่ยังไม่ได้อ่าน โดย mindphp »

ลูกเล่นน่าสนใจมากครับ
ติดตาม VDO: http://www.youtube.com/c/MindphpVideoman
ติดตาม FB: https://www.facebook.com/pages/MindphpC ... 9517401606
หมวดแชร์ความรู้: https://www.mindphp.com/forums/viewforum.php?f=29
รับอบรม และพัฒนาระบบ: https://www.mindphp.com/forums/viewtopic.php?f=6&t=2042
ตอบกลับโพส
  • Similar Topics
    ตอบกลับ
    แสดง
    โพสต์ล่าสุด

ผู้ใช้งานขณะนี้

สมาชิกกำลังดูบอร์ดนี้: ไม่มีสมาชิกใหม่ และบุคลทั่วไป 62