JQuery Tips : เมธอด on() เพื่อจัดการเหตุการณ์

Jquery & Ajax Knowledge ความรู้เกี่ยวกับ Javascript , Jquery ม Ajax

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

abdkode
PHP Super Member
PHP Super Member
Posts: 362
Joined: 07/01/2019 9:56 am

JQuery Tips : เมธอด on() เพื่อจัดการเหตุการณ์

Postby abdkode » 02/04/2019 4:49 pm

on() เป็นเมธอดที่ inbuilt ใน jQuery ซึ่งใช้ในการกำหนดหนึ่งหรือมากกว่าตัวจัดการเหตุการณ์(event)สำหรับองค์ประกอบ(element)ที่เลือกและองค์ประกอบของ child elements ใน DOM
DOM (Document Object Model) เป็นมาตรฐานของ World Wide Web Consortium สิ่งนี้นิยามสำหรับการเข้าถึงองค์ประกอบในทรี DOM

Code: Select all

$(selector).on(para1, para2, para3, para4)

พารามิเตอร์:มันยอมรับพารามิเตอร์บางอย่างที่ระบุด้านล่าง -
  • para1: ระบุเหตุการณ์ที่แนบหรือใส่มากับองค์ประกอบที่เลือก
  • para2:เป็นตัวเลือกเพิ่มเติมและสามารถระบุถึงค่าชายน์(child)เฉพาะที่สามารถใช้ตัวจัดการเหตุการณ์
  • para3:นี่เป็นตัวเลือกเพิ่มเติมเพื่อระบุข้อมูลเพิ่มเติมที่จะส่งผ่านพร้อมกับฟังก์ชัน
  • para4:นี่เป็นการระบุฟังก์ชันที่จะรันเมื่อมีเหตุการณ์เกิดขึ้น

ตัวอย่างโค้ดjQuery เพื่อแสดงการทำงานของmethod on()

Code: Select all

<html>

<head>
   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
   <script>
      <!--jQuery code to show on method -->
      $(document).ready(function() {
         $("p").on("click", function() {
            document.getElementById("p1").innerHTML = "Paragraph changed!";
         });
      });
   </script>
   <style>
      #p1 {
         font-size: 30px;
         width: 400px;
         padding: 20px;
         border: 2px solid green;
      }
   </style>
</head>

<body>
   <!--click on this paragraph -->
   <p id="p1">Click Here !!!</p>
</body>

</html>

ผลลัพธ์เมื่อเปิดกับเบราเซอร์
k1.png
k1.png (2.4 KiB) Viewed 534 times

เมื้อคลิกที่ตำแหน่งดังกล่าวข้อความจะเปลี่ยนแปลงเป็นดังนี้
k2.png
k2.png (3.77 KiB) Viewed 534 times

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

ช่องทางการศึกษาเพิ่มเติมข่าวที่น่าสนใจเกี่ยวกับ : JQuery
-สอนการใช้งาน HTML & CSS
-ถามตอบ HTML CSS
-บทเรียน CSS
-บทเรียน HTML5
-แลกเปลี่ยนความรู้ PHP

Return to “Jquery & Ajax Knowledge”

Who is online

Users browsing this forum: No registered users and 3 guests