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

Reference

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

 
Share This Chapter Login with Facebook