JavaScript Event Object : สอน method และ property ของ Event Object, เรียน method และ property ของ Event Object
 

Reference

วิดีโอสอนเขียนโปรแกรม Step-By-Step โดยมีสอนตั้งแต่พื้นฐาน
 
Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง

  • ความหมายของ Event Event คือเหตุการณืต่างๆที่เกิดขึ้น เช่น ผู้ใช้คลิกเมาส์ ผู้ใช้กดปุ่มบนคีย์บอร์ด การพิมพ์ข้อมูลลงในฟอร์ม เป็นต้น
    ความหมายของ Action Action คือการกระทำใดๆเมื่อมีเหตุการณืเกิดขึ้น
    ลำดับการทำงานของ Event ลำดับการทำงานของ Event เป็นออกเป็น 2 กลุ่ม ได้แก่ Event Bubble และ Event Propagation
    Event ใน JavaScript เช่น onLoad, onUnload, onScroll, onSubmit, onKeyPress, onKeyDown, onKeyUp เป็นต้น
    Object ที่ใช้งานกับ Event ต่างๆ แต่ละ object จะสามารถใช้ event ใดๆได้แตกต่างกัน
    การตรวจจับ Event ได้แก่ Event Handler และ Event Listener
    คำสั่งที่ใช้ในการตรวจจับ Event โดย Event Handler คำสั่งที่ใช้ในการตรวจจับ Event โดย Event Handler ( ใน tag html )
    คำสั่งที่ใช้ในการหยุดการทำงานของ Event ใช้หยุดการทำงานของ event
    คำสั่งที่ใช้ในการหยุดการทำงานของ Event ใช้หยุดการทำงานของ event
    คำสั่งที่ใช้ในการกำหนดให้ Event ไม่ทำงาน ใช้กำหนดให้ Event ไม่ทำงาน คือเหมือนไม่มี Event เกิดขึ้น
    คำสั่งที่ใช้ในการกำหนดให้ Event ไม่ทำงาน ใช้กำหนดให้ Event ไม่ทำงาน คือเหมือนไม่มี Event เกิดขึ้น
    button ใช้คืนค่าสถานะของการคลิก mouse เมื่อมีการคลิก mouse
    type ใช้คืนค่าชื่อของ event เช่น click, mouseover เป็นต้น
    screenX ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ หน้าจอ ( screen )
    screenY ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ หน้าจอ ( screen )
    clientX ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ browser
    clientY ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ browser
    pageX ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ browser
    pageY ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ browser
    layerX ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ layer
    layerY ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ layer
    offsetX ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบจาก element ที่เกิดเหตุการณ์
    offsetY ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบจาก element ที่เกิดเหตุการณ์
    wheelData ใช้คืนค่า ระยะทางของการ wheel mouse
    fromElement ใช้คืนค่า element ที่ mouse เลื่อนออกมา
    toElement ใช้คืนค่า element ที่ mouse เลื่อนเข้าไป
    srcElement ใช้คืนค่า element ที่กำลังเกิด event ขึ้น
    currentTarget ใช้คืนค่า element ที่กำลังเกิด event ขึ้น
    charCode ใช้คืนค่ารหัส ascii เมื่อมีการกดปุ่มบน Keyboard
    keyCode ใช้คืนค่ารหัส unicode เมื่อมีการกดปุ่มบน Keyboard
    altKey ใช้ตรวจสอบว่ามีการกดปุ่ม alt หรือไม่
    altLeft ใช้ตรวจสอบว่ามีการกดปุ่ม left alt หรือไม่
    ctrlKey ใช้ตรวจสอบว่ามีการกดปุ่ม ctrl หรือไม่
    ctrlLeft ใช้ตรวจสอบว่ามีการกดปุ่ม left ctrl หรือไม่
    shiftKey ใช้ตรวจสอบว่ามีการกดปุ่ม shift หรือไม่
    shiftLeft ใช้ตรวจสอบว่ามีการกดปุ่ม left shift หรือไม่
    detail ใช้คืนค่า รายละเอียดของ event
    cancelBubble ใช้กำหนดว่าต้องการหยุดการทำงานของ event ( กำหนดให้เป็น true )
    returnValue ใช้กำหนดให้ event ไม่ทำงาน ( กำหนดให้เป็น false ) คือเหมือนไม่มี Event เกิดขึ้น

  • subject : 
    ความหมายของ Event

    content : 
    Event คือเหตุการณืต่างๆที่เกิดขึ้น เช่น ผู้ใช้คลิกเมาส์ ผู้ใช้กดปุ่มบนคีย์บอร์ด การพิมพ์ข้อมูลลงในฟอร์ม เป็นต้น

  • subject : 
    ความหมายของ Action

    content : 
    Action คือการกระทำใดๆเมื่อมีเหตุการณืเกิดขึ้น เช่น เมื่อเกิดเหตุการณ์ที่ผู้ใช้คลิกเมาส์ การกระทำ ( action )
