วัตถุ event

วัตถุ event ถูกสร้างขึ้นเมื่อมีเหตุการณ์เกิดขึ้นและมีข้อมูลเกี่ยวกับเหตุการณ์นั้น เมื่อเหตุการณ์ปรากฏขึ้น วัตถุ event จะถูกส่งไปยังฟังก์ชันตัวจัดการ

คุณสมบัติและเมธอดของวัตถุ event

ด้านล่างในตารางระบุคุณสมบัติและเมธอดของวัตถุ event และคำอธิบาย:

ชื่อ	คำอธิบาย
`event.currentTarget`	องค์ประกอบ DOM ปัจจุบันในขั้นตอนการแพร่กระจาย (bubbling) ของเหตุการณ์ โดยปกติคุณสมบัตินี้จะเทียบเท่ากับ `this` ของฟังก์ชัน
`event.data`	พารามิเตอร์เสริม (ไม่บังคับ) วัตถุข้อมูลที่ส่งผ่านไปยังเมธอดเหตุการณ์เมื่อแนบตัวจัดการที่ทำงานได้
`event.delegateTarget`	องค์ประกอบที่ตัวจัดการเหตุการณ์ jQuery ที่เพิ่งถูกเรียกได้ถูกแนบไว้ คุณสมบัตินี้มีประโยชน์มากที่สุดในเหตุการณ์ที่มอบหมาย (delegated events) เมื่อตัวจัดการถูกผูกกับบรรพบุรุษขององค์ประกอบที่กำลังถูกประมวลผล สำหรับตัวจัดการที่ไม่ได้มอบหมายซึ่งผูกโดยตรงกับองค์ประกอบ ค่า `event.delegateTarget` จะสอดคล้องกับค่า `event.currentTarget`
`event.isDefaultPrevented`	เมธอดตรวจสอบว่าเมธอด `event.preventDefault` ถูกเรียกสำหรับวัตถุเหตุการณ์นี้หรือไม่
`event.isImmediatePropagationStopped`	เมธอดตรวจสอบว่าเมธอด `event.stopImmediatePropagation` ถูกเรียกสำหรับวัตถุเหตุการณ์นี้หรือไม่
`event.isPropagationStopped`	เมธอดตรวจสอบว่าเมธอด `event.stopPropagation` ถูกเรียกสำหรับวัตถุเหตุการณ์นี้หรือไม่
`event.metaKey`	เมธอดตรวจสอบว่าปุ่ม `META` ถูกกดในช่วงเวลาที่เหตุการณ์เกิดขึ้นหรือไม่ ขึ้นอยู่กับแพลตฟอร์ม ปุ่มอาจแตกต่างกัน คืนค่า `true` หรือ `false`
`event.namespace`	เนมสเปซที่ระบุในเวลาที่เรียกเหตุการณ์ คุณสมบัตินี้จะมีประโยชน์สำหรับผู้เขียนปลั๊กอินซึ่งงานขึ้นอยู่กับเนมสเปซที่ใช้
`event.pageX`	แสดงตำแหน่งของเมาส์สัมพันธ์กับขอบด้านซ้ายของเอกสาร
`event.pageY`	แสดงตำแหน่งของเมาส์สัมพันธ์กับขอบด้านบนของเอกสาร
`event.preventDefault`	หากเรียกเมธอดนี้ การดำเนินการเริ่มต้นสำหรับเหตุการณ์นี้จะไม่ถูกดำเนินการ ตัวอย่างเช่น การคลิกที่ลิงก์จะไม่นำไปยัง URL ใหม่ หากต้องการตรวจสอบว่าเมธอดนี้ถูกเรียกหรือไม่ สามารถใช้เมธอด `event.isDefaultPrevented`
`event.relatedTarget`	คืนค่าองค์ประกอบ DOM อื่นที่เกี่ยวข้องกับเหตุการณ์ ถ้ามี สำหรับ `mouseout` แสดงว่าองค์ประกอบใดที่เมาส์ชี้ไป สำหรับ `mouseover` แสดงว่าองค์ประกอบใดที่เคอร์เซอร์เมาส์ถูกย้ายออกมา
`event.result`	ค่าสุดท้ายที่ตัวจัดการเหตุการณ์ที่เกิดขึ้นคืนค่า ซึ่งไม่เท่ากับ `undefined` คุณสมบัตินี้อาจมีประโยชน์สำหรับการรับค่าของเหตุการณ์ที่กำหนดเอง
`event.stopImmediatePropagation`	ยกเลิกการทำงานของตัวจัดการเหตุการณ์ที่เหลือทั้งหมดที่เกี่ยวข้องกับองค์ประกอบและป้องกันไม่ให้เหตุการณ์แพร่กระจายขึ้นไปในต้นไม้ DOM หากต้องการเพียงป้องกันไม่ให้เหตุการณ์แพร่กระจายไปยังองค์ประกอบบรรพบุรุษ แต่ยังอนุญาตให้ตัวจัดการเหตุการณ์อื่นทำงาน สามารถใช้เมธอด `event.stopPropagation` ใช้เมธอด `event.isImmediatePropagationStopped` เพื่อตรวจสอบว่า `event.stopImmediatePropagation` ถูกเรียกสำหรับวัตถุเหตุการณ์นี้หรือไม่
`event.stopPropagation`	ป้องกันไม่ให้เหตุการณ์แพร่กระจายขึ้นไปในต้นไม้ DOM โปรดจำไว้ว่าตัวจัดการอื่นจะยังคงทำงานสำหรับองค์ประกอบนี้ เมธอดนี้ทำงานสำหรับเหตุการณ์ที่กำหนดเองซึ่งถูกเรียกโดยใช้เมธอด `trigger` หากต้องการตรวจสอบว่าเมธอดนี้ถูกเรียกหรือไม่ ใช้ `event.isPropagationStopped`
`event.target`	องค์ประกอบ DOM ที่เป็นจุดเริ่มต้นของเหตุการณ์ อาจเป็นองค์ประกอบที่ลงทะเบียนสำหรับเหตุการณ์หรือองค์ประกอบลูกของมัน มีประโยชน์มากในการเปรียบเทียบ `event.target` และ `this` เพื่อระบุการแพร่กระจายของเหตุการณ์ คุณสมบัตินี้มีประโยชน์เมื่อมอบหมายเหตุการณ์ เมื่อเหตุการณ์แพร่กระจาย
`event.timeStamp`	ความแตกต่างของเวลาในหน่วยมิลลิวินาทีระหว่างช่วงเวลาที่เบราว์เซอร์สร้างเหตุการณ์และวันที่ 1 มกราคม 1970 คุณสมบัตินี้อาจมีประโยชน์ในการกำหนดประสิทธิภาพของเหตุการณ์โดยการรับค่าความแตกต่างของ `event.timeStamp` สำหรับสองช่วงเวลาในโค้ด หากคุณเพียงต้องการรับเวลาปัจจุบันภายในตัวจัดการเหตุการณ์ ให้ใช้เมธอด `getTime`
`event.type`	คุณสมบัตินี้ระบุประเภทของเหตุการณ์
`event.which`	คุณสมบัตินี้ระบุว่าปุ่มคีย์บอร์ดหรือเมาส์ใดถูกกด สำหรับเมาส์: `1` - ปุ่มซ้าย, `2` - ล้อเลื่อน, `3` - ปุ่มขวา ใช้ `event.which` แทน `event.button`

