jQuery - การจัดการเหตุการณ์
เรามีความสามารถในการสร้างหน้าเว็บแบบไดนามิกโดยใช้เหตุการณ์ เหตุการณ์คือการกระทำที่สามารถตรวจพบได้โดย Web Application ของคุณ
ต่อไปนี้เป็นตัวอย่างเหตุการณ์ -
- คลิกเมาส์
- การโหลดหน้าเว็บ
- การวางเมาส์เหนือองค์ประกอบ
- การส่งแบบฟอร์ม HTML
- การกดแป้นพิมพ์บนแป้นพิมพ์ของคุณ ฯลฯ
เมื่อเหตุการณ์เหล่านี้ถูกทริกเกอร์คุณสามารถใช้ฟังก์ชันที่กำหนดเองเพื่อทำอะไรก็ได้ที่คุณต้องการกับเหตุการณ์ ฟังก์ชันแบบกำหนดเองเหล่านี้เรียกตัวจัดการเหตุการณ์
ตัวจัดการเหตุการณ์ที่มีผลผูกพัน
การใช้ jQuery Event Model เราสามารถสร้างตัวจัดการเหตุการณ์บนองค์ประกอบ DOM ด้วยไฟล์ bind() วิธีการดังนี้ -
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$('div').bind('click', function( event ){
alert('Hi there!');
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;">ONE</div>
<div class = "div" style = "background-color:green;">TWO</div>
<div class = "div" style = "background-color:red;">THREE</div>
</body>
</html>รหัสนี้จะทำให้องค์ประกอบการแบ่งตอบสนองต่อเหตุการณ์การคลิก เมื่อผู้ใช้คลิกภายในส่วนนี้หลังจากนั้นการแจ้งเตือนจะแสดงขึ้น
สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
ไวยากรณ์แบบเต็มของคำสั่ง bind () มีดังนี้ -
selector.bind( eventType[, eventData], handler)ต่อไปนี้เป็นคำอธิบายของพารามิเตอร์ -
eventType- สตริงที่มีประเภทเหตุการณ์ JavaScript เช่นคลิกหรือส่ง อ้างถึงส่วนถัดไปสำหรับรายการประเภทเหตุการณ์ทั้งหมด
eventData - นี่คือพารามิเตอร์ที่เป็นทางเลือกคือแผนที่ของข้อมูลที่จะส่งต่อไปยังตัวจัดการเหตุการณ์
handler - ฟังก์ชั่นที่จะดำเนินการทุกครั้งที่เกิดเหตุการณ์
การลบตัวจัดการเหตุการณ์
โดยปกติเมื่อสร้างตัวจัดการเหตุการณ์แล้วจะยังคงมีผลในช่วงที่เหลือของอายุการใช้งานของเพจ อาจมีความจำเป็นเมื่อคุณต้องการลบตัวจัดการเหตุการณ์
jQuery ให้ไฟล์ unbind()คำสั่งเพื่อลบตัวจัดการเหตุการณ์ที่ออก ไวยากรณ์ของ unbind () มีดังนี้ -
selector.unbind(eventType, handler)
or
selector.unbind(eventType)ต่อไปนี้เป็นคำอธิบายของพารามิเตอร์ -
eventType- สตริงที่มีประเภทเหตุการณ์ JavaScript เช่นคลิกหรือส่ง อ้างถึงส่วนถัดไปสำหรับรายการประเภทเหตุการณ์ทั้งหมด
handler - หากมีให้ระบุผู้ฟังเฉพาะที่จะลบออก
ประเภทเหตุการณ์
| ซีเนียร์ | ประเภทเหตุการณ์และคำอธิบาย |
|---|---|
| 1 | blur เกิดขึ้นเมื่อองค์ประกอบสูญเสียโฟกัส |
| 2 | change เกิดขึ้นเมื่อองค์ประกอบเปลี่ยนไป |
| 3 | click เกิดขึ้นเมื่อคลิกเมาส์ |
| 4 | dblclick เกิดขึ้นเมื่อดับเบิลคลิกเมาส์ |
| 5 | error เกิดขึ้นเมื่อมีข้อผิดพลาดในการขนถ่ายเป็นต้น |
| 6 | focus เกิดขึ้นเมื่อองค์ประกอบได้รับโฟกัส |
| 7 | keydown เกิดขึ้นเมื่อกดปุ่ม |
| 8 | keypress เกิดขึ้นเมื่อกดและปล่อยปุ่ม |
| 9 | keyup เกิดขึ้นเมื่อปล่อยคีย์ |
| 10 | load เกิดขึ้นเมื่อโหลดเอกสาร |
| 11 | mousedown เกิดขึ้นเมื่อกดปุ่มเมาส์ |
| 12 | mouseenter เกิดขึ้นเมื่อเมาส์เข้าสู่พื้นที่องค์ประกอบ |
| 13 | mouseleave เกิดขึ้นเมื่อเมาส์ออกจากพื้นที่องค์ประกอบ |
| 14 | mousemove เกิดขึ้นเมื่อตัวชี้เมาส์เคลื่อนที่ |
| 15 | mouseout เกิดขึ้นเมื่อตัวชี้เมาส์เคลื่อนออกจากองค์ประกอบ |
| 16 | mouseover เกิดขึ้นเมื่อตัวชี้เมาส์เลื่อนไปที่องค์ประกอบ |
| 17 | mouseup เกิดขึ้นเมื่อปล่อยปุ่มเมาส์ |
| 18 | resize เกิดขึ้นเมื่อมีการปรับขนาดหน้าต่าง |
| 19 | scroll เกิดขึ้นเมื่อเลื่อนหน้าต่าง |
| 20 | select เกิดขึ้นเมื่อเลือกข้อความ |
| 21 | submit เกิดขึ้นเมื่อส่งแบบฟอร์ม |
| 22 | unload เกิดขึ้นเมื่อเอกสารถูกยกเลิกการโหลด |
วัตถุเหตุการณ์
ฟังก์ชันเรียกกลับใช้พารามิเตอร์เดียว เมื่อตัวจัดการถูกเรียกว่าวัตถุเหตุการณ์ JavaScript จะถูกส่งผ่านไป
อ็อบเจ็กต์เหตุการณ์มักไม่จำเป็นและพารามิเตอร์ถูกละไว้เนื่องจากโดยปกติบริบทที่เพียงพอจะพร้อมใช้งานเมื่อตัวจัดการถูกผูกไว้เพื่อให้ทราบว่าต้องทำอะไรเมื่อตัวจัดการถูกทริกเกอร์อย่างไรก็ตามมีแอตทริบิวต์บางอย่างที่คุณจะต้องเข้าถึง
คุณสมบัติของเหตุการณ์
| ซีเนียร์ | คุณสมบัติและคำอธิบาย |
|---|---|
| 1 | altKey ตั้งค่าเป็นจริงหากกดปุ่ม Alt เมื่อเหตุการณ์ถูกทริกเกอร์เป็นเท็จถ้าไม่ แป้น Alt มีข้อความว่า Option บนแป้นพิมพ์ Mac ส่วนใหญ่ |
| 2 | ctrlKey ตั้งค่าเป็นจริงหากกดแป้น Ctrl เมื่อเหตุการณ์ถูกทริกเกอร์เป็นเท็จถ้าไม่ |
| 3 | data ค่าถ้ามีจะส่งผ่านเป็นพารามิเตอร์ที่สองไปยังคำสั่ง bind () เมื่อสร้างตัวจัดการ |
| 4 | keyCode สำหรับเหตุการณ์คีย์อัพและคีย์ดาวน์ค่านี้จะส่งคืนคีย์ที่ถูกกด |
| 5 | metaKey ตั้งค่าเป็นจริงหากกดคีย์ Meta เมื่อเหตุการณ์ถูกทริกเกอร์เป็นเท็จถ้าไม่ คีย์ Meta คือปุ่ม Ctrl บนพีซีและปุ่ม Command บน Macs |
| 6 | pageX สำหรับเหตุการณ์ของเมาส์ระบุพิกัดแนวนอนของเหตุการณ์ที่สัมพันธ์จากจุดเริ่มต้นของเพจ |
| 7 | pageY สำหรับเหตุการณ์ของเมาส์ระบุพิกัดแนวตั้งของเหตุการณ์ที่สัมพันธ์กับจุดเริ่มต้นของเพจ |
| 8 | relatedTarget สำหรับเหตุการณ์ของเมาส์ให้ระบุองค์ประกอบที่เคอร์เซอร์ซ้ายหรือป้อนเมื่อเหตุการณ์ถูกทริกเกอร์ |
| 9 | screenX สำหรับเหตุการณ์ของเมาส์ระบุพิกัดแนวนอนของเหตุการณ์ที่สัมพันธ์กับจุดเริ่มต้นของหน้าจอ |
| 10 | screenY สำหรับเหตุการณ์ของเมาส์ให้ระบุพิกัดแนวตั้งของเหตุการณ์ที่สัมพันธ์กับจุดเริ่มต้นของหน้าจอ |
| 11 | shiftKey ตั้งค่าเป็นจริงหากกดแป้น Shift เมื่อเหตุการณ์ถูกทริกเกอร์เป็นเท็จถ้าไม่ |
| 12 | target ระบุองค์ประกอบที่เหตุการณ์ถูกทริกเกอร์ |
| 13 | timeStamp การประทับเวลา (ในหน่วยมิลลิวินาที) เมื่อสร้างเหตุการณ์ |
| 14 | type สำหรับเหตุการณ์ทั้งหมดระบุประเภทของเหตุการณ์ที่ทริกเกอร์ (ตัวอย่างเช่นคลิก) |
| 15 | which สำหรับเหตุการณ์แป้นพิมพ์ระบุรหัสตัวเลขสำหรับคีย์ที่ทำให้เกิดเหตุการณ์และสำหรับเหตุการณ์ของเมาส์ระบุว่าปุ่มใดถูกกด (1 สำหรับซ้าย 2 สำหรับกลาง 3 สำหรับขวา) |
<html>
<head>
<title>The jQuery Example</title>
<script type = "text/javascript"
src = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js">
</script>
<script type = "text/javascript" language = "javascript">
$(document).ready(function() {
$('div').bind('click', function( event ){
alert('Event type is ' + event.type);
alert('pageX : ' + event.pageX);
alert('pageY : ' + event.pageY);
alert('Target : ' + event.target.innerHTML);
});
});
</script>
<style>
.div{ margin:10px;padding:12px; border:2px solid #666; width:60px;}
</style>
</head>
<body>
<p>Click on any square below to see the result:</p>
<div class = "div" style = "background-color:blue;">ONE</div>
<div class = "div" style = "background-color:green;">TWO</div>
<div class = "div" style = "background-color:red;">THREE</div>
</body>
</html>สิ่งนี้จะให้ผลลัพธ์ดังต่อไปนี้ -
วิธีการจัดกิจกรรม
มีรายการวิธีการที่สามารถเรียกใช้บนวัตถุเหตุการณ์ -
| ซีเนียร์ | วิธีการและคำอธิบาย |
|---|---|
| 1 | PreventDefault () ป้องกันไม่ให้เบราว์เซอร์ดำเนินการตามค่าเริ่มต้น |
| 2 | isDefaultPrevented () ส่งคืนว่าเคยเรียก event.preventDefault () บนอ็อบเจ็กต์เหตุการณ์นี้หรือไม่ |
| 3 | stopPropagation () หยุดการเดือดของเหตุการณ์ไปยังองค์ประกอบหลักป้องกันไม่ให้ตัวจัดการพาเรนต์ได้รับแจ้งเกี่ยวกับเหตุการณ์ |
| 4 | isPropagationStopped () ส่งคืนว่าเคยเรียก event.stopPropagation () บนวัตถุเหตุการณ์นี้หรือไม่ |
| 5 | stopImmediatePropagation () หยุดตัวจัดการที่เหลือไม่ให้ดำเนินการ |
| 6 | isImmediatePropagationStopped () ส่งกลับว่าเคยเรียก event.stopImmediatePropagation () บนอ็อบเจ็กต์เหตุการณ์นี้หรือไม่ |
วิธีการจัดการเหตุการณ์
ตารางต่อไปนี้แสดงวิธีการที่เกี่ยวข้องกับเหตุการณ์ที่สำคัญ -
| ซีเนียร์ | วิธีการและคำอธิบาย |
|---|---|
| 1 | ผูก (ประเภท, [ข้อมูล], fn) เชื่อมโยงตัวจัดการกับเหตุการณ์อย่างน้อยหนึ่งเหตุการณ์ (เช่นคลิก) สำหรับแต่ละองค์ประกอบที่ตรงกัน ยังสามารถผูกเหตุการณ์ที่กำหนดเอง |
| 2 | ปิด (เหตุการณ์ [ตัวเลือก] [ตัวจัดการ (eventObject)]) สิ่งนี้ตรงข้ามกับการถ่ายทอดสดโดยจะลบเหตุการณ์สดที่ถูกผูกไว้ |
| 3 | โฮเวอร์ (เหนือออก) จำลองการวางเมาส์เช่นการเลื่อนเมาส์เปิดและปิดวัตถุ |
| 4 | บน (เหตุการณ์ [ตัวเลือก] [ข้อมูล] ตัวจัดการ) เชื่อมโยงตัวจัดการกับเหตุการณ์ (เช่นคลิก) สำหรับองค์ประกอบที่จับคู่ในปัจจุบันและอนาคตทั้งหมด ยังสามารถผูกเหตุการณ์ที่กำหนดเอง |
| 5 | หนึ่ง (ประเภท, [ข้อมูล], fn) เชื่อมโยงตัวจัดการกับเหตุการณ์อย่างน้อยหนึ่งเหตุการณ์เพื่อดำเนินการหนึ่งครั้งสำหรับแต่ละองค์ประกอบที่ตรงกัน |
| 6 | พร้อม (fn) ผูกฟังก์ชันที่จะดำเนินการเมื่อใดก็ตามที่ DOM พร้อมที่จะข้ามผ่านและจัดการ |
| 7 | ทริกเกอร์ (เหตุการณ์ [ข้อมูล]) ทริกเกอร์เหตุการณ์ในทุกองค์ประกอบที่ตรงกัน |
| 8 | triggerHandler (เหตุการณ์ [ข้อมูล]) ทริกเกอร์ตัวจัดการเหตุการณ์ที่ถูกผูกไว้ทั้งหมดบนองค์ประกอบ |
| 9 | เลิกผูก ([type], [fn]) สิ่งนี้จะตรงกันข้ามกับการผูกมันจะลบเหตุการณ์ที่ถูกผูกไว้ออกจากแต่ละองค์ประกอบที่ตรงกัน |
วิธีการช่วยเหลือเหตุการณ์
jQuery ยังมีชุดของฟังก์ชันตัวช่วยเหตุการณ์ซึ่งสามารถใช้เพื่อทริกเกอร์เหตุการณ์เพื่อเชื่อมโยงประเภทเหตุการณ์ที่กล่าวถึงข้างต้น
วิธีการทริกเกอร์
ต่อไปนี้เป็นตัวอย่างที่จะทำให้เกิดเหตุการณ์เบลอในทุกย่อหน้า -
$("p").blur();วิธีการผูก
ต่อไปนี้เป็นตัวอย่างที่จะผูกไฟล์ click เหตุการณ์ใน <div> ทั้งหมด -
$("div").click( function () {
// do something here
});| ซีเนียร์ | วิธีการและคำอธิบาย |
|---|---|
| 1 | blur( ) ทริกเกอร์เหตุการณ์เบลอของแต่ละองค์ประกอบที่ตรงกัน |
| 2 | blur( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์เบลอของแต่ละองค์ประกอบที่ตรงกัน |
| 3 | change( ) ทริกเกอร์เหตุการณ์การเปลี่ยนแปลงของแต่ละองค์ประกอบที่ตรงกัน |
| 4 | change( fn ) ผูกฟังก์ชันกับเหตุการณ์การเปลี่ยนแปลงของแต่ละองค์ประกอบที่ตรงกัน |
| 5 | click( ) ทริกเกอร์เหตุการณ์การคลิกของแต่ละองค์ประกอบที่ตรงกัน |
| 6 | click( fn ) เชื่อมโยงฟังก์ชันกับเหตุการณ์คลิกของแต่ละองค์ประกอบที่ตรงกัน |
| 7 | dblclick( ) ทริกเกอร์เหตุการณ์ dblclick ของแต่ละองค์ประกอบที่ตรงกัน |
| 8 | dblclick( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์ dblclick ของแต่ละองค์ประกอบที่ตรงกัน |
| 9 | error( ) ทริกเกอร์เหตุการณ์ข้อผิดพลาดของแต่ละองค์ประกอบที่ตรงกัน |
| 10 | error( fn ) ผูกฟังก์ชันกับเหตุการณ์ข้อผิดพลาดของแต่ละองค์ประกอบที่ตรงกัน |
| 11 | focus( ) ทริกเกอร์เหตุการณ์โฟกัสของแต่ละองค์ประกอบที่ตรงกัน |
| 12 | focus( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์โฟกัสของแต่ละองค์ประกอบที่ตรงกัน |
| 13 | keydown( ) ทริกเกอร์เหตุการณ์คีย์ดาวน์ของแต่ละองค์ประกอบที่ตรงกัน |
| 14 | keydown( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์คีย์ดาวน์ของแต่ละองค์ประกอบที่ตรงกัน |
| 15 | keypress( ) ทริกเกอร์เหตุการณ์การกดแป้นพิมพ์ของแต่ละองค์ประกอบที่ตรงกัน |
| 16 | keypress( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์การกดแป้นของแต่ละองค์ประกอบที่ตรงกัน |
| 17 | keyup( ) ทริกเกอร์เหตุการณ์คีย์อัพของแต่ละองค์ประกอบที่ตรงกัน |
| 18 | keyup( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์คีย์อัพของแต่ละองค์ประกอบที่ตรงกัน |
| 19 | load( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์โหลดของแต่ละองค์ประกอบที่ตรงกัน |
| 20 | mousedown( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์ที่มีการเลื่อนของแต่ละองค์ประกอบที่ตรงกัน |
| 21 | mouseenter( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์ที่อยู่ตรงกลางของเมาส์ของแต่ละองค์ประกอบที่ตรงกัน |
| 22 | mouseleave( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์การปล่อยเมาส์ของแต่ละองค์ประกอบที่ตรงกัน |
| 23 | mousemove( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์ mousemove ของแต่ละองค์ประกอบที่ตรงกัน |
| 24 | mouseout( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์ mouseout ของแต่ละองค์ประกอบที่ตรงกัน |
| 25 | mouseover( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์การวางเมาส์ของแต่ละองค์ประกอบที่ตรงกัน |
| 26 | mouseup( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์การวางเมาส์ของแต่ละองค์ประกอบที่ตรงกัน |
| 27 | resize( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์การปรับขนาดของแต่ละองค์ประกอบที่ตรงกัน |
| 28 | scroll( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์เลื่อนของแต่ละองค์ประกอบที่ตรงกัน |
| 29 | select( ) ทริกเกอร์เหตุการณ์ที่เลือกของแต่ละองค์ประกอบที่ตรงกัน |
| 30 | select( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์ที่เลือกของแต่ละองค์ประกอบที่ตรงกัน |
| 31 | submit( ) ทริกเกอร์เหตุการณ์ส่งของแต่ละองค์ประกอบที่ตรงกัน |
| 32 | submit( fn ) ผูกฟังก์ชันเข้ากับเหตุการณ์ส่งของแต่ละองค์ประกอบที่ตรงกัน |
| 33 | unload( fn ) ผูกฟังก์ชันกับเหตุการณ์ยกเลิกการโหลดของแต่ละองค์ประกอบที่ตรงกัน |