คือจะกำหนดให้ปรากฏ Message Box เป็นต้น

  • subject : 
    ลำดับการทำงานของ Event

    content : 
    Event Bubble
เป็นการตรวจจับ Event จากโค้ดภายในสุด ( tag ในสุด ) แล้วทำงานตามลำดับออกมาข้างนอกสุด ( tag นอกสุด )
เช่น browser IE

Event Propagation
เป็นการตรวจจับ Event จากโค้ดภายนอกสุด ( tag นอกสุด ) แล้วทำงานตามลำดับเข้าไปข้างในสุด ( tag ในสุด )
เช่น browser Netscape

  • subject : 
    Event ใน JavaScript

    content : 
    onLoad จะทำงานเมื่อ มีการโหลด window หรือ frame ขึ้นมา
onUnLoad จะทำงานเมื่อ มีการกดปิด web page
onError จะทำงานเมื่อ มีความผิดพลาดเกิดขึ้นบน web page
onAbort จะทำงานเมื่อ มีการยกเลิกการทำงาน เช่น การหยุด download

onMove จะทำงานเมื่อ มีการย้าย window หรือ frame
onResize จะทำงานเมื่อ มีการปรับขนาดของ window หรือ frame
onScroll จะทำงานเมื่อ มีการเลื่อน scrollbar

onFocus จะทำงานเมื่อ object นั้นๆได้รับ focus
onBlur จะทำงานเมื่อ object นั้นๆสูญเสีย focus

onDblClick จะทำงานเมื่อ มีการ double click ที่ Object นั้นๆ
onClick จะทำงานเมื่อ มีการ click ที่ object นั้นๆ
onSubmit จะทำงานเมื่อ มีการกด submit ใน form
onReset จะทำงานเมื่อ มีการกด reset ใน form

onMouseMove จะทำงานเมื่อ มีการเลื่อนเมาส์อยู่บน object
onMouseOver จะทำงานเมื่อ มีการเลื่อนเมาส์อยู่บน object นั้นๆครั้งแรก
onMouseOut จะทำงานเมื่อ มีการเลื่อนเมาส์ออกจาก object นั้นๆครั้งแรก
onMouseDown จะทำงานเมื่อ มีการคลิกเมาส์ลงบน object นั้นๆ
onMouseUp จะทำงานเมื่อ มีการปล่อยเมาส์ที่คลิกลงบน object นั้น

onKeyPress จะทำงานเมื่อ มีการกดปุ่มใดๆบน keyboard บน object นั้นๆ
onKeyDown จะทำงานเมื่อ มีการกดปุ่มใดๆบน Keyboard บน object นั้นๆ
onKeyUp จะทำงานเมื่อ มีการปล่อยปุ่มที่กดบน Keyboard บน object นั้น

onSelect จะทำงานเมื่อ มีการลาแถบสีคลุมข้อความในช่องรับข้อมูล
onChange จะทำงานเมื่อ ข้อมูลในช่องรับข้อมูลมีการเปลี่ยนแปลง

  • subject : 
    Object ที่ใช้งานกับ Event ต่างๆ

    content : 
    Window
onLoad, onUnLoad, onError, onResize, onFocus, onBlur, onMove

