jQuery รายการเหตุการณ์

jQuery ถูกออกแบบเพื่อจัดการเหตุการณ์

ฟังก์ชันจัดการเหตุการณ์ jQuery

วิธีจัดการเหตุการณ์เป็นฟังก์ชันสำคัญใน jQuery

เมื่อเกิดเหตุการณ์บางอย่างใน HTML จะเรียกใช้วิธีจัดการเหตุการณ์ ซึ่งเรียกว่า "ตั้งแม่" (trigger) หรือ "กดปุ่ม" (trigger)

ทั่วไปแล้วจะจัดเก็บรหัส jQuery ในหมวด <head> ของหน้าเว็บ

ตัวอย่าง

<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$("document").ready(function(){
  $("button").click(function(){
    $("p").hide();
  });
});
</script>
</head>
<body>
<h2>This is a heading</h2>
<p>This is a paragraph.</p>
<p>This is another paragraph.</p>
<button>Click me</button>
</body>
</html>

ลองด้วยตัวเอง

ในตัวอย่างที่ขึ้นไปนี้ ขณะที่เหตุการณ์การกดปุ่มถูกกระตุ้น จะเรียกใช้ฟังก์ชัน

$("button").click(function() {  // some code... } )

วิธีนี้จะซ่อนทั้งหมด <p> อิเลเมนต์

$("p").hide();

ฟังก์ชันในไฟล์เดี่ยว

ถ้าเว็บไซต์ของคุณมีหน้าจำนวนมาก และคุณต้องการให้ฟังก์ชัน jQuery ของคุณง่ายต่อการบำรุงรักษา ให้จัดเก็บฟังก์ชัน jQuery ของคุณไว้ในไฟล์ .js แยกตัวอิสระ

เมื่อเราแสดง jQuery ในตัวอย่าง จะเพิ่มฟังก์ชันโดยตรงไปยังส่วน <head> อย่างไรก็ตาม มันดีที่จะจัดเก็บในไฟล์แยกตัว เช่นนี้ (ด้วยการอ้างอิงไฟล์ผ่าน src แอตทริบิวต์):

ตัวอย่าง

<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="my_jquery_functions.js"></script>
</head>

ชื่อที่ชนกัน jQuery

jQuery ใช้สัญญาณ $ ในการนำเสนอ jQuery

ฟังก์ชันบางตัวในคลังความรู้ JavaScript อื่น ๆ (เช่น Prototype) ใช้สัญญาณ $ ด้วย

jQuery ใช้วิธี noConflict() ที่ชื่อนี้เพื่อแก้ปัญหานี้

var jq=jQuery.noConflict()،ช่วยเหลือคุณในการใช้ชื่อตัวเอง (เช่น jq) แทนสัญญาณ $

ลองด้วยตัวเอง

สรุป

เนื่องจาก jQuery ถูกออกแบบมาเพื่อจัดการเหตุการณ์ HTML ดังนั้น เมื่อคุณปฏิบัติตามหลักการต่อไปนี้ รหัสของคุณจะเหมาะสมและง่ายต่อการดูแล:

  • จัดเก็บรหัส jQuery ทั้งหมดในฟังก์ชันการจัดการเหตุการณ์
  • จัดเก็บฟังก์ชันการจัดการเหตุการณ์ทั้งหมดในตัวอนุญาโตรงกับเหตุการณ์ ready ของเอกสาร
  • จัดเก็บรหัส jQuery ในไฟล์ .js แยกตัว
  • ถ้ามีชื่อที่ชนกัน ให้เปลี่ยนชื่อคลังความรู้ jQuery

jQuery รายการเหตุการณ์

นี่คือตัวอย่างบางตัวของเหตุการณ์มาตรฐาน jQuery

ฟังก์ชัน Event เชื่อมโยงฟังก์ชันไปยัง
$(document).ready(function) เชื่อมโยงฟังก์ชันไปยังเหตุการณ์ ready ของเอกสาร (เมื่อเอกสารเสร็จการโหลด)
$(selector).click(function) กระตุ้นหรือเชื่อมโยงฟังก์ชันที่เลือกได้กับเหตุการณ์ click ขององค์ประกอบที่เลือก
$(selector).dblclick(function) กระตุ้นหรือเชื่อมโยงฟังก์ชันที่เลือกได้กับเหตุการณ์ double click ขององค์ประกอบที่เลือก
$(selector).focus(function) กระตุ้นหรือเชื่อมโยงฟังก์ชันที่เลือกได้กับเหตุการณ์ focus ขององค์ประกอบที่เลือก
$(selector).mouseover(function) กระตุ้นหรือเชื่อมโยงฟังก์ชันที่เลือกได้กับเหตุการณ์ hover ขององค์ประกอบที่เลือก

ถ้าคุณต้องการคู่มือเหตุการณ์ที่เต็มทุกส่วน โปรดเข้าเว็บไซต์ของเรา คู่มือเหตุการณ์ jQuery。