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 )

ผูกฟังก์ชันกับเหตุการณ์ยกเลิกการโหลดของแต่ละองค์ประกอบที่ตรงกัน