Document
onLoad, onUnLoad, onResize, onFocus, onBlur, onDblClick, onClick,
onMouseMove, onMouseOver, onMouseOut, onMouseDown, onMouseUp,
onKeyPress, onKeyDown, onKeyUp

HyperTextLink
onLoad, onFocus, onClick, onMouseOver

Form
onSubmit, onReset

TextElement
onFocus, onBlur, onClick, onKeyPress, onKeyDown, onKeyUp,
onSelect, onChange, onSelectStart

Submit Button
onFocus, onBlur, onClick, onSelect, onSelectStart

Reset Button
onFocus, onBlur, onClick, onSelect, onSelectStart

Button Element
onFocus, onBlur, onClick, onMouseDown, onMouseUp

CheckBox
onFocus, onBlur, onClick, onMouseDown, onMouseUp

RadioButton
onFocus, onBlur, onClick, onSelect, onSelectStart

SelectionList
onFocus, onBlur, onClick, onChange

  • subject : 
    การตรวจจับ Event

    content : 
    การตรวจจับ Event มี 2 แบบ ดังนี้
- Event Handler เป็นแบบ Local
- Event Listener เป็นแบบ Global

  • subject : 
    คำสั่งที่ใช้ในการตรวจจับ Event โดย Event Handler ( ใน tag html )

    syntax : 
    <tagHtml eventName="javascript code"> ... </tagHtml>

    content : 
    เป็นการตรวจจับเหตุการณ์ โดยแทรกไว้ใน tagHtml ที่ต้องการเลย และสามารถกำหนดการกระทำ ( action )
ได้ทั้งการเรียกใช้ function หรือคำสั่งโดยตรง

    example : 
    <b onclick="alert('welcome');">bamboolabcode.com</b>

  • subject : 
    คำสั่งที่ใช้ในการหยุดการทำงานของ Event ( ของ browser IE )

    syntax : 
    cancelBubble ();

    content : 
    ใช้หยุดการทำงานของ event

    example : 
    function stopRight ( event )
{
     if ( event.button == 2 )
     {
          event.cancelBubble();
          // event.cancelBubble = true;
     }
}
document.attachEvent ( "onclick", stopRight );

  • subject : 
    คำสั่งที่ใช้ในการหยุดการทำงานของ Event ( ของ browser Netscape )

    syntax : 
    stopPropagation ();

    content : 
    ใช้หยุดการทำงานของ event

    example : 
    function stopRight ( event )
{
     if ( event.button == 2 )
     {
          event.stopPropagation();
     }
}
document.addEventListener ( "click", stopRight, false );

  • subject : 
    คำสั่งที่ใช้ในการกำหนดให้ Event ไม่ทำงาน ( ของ browser IE )

    syntax : 
    returnValue ();

    content : 
    ใช้กำหนดให้ Event ไม่ทำงาน คือเหมือนไม่มี Event เกิดขึ้น

    example : 
    function notInputData ( event )
{
     event.returnValue();
     // event.returnValue = false;
}
var tagText = document.getElementById ( "bamboo" );
tagText.attachEvent ( "onkeypress", notInputData );

  • subject : 
    คำสั่งที่ใช้ในการกำหนดให้ Event ไม่ทำงาน ( ของ browser Netscape )

    syntax : 
    preventDefault ();

    content : 
    ใช้กำหนดให้ Event ไม่ทำงาน คือเหมือนไม่มี Event เกิดขึ้น

    example : 
    function notInputData ( event )
{
     event.preventDefault();
}
var tagText = document.getElementById ( "bamboo" );
tagText.addEventListener ( "keypress", notInputData, false );

  • property : 
    button;

    return type : 
    number

    content : 
    ใช้คืนค่าสถานะของการคลิก mouse เมื่อมีการคลิก mouse โดย
