Theo dõi các phím sửa đổi trong JavaScript

Với đối tượng Event, bạn có thể biết liệu các phím Ctrl, Alt và Shift có được nhấn vào thời điểm sự kiện hay không. Điều này được thực hiện bằng các thuộc tính ctrlKey, altKey và shiftKey - chúng có giá trị true hoặc false tùy thuộc vào việc phím đó có được nhấn vào thời điểm sự kiện hay không.

Hãy xem một ví dụ. Giả sử chúng ta có một nút sau:

<button id="elem">text</button>

Khi nhấp vào nút, chúng ta sẽ hiển thị thông báo về việc liệu một trong các phím Ctrl, Alt và Shift có được nhấn hay không:

let elem = document.querySelector('#elem');

elem.addEventListener('click', function(event) {
	if (event.ctrlKey) {
		console.log('đã nhấn Ctrl');
	}
	
	if (event.altKey) {
		console.log('đã nhấn Alt');
	}
	
	if (event.shiftKey) {
		console.log('đã nhấn Shift');
	}
});

Cho một phần tử. Hãy làm sao để khi nhấp vào nó, nó chuyển sang màu đỏ, nhưng chỉ khi phím Alt được nhấn vào thời điểm nhấp.

Giả sử bạn có danh sách ul với các thẻ li:

<ul id="elem">
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
	<li>text</li>
</ul>

Hãy làm sao để khi nhấp vào bất kỳ li nào, số 1 được thêm vào cuối văn bản của nó nếu phím Ctrl được nhấn, và số 2, nếu phím Shift được nhấn.