-
-
-
-
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
