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

Reference

Reference ในเว็บไซต์ Function.in.th เป็นการนำเสนอความรู้ในรูปแบบของแหล่งอ้างอิงของคำสั่งต่าง ๆ ที่ใช้ในการเขียนโปรแกรม โดยผู้ที่สนใจสามารถเข้ามาเรียนรู้การใช้งานคำสั่งของการเขียนโปรแกรมเหล่านี้ได้ ผ่านทาง URL code.function.in.th ทั้งนี้ผู้อ่านยังสามารถร่วมแสดงความคิดเห็นบนเนื้อหาที่มีสอนได้ ซึ่งถือเป็นการส่งเสริมให้มีการแลกเปลี่ยนประสบการณ์และความรู้ระหว่างผู้อ่านด้วยกันเอง
  • event.currentTarget ใช้คืนค่า element ที่ทำให้เกิดเหตุการณ์ขึ้น
    event.data ใช้คืนค่า object data ที่ส่งผ่านมา ตอน การดักฟังเหตุการณ์
    event.isDefaultPrevented () ใช้ตรวจสอบว่า คำสั่ง preventDefault() ถูกใช้งานอยู่หรือไม่
    event.isImmediatePropagationStopped() ใช้ตรวจสอบว่า คำสั่ง stopImmediatePropagation() ถูกใช้งานอยู่หรือไม่
    event.isPropagationStopped() ใช้ตรวจสอบว่า คำสั่ง stopPropagation() ถูกใช้งานอยู่หรือไม่
    event.pageX ใช้คืนค่า ตำแหน่งของ mouse ใน แกน x ในตอนที่เกิดเหตุการณ์ขึ้น
    event.pageY ใช้คืนค่า ตำแหน่งของ mouse ใน แกน y ในตอนที่เกิดเหตุการณ์ขึ้น
    event.relatedTarget ใช้คืนค่า element ที่สัมพันธ์กับการเกิดเหตุการณ์
    event.preventDefault ( ) ใช้หยุดการเกิดเหตุการณ์ใดๆขึ้น ที่เป็นเหตุการณ์ของ browser
    event.stopImmediatePropagation ( ) ใช้หยุดการเกิดเหตุการณ์ใดๆขึ้น ที่เป็นเหตุการณ์ของ ที่เราได้กำหนดขึ้น คือเหตุการณ์ที่ไม่ได้เกิดขึ้นจาก browser
    event.target ใช้คืนค่า element ที่ทำให้เกิดเหตุการณ์ขึ้น
    event.timeStamp ใช้คืนค่า timestamp ของเวลาที่เกิดเหตุการณ์ขึ้น ( หน่วย millisecond )
    event.type ใช้คืนค่าประเภทของ event เช่น click, dblclick
    event.which คืนค่า key ของ เหตุการณ์ เช่น ค่า ascii ของการกดปุ่มบน keyboard
  • syntax :
    event.currentTarget

    return type :
    element

    content :
    ใช้คืนค่า element ที่ทำให้เกิดเหตุการณ์ขึ้น

    example :
    $("body").delegate("button", "click", function ( event ) {
    	alert ( event.currentTarget.nodeName );
    });

  • syntax :
    event.data

    return type :
    object

    content :
    ใช้คืนค่า object data ที่ส่งผ่านมา ตอน การดักฟังเหตุการณ์

    example :
    $("a#cursor").each( function ( position ) {
    	$(this).bind( "click", { index: position }, function ( event ) {
    		alert ("Position is : ' + event.data.position );
    	});
    });   

  • syntax :
    event.isDefaultPrevented ()

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า คำสั่ง preventDefault() ถูกใช้งานอยู่หรือไม่

    example :
    $("a").click( function ( event ) {
    	alert ( event.isDefaultPrevented() ); // false
    	event.preventDefault();
    	alert ( event.isDefaultPrevented() ); // true
    }); 

  • syntax :
    event.isImmediatePropagationStopped()

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า คำสั่ง stopImmediatePropagation() ถูกใช้งานอยู่หรือไม่

    example :
    $("a").click( function ( event ) {
    	alert( event.isImmediatePropagationStopped() ); // false
    	event.stopImmediatePropagation();
    	alert( event.isImmediatePropagationStopped() ); // true
    });

  • syntax :
    event.isPropagationStopped()

    return type :
    boolean

    content :
    ใช้ตรวจสอบว่า คำสั่ง stopPropagation() ถูกใช้งานอยู่หรือไม่

    example :
    $("a").click( function ( event ) {
     	alert( event.isPropagationStopped() ); // false
      	event.stopPropagation();
      	alert( event.isPropagationStopped() ); // true
    });

  • syntax :
    event.pageX

    return type :
    number

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

    example :
    $(document).bind( "mousemove", function ( event ) { 
    	 alert ( "Position X : " + event.pageX ); 
    });

  • syntax :
    event.pageY

    return type :
    number

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

    example :
    $(document).bind( "mousemove", function ( event ) { 
    	 alert ( "Position Y : " + event.pageY ); 
    });

  • syntax :
    event.relatedTarget

    return type :
    element

    content :
    ใช้คืนค่า element ที่สัมพันธ์กับการเกิดเหตุการณ์
    เช่น mouseout จะคืนค่าว่า out ไปหา element ใด
    หรือ mousein จะคืนค่าว่า in มาจาก element ใด

    example :
    $("button").mouseout( function ( event ) {
    	alert ( "Event MouseOut : " + event.relatedTarget.nodeName ); 
    });  
    $("button").mousein( function ( event ) {
    	alert ( "Event MouseIn : " + event.relatedTarget.nodeName ); 
    });  

  • syntax :
    event.preventDefault ( )

    return type :
    void

    content :
    ใช้หยุดการเกิดเหตุการณ์ใดๆขึ้น ที่เป็นเหตุการณ์ของ browser 
    คือเหตุการณ์ที่ไม่ได้เกิดขึ้นจากการที่เรากำหนดให้มัน
    เช่น จะไม่ link ไปยังหน้าถัดไปของการ click tag a

    example :
    $("a").click( function ( event ) {
    	event.preventDefault();
    
    	// This code will be executed
     	$("<b>Prevent Default</b>").appendTo( "body" ); 
    });

  • syntax :
    event.stopImmediatePropagation ( )

    return type :
    void

    content :
    ใช้หยุดการเกิดเหตุการณ์ใดๆขึ้น ที่เป็นเหตุการณ์ของ ที่เราได้กำหนดขึ้น
    คือเหตุการณ์ที่ไม่ได้เกิดขึ้นจาก browser

    example :
    $("a").click( function ( event ) {
    	event.stopImmediatePropagation();
    	
    	// This code won't be executed
    	$("<b>Stop Immediate Propagation</b>").appendTo( "body" ); 
    });

  • syntax :
    event.target

    return type :
    element

    content :
    ใช้คืนค่า element ที่ทำให้เกิดเหตุการณ์ขึ้น

    example :
    $("body").click( function ( event ) {
    	alert ( event.target.nodeName );
    });

  • syntax :
    event.timeStamp

    return type :
    number

    content :
    ใช้คืนค่า timestamp ของเวลาที่เกิดเหตุการณ์ขึ้น ( หน่วย millisecond )

    example :
    $("body").click ( function ( event ) {
    	alert ( event.timeStamp );
    });

  • syntax :
    event.type

    return type :
    string

    content :
    ใช้คืนค่าประเภทของ event เช่น click, dblclick

    example :
    $("body").click ( function ( event ) {
    	alert ( event.type );
    });

  • syntax :
    event.which

    return type :
    number

    content :
    คืนค่า key ของ เหตุการณ์ เช่น ค่า ascii ของการกดปุ่มบน keyboard

    example :
    $("body").keydown ( function ( event ) {
    	alert ( event.which );
    });

 
Share This Chapter Login with Facebook