0 คือยังไม่มีการคลิก mouse
1 คือมีการคลิก mouse ซ้าย
2 คือมีการคลิก mouse ขวา
4 คือมีการคลิก mouse ตรงกลาง

    example : 
    function stateMouse ( event )
{
     alert ( event.button );
}

  • property : 
    type;

    return type : 
    string

    content : 
    ใช้คืนค่าชื่อของ event เช่น click, mouseover เป็นต้น

    example : 
    function showEventName ( event )
{
     alert ( event.type );
}

  • property : 
    screenX;

    return type : 
    number

    content : 
    ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ หน้าจอ ( screen )

    example : 
    function showMousePosition ( event )
{
     alert ( event.screenX );
}

  • property : 
    screenY;

    return type : 
    number

    content : 
    ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ หน้าจอ ( screen )

    example : 
    function showMousePosition ( event )
{
     alert ( event.screenY );
}

  • property : 
    clientX;

    return type : 
    number

    content : 
    ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ browser

    example : 
    function showMousePosition ( event )
{
     alert ( event.clientX );
}

    comment : 
    ใช้กับ browser IE

  • property : 
    clientY;

    return type : 
    number

    content : 
    ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ browser

    example : 
    function showMousePosition ( event )
{
     alert ( event.clientY );
}

    comment : 
    ใช้กับ browser IE

  • property : 
    pageX;

    return type : 
    number

    content : 
    ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ browser

    example : 
    function showMousePosition ( event )
{
     alert ( event.pageX );
}

    comment : 
    ใช้กับ browser Netscape

  • property : 
    pageY;

    return type : 
    number

    content : 
    ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ browser

    example : 
    function showMousePosition ( event )
{
     alert ( event.pageY );
}

    comment : 
    ใช้กับ browser Netscape

  • property : 
    layerX;

    return type : 
    number

    content : 
    ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ layer

    example : 
    function showMousePosition ( event )
{
     alert ( event.layerX );
}

  • property : 
    layerY;

    return type : 
    number

    content : 
    ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ layer

    example : 
    function showMousePosition ( event )
{
     alert ( event.layerY );
}

  • property : 
    offsetX;

    return type : 
    number

    content : 
    ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบจาก element ที่เกิดเหตุการณ์

    example : 
    function showMousePosition ( event )
{
     alert ( event.offsetX );
}

  • property : 
    offsetY;

    return type : 
    number

    content : 
    ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบจาก element ที่เกิดเหตุการณ์

    example : 
    function showMousePosition ( event )
{
     alert ( event.offsetY );
}

  • property : 
    wheelData;

    return type : 
    number

    content : 
    ใช้คืนค่า ระยะทางของการ wheel mouse

    example : 
    function showMousePosition ( event )
{
     alert ( event.wheelData );
}

  • property : 
    fromElement;

    return type : 
    node

    content : 
    ใช้คืนค่า element ที่ mouse เลื่อนออกมา

    example : 
    function tagFrom ( event )
{
     alert ( event.fromElement.tagName );
}

  • property : 
    toElement;

    return type : 
    node

    content : 
    ใช้คืนค่า element ที่ mouse เลื่อนเข้าไป

    example : 
    function tagFrom ( event )
{
     alert ( event.toElement.tagName );
}

  • property : 
    srcElement;

    return type : 
    node

    content : 
    ใช้คืนค่า element ที่กำลังเกิด event ขึ้น

    example : 
    function elementOfEvent ( event )
{
     alert ( event.srcElement.tagName );
}

    comment : 
    ใช้กับ browser IE

  • property : 
    currentTarget;

    return type : 
    node

    content : 
    ใช้คืนค่า element ที่กำลังเกิด event ขึ้น

    example : 
    function elementOfEvent ( event )
{
     alert ( event.currentTarget.tagName );
}

    comment : 
    ใช้กับ browser Netscape

  • property : 
    charCode;

    return type : 
    number

    content : 
    ใช้คืนค่ารหัส ascii เมื่อมีการกดปุ่มบน Keyboard

    example : 
    function showCharCode ( event )
{
     alert ( event.charCode );
}

  • property : 
    keyCode;

    return type : 
    number

    content : 
    ใช้คืนค่ารหัส unicode เมื่อมีการกดปุ่มบน Keyboard

    example : 
    function showUnicode ( event )
{
     alert ( event.keyCode );
}

  • property : 
    altKey;

    return type : 
    boolean

    content : 
    ใช้ตรวจสอบว่ามีการกดปุ่ม alt หรือไม่

    example : 
    function isClickAlt ( event )
{
     if ( event.altKey )
     {
          alert ( "Your pressed key alt" );
     }
}

  • property : 
    altLeft;

    return type : 
    boolean

    content : 
    ใช้ตรวจสอบว่ามีการกดปุ่ม left alt หรือไม่

    example : 
    function isClickLeftAlt ( event )
{
     if ( event.altLeft )
     {
          alert ( "Your pressed key left alt" );
     }
}

  • property : 
    boolean

    return type : 

    
																												content
						:
						
    ใช้ตรวจสอบว่ามีการกดปุ่ม ctrl หรือไม่

    
																												example
						:
						
    function isClickCtrl ( event )
{
     if ( event.ctrlKey )
     {
          alert ( "Your pressed key ctrl" );
     }
}

    
																																							
    
						
    • 
										
  • 
						
    
							
						
    
						
    
															property
						:
						
    ctrlLeft;

    
																												return type
						:
						
    boolean

    
																												content
						:
						
    ใช้ตรวจสอบว่ามีการกดปุ่ม left ctrl หรือไม่

    
																												example
						:
						
    function isClickLeftCtrl ( event )
{
     if ( event.ctrlLeft )
     {
          alert ( "Your pressed key left ctrl" );
     }
}

    
																																							
    
						
    • 
										
  • 
						
    
							
						
    
						
    
															property
						:
						
    shiftKey;

    
																												return type
						:
						
    boolean

    
																												content
						:
						
    ใช้ตรวจสอบว่ามีการกดปุ่ม shift หรือไม่

    
																												example
						:
						
    function isClickShift ( event )
{
     if ( event.shiftKey )
     {
          alert ( "Your pressed key shift" );
     }
}

    
																																							
    
						
    • 
										
  • 
						
    
							
						
    
						
    
															property
						:
						
    shiftLeft;

    
																												return type
						:
						
    boolean

    
																												content
						:
						
    ใช้ตรวจสอบว่ามีการกดปุ่ม left shift หรือไม่

    
																												example
						:
						
    function isClickLeftShift ( event )
{
     if ( event.shiftLeft )
     {
          alert ( "Your pressed key left shift" );
     }
}

    
																																							
    
						
    • 
										
  • 
						
    
							
						
    
						
    
															property
						:
						
    detail;

    
																												return type
						:
						
    string

    
																												content
						:
						
    ใช้คืนค่า รายละเอียดของ event

    
																												example
						:
						
    function showDetailOfEvent ( event )
{
     alert ( event.detail );
}

    
																																							
    
						
    • 
										
  • 
						
    
							
						
    
						
    
															property
						:
						
    cancelBubble;

    
																												return type
						:
						
    void

    
																												content
						:
						
    ใช้กำหนดว่าต้องการหยุดการทำงานของ event ( กำหนดให้เป็น true )

    
																												example
						:
						
    function stopRight ( event )
{
     if ( event.button == 2 )
     {
          event.cancelBubble = true;
     }
}
document.attachEvent ( "onclick", stopRight );

    
																												comment
						:
						
    ใช้กับ browser IE

    
																																							
    
						
    • 
										
  • 
						
    
							
						
    
						
    
															property
						:
						
    returnValue;

    
																												return type
						:
						
    void

    
																												content
						:
						
    ใช้กำหนดให้  event ไม่ทำงาน ( กำหนดให้เป็น false ) คือเหมือนไม่มี Event เกิดขึ้น

    
																												example
						:
						
    function notInputData ( event )
{
     event.returnValue = false;
}
var tagText = document.getElementById ( "bamboo" );
tagText.attachEvent ( "onkeypress", notInputData );

    
																												comment
						:
						
    ใช้กับ browser IE

    
																	
    
			
    • 
				
	




		

	

	
 

	

	

		รับสร้างแอพ
		| รับทำแอพ
		| ป้ายโฆษณาดิจิตอล
		| Digital Signage
		| รับทำโฆษณาออนไลน์
	

	

				Copyright © 2010-2013 function.in.th All rights reserved.
		
		| About Us
		| Policy
		| Badge
	

	

		Contact : nutt@function.in.th 
	


		

											
				Share This Chapter			
				
				
			Login with Facebook