Reference
Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
-
- Reference
- ::
- JavaScript
- ::
- Event Object
ความหมายของ 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 เกิดขึ้น -
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- ความหมายของ 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
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- การตรวจจับ Event
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 );
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- button
property :button;
return type :number
content :ใช้คืนค่าสถานะของการคลิก mouse เมื่อมีการคลิก mouse โดย 0 คือยังไม่มีการคลิก mouse 1 คือมีการคลิก mouse ซ้าย 2 คือมีการคลิก mouse ขวา 4 คือมีการคลิก mouse ตรงกลาง
example :function stateMouse ( event ) { alert ( event.button ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- type
property :type;
return type :string
content :ใช้คืนค่าชื่อของ event เช่น click, mouseover เป็นต้น
example :function showEventName ( event ) { alert ( event.type ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- screenX
property :screenX;
return type :number
content :ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ หน้าจอ ( screen )
example :function showMousePosition ( event ) { alert ( event.screenX ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- screenY
property :screenY;
return type :number
content :ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ หน้าจอ ( screen )
example :function showMousePosition ( event ) { alert ( event.screenY ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- clientX
property :clientX;
return type :number
content :ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ browser
example :function showMousePosition ( event ) { alert ( event.clientX ); }
comment :ใช้กับ browser IE
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- clientY
property :clientY;
return type :number
content :ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ browser
example :function showMousePosition ( event ) { alert ( event.clientY ); }
comment :ใช้กับ browser IE
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- pageX
property :pageX;
return type :number
content :ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ browser
example :function showMousePosition ( event ) { alert ( event.pageX ); }
comment :ใช้กับ browser Netscape
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- pageY
property :pageY;
return type :number
content :ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ browser
example :function showMousePosition ( event ) { alert ( event.pageY ); }
comment :ใช้กับ browser Netscape
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- layerX
property :layerX;
return type :number
content :ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบกับ layer
example :function showMousePosition ( event ) { alert ( event.layerX ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- layerY
property :layerY;
return type :number
content :ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบกับ layer
example :function showMousePosition ( event ) { alert ( event.layerY ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- offsetX
property :offsetX;
return type :number
content :ใช้คืนค่าตำแหน่งของ mouse ในแกน x โดยเทียบจาก element ที่เกิดเหตุการณ์
example :function showMousePosition ( event ) { alert ( event.offsetX ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- offsetY
property :offsetY;
return type :number
content :ใช้คืนค่าตำแหน่งของ mouse ในแกน y โดยเทียบจาก element ที่เกิดเหตุการณ์
example :function showMousePosition ( event ) { alert ( event.offsetY ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- wheelData
property :wheelData;
return type :number
content :ใช้คืนค่า ระยะทางของการ wheel mouse
example :function showMousePosition ( event ) { alert ( event.wheelData ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- fromElement
property :fromElement;
return type :node
content :ใช้คืนค่า element ที่ mouse เลื่อนออกมา
example :function tagFrom ( event ) { alert ( event.fromElement.tagName ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- toElement
property :toElement;
return type :node
content :ใช้คืนค่า element ที่ mouse เลื่อนเข้าไป
example :function tagFrom ( event ) { alert ( event.toElement.tagName ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- srcElement
property :srcElement;
return type :node
content :ใช้คืนค่า element ที่กำลังเกิด event ขึ้น
example :function elementOfEvent ( event ) { alert ( event.srcElement.tagName ); }
comment :ใช้กับ browser IE
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- currentTarget
property :currentTarget;
return type :node
content :ใช้คืนค่า element ที่กำลังเกิด event ขึ้น
example :function elementOfEvent ( event ) { alert ( event.currentTarget.tagName ); }
comment :ใช้กับ browser Netscape
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- charCode
property :charCode;
return type :number
content :ใช้คืนค่ารหัส ascii เมื่อมีการกดปุ่มบน Keyboard
example :function showCharCode ( event ) { alert ( event.charCode ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- keyCode
property :keyCode;
return type :number
content :ใช้คืนค่ารหัส unicode เมื่อมีการกดปุ่มบน Keyboard
example :function showUnicode ( event ) { alert ( event.keyCode ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- altKey
property :altKey;
return type :boolean
content :ใช้ตรวจสอบว่ามีการกดปุ่ม alt หรือไม่
example :function isClickAlt ( event ) { if ( event.altKey ) { alert ( "Your pressed key alt" ); } }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- altLeft
property :altLeft;
return type :boolean
content :ใช้ตรวจสอบว่ามีการกดปุ่ม left alt หรือไม่
example :function isClickLeftAlt ( event ) { if ( event.altLeft ) { alert ( "Your pressed key left alt" ); } }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- ctrlKey
property :boolean
return type :
content :ใช้ตรวจสอบว่ามีการกดปุ่ม ctrl หรือไม่
example :function isClickCtrl ( event ) { if ( event.ctrlKey ) { alert ( "Your pressed key ctrl" ); } }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- ctrlLeft
property :ctrlLeft;
return type :boolean
content :ใช้ตรวจสอบว่ามีการกดปุ่ม left ctrl หรือไม่
example :function isClickLeftCtrl ( event ) { if ( event.ctrlLeft ) { alert ( "Your pressed key left ctrl" ); } }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- shiftKey
property :shiftKey;
return type :boolean
content :ใช้ตรวจสอบว่ามีการกดปุ่ม shift หรือไม่
example :function isClickShift ( event ) { if ( event.shiftKey ) { alert ( "Your pressed key shift" ); } }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- shiftLeft
property :shiftLeft;
return type :boolean
content :ใช้ตรวจสอบว่ามีการกดปุ่ม left shift หรือไม่
example :function isClickLeftShift ( event ) { if ( event.shiftLeft ) { alert ( "Your pressed key left shift" ); } }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- detail
property :detail;
return type :string
content :ใช้คืนค่า รายละเอียดของ event
example :function showDetailOfEvent ( event ) { alert ( event.detail ); }
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- cancelBubble
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
-
- Reference
- ::
- JavaScript
- ::
- Event Object
- ::
- returnValue
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