คุณสมบัติอื่นๆ ของวัตถุ event

ยังมีคุณสมบัติอื่นๆ ที่ถูกคัดลอกไปยังวัตถุ event:

altKey, button, buttons, cancelable, char, charCode, clientX, clientY, ctrlKey, detail, eventPhase, key, keyCode, offsetX, offsetY, originalTarget, screenX, screenY, shiftKey, toElement, view

เพื่อเข้าถึงคุณสมบัติที่ไม่ได้ระบุไว้ด้านบน สามารถใช้วัตถุ event.originalEvent

ตัวอย่าง

มาแสดงใน div ว่าปุ่มใดถูกกด:

<input id="test" value="พิมพ์อะไรบางอย่าง">
<div id="text"></div>

$('#test').on('keydown', function(event) {
	$('#text').html(event.type + ": " +  event.which);
});

ตัวอย่าง

มาแสดงใน div ว่าเราจะคลิกที่แท็กใด:

<body>
	<div id="text"></div>
	<div>
		<p>
			<strong><span>คลิก</span></strong>
		</p>
	</div>
</body>

span, strong, p {
	display: block;
	padding: 10px;
	border: 1px solid black;
}

$('body').click(function(event) {
	$('#text').html('คลิกที่: ' + event.target.nodeName);
});

ดูเพิ่มเติม

เมธอด on,
ซึ่งอนุญาตให้ผูกตัวจัดการเหตุการณ์กับองค์ประกอบ
เมธอด trigger,
ซึ่งอนุญาตให้เรียกใช้ตัวจัดการเหตุการณ์ทั้งหมดที่ผูกกับองค์ประกอบสำหรับประเภทเหตุการณ์ที่กำหนด
เมธอด triggerHandler,
ซึ่งอนุญาตให้เรียกใช้ตัวจัดการเหตุการณ์ทั้งหมดที่ผูกกับองค์ประกอบ
เหตุการณ์ jQuery