Đối tượng event

Đối tượng event được tạo ra khi sự kiện kích hoạt và chứa thông tin về nó. Khi sự kiện xuất hiện, đối tượng event được truyền vào hàm xử lý.

Thuộc tính và phương thức của đối tượng event

Dưới đây trong bảng liệt kê các thuộc tính và phương thức của đối tượng event và mô tả của chúng:

Tên	Mô tả
`event.currentTarget`	Phần tử DOM hiện tại ở giai đoạn sự kiện nổi bọt. Thông thường thuộc tính này tương đương với `this` của hàm.
`event.data`	Tham số tùy chọn. Đối tượng dữ liệu, được truyền vào phương thức sự kiện khi đính kèm trình xử lý có thể thực thi.
`event.delegateTarget`	Phần tử mà trình xử lý sự kiện jQuery vừa được gọi đã được đính kèm. Thuộc tính này hữu ích nhất trong các sự kiện được ủy quyền, khi trình xử lý được ràng buộc với phần tử tổ tiên của phần tử được xử lý. Đối với trình xử lý không được ủy quyền, được ràng buộc trực tiếp với phần tử, giá trị `event.delegateTarget` tương ứng với giá trị `event.currentTarget`.
`event.isDefaultPrevented`	Phương thức kiểm tra xem phương thức `event.preventDefault` đã được gọi cho đối tượng sự kiện này chưa.
`event.isImmediatePropagationStopped`	Phương thức kiểm tra xem phương thức `event.stopImmediatePropagation` đã được gọi cho đối tượng sự kiện này chưa.
`event.isPropagationStopped`	Phương thức kiểm tra xem phương thức `event.stopPropagation` đã được gọi cho đối tượng sự kiện này chưa.
`event.isPropagationStopped`	Phương thức kiểm tra xem phương thức `event.stopPropagation` đã được gọi cho đối tượng sự kiện này chưa.
`event.metaKey`	Phương thức kiểm tra xem phím `META` có được nhấn vào thời điểm sự kiện kích hoạt hay không. Tùy thuộc vào nền tảng, phím có thể khác nhau. Trả về `true` hoặc `false`.
`event.namespace`	Không gian tên, được chỉ định tại thời điểm gọi sự kiện. Thuộc tính này sẽ trở nên hữu ích cho các tác giả plugin, nhiệm vụ của họ phụ thuộc vào không gian tên được sử dụng.
`event.pageX`	Hiển thị vị trí chuột tương đối với lề trái của tài liệu.
`event.pageY`	Hiển thị vị trí chuột tương đối với lề trên của tài liệu.
`event.preventDefault`	Nếu phương thức này được gọi, thì hành động mặc định cho sự kiện này sẽ không được thực hiện. Ví dụ, nhấp vào liên kết sẽ không dẫn đến chuyển hướng đến URL mới. Để kiểm tra xem phương thức này có được gọi không, có thể sử dụng phương thức `event.isDefaultPrevented`.
`event.relatedTarget`	Trả về một phần tử DOM khác, tham gia vào sự kiện, nếu có. Đối với `mouseout` cho biết phần tử nào được trỏ chuột vào, đối với `mouseover` phần tử nào mà con trỏ chuột đã được di chuyển ra khỏi.
`event.result`	Giá trị cuối cùng, được trả về bởi trình xử lý sự kiện đã kích hoạt, không bằng `undefined`. Thuộc tính có thể hữu ích để lấy giá trị của các sự kiện riêng.
`event.stopImmediatePropagation`	Hủy bỏ hoạt động của tất cả các trình xử lý sự kiện còn lại, liên quan đến phần tử và ngăn chặn sự kiện nổi bọt lên trên cây DOM. Để chỉ đơn giản ngăn sự kiện nổi bọt lên phần tử tổ tiên, nhưng cho phép các trình xử lý sự kiện khác hoạt động, có thể sử dụng phương thức `event.stopPropagation`. Sử dụng phương thức `event.isImmediatePropagationStopped` để kiểm tra xem `event.stopImmediatePropagation` có được gọi cho đối tượng sự kiện này không.
`event.stopPropagation`	Ngăn chặn sự kiện nổi bọt lên trên cây DOM. Hãy nhớ rằng các trình xử lý khác sẽ tiếp tục hoạt động cho phần tử này. Phương thức này hoạt động cho các sự kiện riêng, được kích hoạt bằng phương thức `trigger`. Để kiểm tra xem phương thức này có được gọi không, hãy sử dụng `event.isPropagationStopped`.
`event.target`	Phần tử DOM, khởi tạo sự kiện. Đây có thể là phần tử đã đăng ký cho sự kiện hoặc phần tử con của nó. Rất hữu ích để so sánh `event.target` và `this`, để xác định sự kiện nổi bọt. Thuộc tính hữu ích khi ủy quyền sự kiện, khi sự kiện nổi bọt.
`event.timeStamp`	Chênh lệch thời gian tính bằng mili giây giữa thời điểm trình duyệt tạo ra sự kiện và ngày 1 Tháng 1 năm 1970. Thuộc tính có thể hữu ích khi xác định hiệu suất của sự kiện bằng cách lấy chênh lệch giá trị `event.timeStamp` tại hai thời điểm trong mã. Nếu bạn chỉ muốn lấy thời gian hiện tại bên trong trình xử lý sự kiện, hãy sử dụng phương thức `getTime`.
`event.type`	Trong thuộc tính này chỉ định loại sự kiện.
`event.which`	Thuộc tính này chỉ định phím nào của bàn phím hoặc chuột đã được nhấn. Đối với chuột: `1` - nút trái, `2` - nút cuộn, `3` - nút phải. Sử dụng `event.which` thay vì `event.button`.

Các thuộc tính khác của đối tượng event

Còn có các thuộc tính khác, được sao chép vào đối tượng event:

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

Để truy cập các thuộc tính không được liệt kê ở trên, có thể sử dụng đối tượng event.originalEvent.

Ví dụ

Hãy hiển thị trong div - các phím nào đã được nhấn:

<input id="test" value="gõ gì đó">
<div id="text"></div>

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

Ví dụ

Hãy hiển thị trong div - thẻ nào chúng ta sẽ nhấp vào:

<body>
	<div id="text"></div>
	<div>
		<p>
			<strong><span>nhấp</span></strong>
		</p>
	</div>
</body>

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

$('body').click(function(event) {
	$('#text').html('đã nhấp vào: ' + event.target.nodeName);
});

Xem thêm

phương thức on,
cho phép ràng buộc trình xử lý sự kiện với phần tử
phương thức trigger,
cho phép kích hoạt tất cả các trình xử lý sự kiện, được ràng buộc với phần tử cho các sự kiện loại đã chỉ định
phương thức triggerHandler,
cho phép kích hoạt tất cả các trình xử lý sự kiện, được ràng buộc với phần tử
sự kiện jQuery