เหตุการณ์ jQuery

ก่อนหน้านี้: jQuery เลือก

ถัดไป: ผลกระทบ jQuery - ซ่อนและแสดง

jQuery ได้รับการออกแบบเป็นพิเศษสำหรับการจัดการเหตุการณ์

เหตุการณ์ที่เกิดขึ้นคืออะไร?

การตอบสนองหน้ากับผู้เข้าชมที่แตกต่างกันเรียกว่าเหตุการณ์ที่เกิดขึ้น

วิธีการจัดการเหตุการณ์หมายความว่าเมื่อมีเหตุการณ์บางอย่างเกิดขึ้นเมื่อเรียก HTML

ตัวอย่าง:

เลื่อนเมาส์ไปที่องค์ประกอบ
เลือกปุ่มตัวเลือก
คลิกองค์ประกอบ

คำที่มักจะใช้ในกรณีที่ "ทริกเกอร์" (หรือ "กระตุ้น") ตัวอย่างเช่น: "ทริกเกอร์เหตุการณ์ปุ่มกดเมื่อคุณกดปุ่ม".

เหตุการณ์ DOM สามัญ:

鼠标事件	键盘事件	表单事件	文档/窗口事件
click	keypress	submit	load
dblclick	keydown	change	resize
mouseenter	keyup	focus	scroll
mouseleave	blur	unload

jQuery วิธีเหตุการณ์ไวยากรณ์

ใน jQuery ส่วนใหญ่เหตุการณ์ DOM มีเทียบเท่าวิธีการ jQuery

หน้าระบุเหตุการณ์คลิก:

. $ ( "P") คลิก ();

ขั้นตอนต่อไปคือการกำหนดทริกเกอร์เหตุการณ์สิ่งที่เวลา คุณสามารถใช้ฟังก์ชั่นกิจกรรม:

$ ( "P"). คลิก (ฟังก์ชั่น () {
หลังจากรหัส !! // การกระทำที่ถูกเรียก
});

ที่ใช้กันทั่วไป jQuery วิธีการจัดกิจกรรม

$ (เอกสาร) .ready ()

$ (เอกสาร) .ready () วิธีการช่วยให้เราสามารถโหลดเอกสารได้อย่างเต็มที่หลังจากที่การกระทำฟังก์ชั่น วิธีการจัดกิจกรรมใน ไวยากรณ์ jQuery ส่วนได้รับการกล่าวถึง

คลิก ()

คลิก () วิธีเมื่อเหตุการณ์คลิกปุ่มทริกเกอร์เรียกฟังก์ชัน

ฟังก์ชั่นนี้จะทำงานเมื่อผู้ใช้คลิกที่องค์ประกอบ HTML

ในตัวอย่างต่อไปนี้เมื่อคุณคลิกที่เหตุการณ์เรียก <p> องค์ประกอบที่จะซ่อน <p> องค์ประกอบปัจจุบัน:

ตัวอย่าง

$("p").click(function(){
$(this).hide();
});

ลอง»

DblClick ()

เมื่อคุณคลิกสององค์ประกอบเหตุการณ์ DblClick เกิดขึ้น

DblClick () ทริกเกอร์เหตุการณ์ DblClick วิธีการหรือฟังก์ชั่นที่กำหนดไว้ในการทำงานเมื่อมีเหตุการณ์เกิดขึ้น DblClick:

ตัวอย่าง

$("p").dblclick(function(){
$(this).hide();
});

ลอง»

mouseenter ()

เมื่อชี้เมาส์ข้ามองค์ประกอบเหตุการณ์ mouseenter เกิดขึ้น

mouseenter () เหตุการณ์วิธี mouseenter ทริกเกอร์หรือฟังก์ชั่นที่กำหนดไว้ในการทำงานเมื่อมีเหตุการณ์เกิดขึ้น mouseenter:

ตัวอย่าง

$("#p1").mouseenter(function(){
alert("You entered p1!");
});

ลอง»

MouseLeave ()

เมื่อชี้เมาส์ออกจากองค์ประกอบเหตุการณ์ MouseLeave เกิดขึ้น

