jQuery Event Methods
jQuery ได้รับการปรับแต่งให้ตอบสนองต่อเหตุการณ์ในหน้า HTML
เหตุการณ์คืออะไร?
การกระทำของผู้เยี่ยมชมที่แตกต่างกันทั้งหมดที่หน้าเว็บสามารถตอบสนองได้เรียกว่าเหตุการณ์
เหตุการณ์แสดงถึงช่วงเวลาที่แม่นยำเมื่อมีบางสิ่งเกิดขึ้น
ตัวอย่าง:
- เลื่อนเมาส์ไปที่องค์ประกอบ
- การเลือกปุ่มตัวเลือก
- คลิกที่องค์ประกอบ
คำว่า"fires/fired"มักใช้กับเหตุการณ์ ตัวอย่าง: "เหตุการณ์การกดแป้นพิมพ์เริ่มทำงาน ทันทีที่คุณกดปุ่ม"
ต่อไปนี้คือเหตุการณ์ DOM ทั่วไปบางส่วน:
| Mouse Events | Keyboard Events | Form Events | Document/Window Events |
|---|---|---|---|
| click | keypress | submit | load |
| dblclick | keydown | change | resize |
| mouseenter | keyup | focus | scroll |
| mouseleave | blur | unload |
ไวยากรณ์ jQuery สำหรับวิธีเหตุการณ์
ใน jQuery เหตุการณ์ DOM ส่วนใหญ่มีวิธี jQuery ที่เทียบเท่ากัน
ในการกำหนดเหตุการณ์การคลิกให้กับทุกย่อหน้าบนหน้า คุณสามารถทำได้ดังนี้:
$("p").click();
ขั้นตอนต่อไปคือการกำหนดสิ่งที่ควรเกิดขึ้นเมื่อเหตุการณ์เริ่มทำงาน คุณต้องส่งฟังก์ชันไปที่เหตุการณ์:
$("p").click(function(){
// action goes here!!
});
jQuery Event Methods ที่ใช้กันทั่วไป
$(เอกสาร).พร้อม()
วิธี การ$(document).ready()นี้ช่วยให้เราสามารถเรียกใช้ฟังก์ชันเมื่อเอกสารโหลดเต็ม เหตุการณ์นี้อธิบายไว้แล้วใน
บทjQuery Syntax
คลิก()
วิธี การclick()แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบ HTML
ฟังก์ชันนี้จะดำเนินการเมื่อผู้ใช้คลิกที่องค์ประกอบ HTML
ตัวอย่างต่อไปนี้ระบุว่า: เมื่อเหตุการณ์การคลิกเริ่มทำงานกับ<p>องค์ประกอบ ซ่อน<p>องค์ประกอบปัจจุบัน:
ตัวอย่าง
$("p").click(function(){
$(this).hide();
});
dblclick()
วิธี การdblclick()แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบ HTML
ฟังก์ชั่นนี้จะดำเนินการเมื่อผู้ใช้ดับเบิลคลิกที่องค์ประกอบ HTML:
ตัวอย่าง
$("p").dblclick(function(){
$(this).hide();
});
mouseenter()
วิธี การmouseenter()แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบ HTML
ฟังก์ชันนี้จะดำเนินการเมื่อตัวชี้เมาส์เข้าสู่องค์ประกอบ HTML:
ตัวอย่าง
$("#p1").mouseenter(function(){
alert("You entered p1!");
});
เมาส์ลีฟ()
วิธี การmouseleave()แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบ HTML
ฟังก์ชันนี้จะดำเนินการเมื่อตัวชี้เมาส์ออกจากองค์ประกอบ HTML:
ตัวอย่าง
$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});
เมาส์ดาวน์()
วิธี การmousedown()แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบ HTML
ฟังก์ชั่นนี้ทำงาน เมื่อกดปุ่มซ้าย กลาง หรือขวาของเมาส์ ในขณะที่เมาส์อยู่เหนือองค์ประกอบ HTML:
ตัวอย่าง
$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});
เมาส์อัพ()
วิธี การmouseup()แนบฟังก์ชันตัวจัดการเหตุการณ์กับองค์ประกอบ HTML
ฟังก์ชันนี้จะดำเนินการเมื่อปล่อยปุ่มเมาส์ซ้าย กลาง หรือขวา ขณะที่เมาส์อยู่เหนือองค์ประกอบ HTML:
ตัวอย่าง
$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});
โฮเวอร์()
เมธอด นี้hover()ใช้สองหน้าที่และเป็นการรวมกันของ เมธอด mouseenter()และmouseleave()
เมธอด
ฟังก์ชันแรกจะทำงานเมื่อเมาส์เข้าสู่องค์ประกอบ HTML และฟังก์ชันที่สองจะทำงานเมื่อเมาส์ออกจากองค์ประกอบ HTML:
ตัวอย่าง
$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});
จุดสนใจ()
วิธี การfocus()แนบฟังก์ชันตัวจัดการเหตุการณ์กับฟิลด์แบบฟอร์ม HTML
ฟังก์ชันนี้จะดำเนินการเมื่อฟิลด์แบบฟอร์มได้รับการโฟกัส:
ตัวอย่าง
$("input").focus(function(){
$(this).css("background-color", "#cccccc");
});
เบลอ()
วิธี การblur()แนบฟังก์ชันตัวจัดการเหตุการณ์กับฟิลด์แบบฟอร์ม HTML
ฟังก์ชันนี้จะดำเนินการเมื่อฟิลด์แบบฟอร์มสูญเสียโฟกัส:
ตัวอย่าง
$("input").blur(function(){
$(this).css("background-color", "#ffffff");
});
วิธี on()
วิธี การon()แนบตัวจัดการเหตุการณ์อย่างน้อยหนึ่งรายการสำหรับองค์ประกอบที่เลือก
แนบเหตุการณ์การคลิกกับ<p>องค์ประกอบ:
ตัวอย่าง
$("p").on("click", function(){
$(this).hide();
});
แนบตัวจัดการเหตุการณ์หลายตัวกับ<p>องค์ประกอบ:
ตัวอย่าง
$("p").on({
mouseenter: function(){
$(this).css("background-color", "lightgray");
},
mouseleave: function(){
$(this).css("background-color", "lightblue");
},
click: function(){
$(this).css("background-color", "yellow");
}
});
แบบฝึกหัด jQuery
jQuery Event Methods
สำหรับการอ้างอิงเหตุการณ์ jQuery แบบเต็ม โปรดไปที่การอ้างอิงเหตุการณ์ jQueryของ เรา