MouseLeave () เหตุการณ์วิธี MouseLeave ทริกเกอร์หรือเมื่อฟังก์ชั่นที่กำหนดไว้ในการทำงานเมื่อมีเหตุการณ์เกิดขึ้น MouseLeave:

ตัวอย่าง

$("#p1").mouseleave(function(){
alert("Bye! You now leave p1!");
});

ลอง»

mousedown ()

เมื่อชี้เมาส์ย้ายมากกว่าองค์ประกอบและกดปุ่มเมาส์เหตุการณ์ mousedown เกิดขึ้น

mousedown () วิธีการก่อให้เกิดเหตุการณ์ mousedown หรือฟังก์ชั่นการทำงานที่ระบุเมื่อเหตุการณ์เกิดขึ้น mousedown:

ตัวอย่าง

$("#p1").mousedown(function(){
alert("Mouse down over p1!");
});

ลอง»

MouseUp ()

เมื่อปุ่มเมาส์จะถูกปล่อยออกมาในช่วงองค์ประกอบ MouseUp เหตุการณ์ที่เกิดขึ้น

MouseUp () ทริกเกอร์เหตุการณ์วิธี MouseUp หรือฟังก์ชั่นที่กำหนดไว้ในการทำงานเมื่อมีเหตุการณ์เกิดขึ้น MouseUp:

ตัวอย่าง

$("#p1").mouseup(function(){
alert("Mouse up over p1!");
});

ลอง»

เลื่อนเมาส์ ()

โฉบ () วิธีการที่ใช้ในการจำลองเคอร์เซอร์อยู่เหนือเหตุการณ์

เมื่อย้ายเมาส์ไปที่องค์ประกอบก็จะเรียกฟังก์ชั่นเป็นครั้งแรกที่ระบุ (mouseenter) เมื่อเมาส์เลื่อนออกจากองค์ประกอบก็จะเรียกฟังก์ชั่นที่ระบุสอง (MouseLeave)

ตัวอย่าง

$("#p1").hover(function(){
alert("You entered p1!");
},
function(){
alert("Bye! You now leave p1!");
});

ลอง»

โฟกัส ()

เมื่อองค์ประกอบที่ได้รับโฟกัสโฟกัสเกิดเหตุการณ์ขึ้น

เมื่อคลิกเมาส์ในองค์ประกอบที่เลือกหรือองค์ประกอบโดยการกำหนดเป้าหมายที่สำคัญแท็บองค์ประกอบจะมุ่งเน้น

โฟกัส () วิธีการก่อให้เกิดเหตุการณ์โฟกัสหรือฟังก์ชั่นที่กำหนดไว้ในการทำงานเมื่อมีเหตุการณ์เกิดขึ้นโฟกัส:

ตัวอย่าง

$("input").focus(function(){
$(this).css("background-color","#cccccc");
});

ลอง»

เบลอ ()

เมื่อองค์ประกอบสูญเสียโฟกัสเหตุการณ์เบลอเกิดขึ้น

เบลอ () วิธีการก่อให้เกิดเหตุการณ์เบลอหรือฟังก์ชั่นในการทำงานเมื่อมีเหตุการณ์เกิดขึ้นที่กำหนดไว้เบลอ:

ตัวอย่าง

$("input").blur(function(){
$(this).css("background-color","#ffffff");
});

ลอง»

ก่อนหน้านี้: jQuery เลือก

ถัดไป: ผลกระทบ jQuery - ซ่อนและแสดง

jQuery หลักสูตร

jQuery ผล

jQuery HTML

jQuery ข้ามผ่าน

jQuery Ajax

jQuery อื่น ๆ

jQuery ตัวอย่าง

jQuery คู่มืออ้างอิง

jQuery วิดเจ็ต

เหตุการณ์ jQuery

เหตุการณ์ที่เกิดขึ้นคืออะไร?

jQuery วิธีเหตุการณ์ไวยากรณ์

ที่ใช้กันทั่วไป jQuery วิธีการจัดกิจกรรม

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง

ตัวอย่าง