Using the Event
object, you can find out
if the Ctrl
, Alt
, and Shift
keys were pressed at the time of the event. This
is done using the properties ctrlKey
,
altKey
and shiftKey
- they have
the value true
or false
depending
on whether this key was pressed at the time of
the event or not.
Let's look at an example. Let's say we have the following button:
<button id="elem">text</button>
By clicking on the button, we will display a
message about whether one of the keys Ctrl
,
Alt
and Shift
was pressed:
let elem = document.querySelector('#elem');
elem.addEventListener('click', function(event) {
if (event.ctrlKey) {
console.log('Ctrl is pressed');
}
if (event.altKey) {
console.log('Alt is pressed');
}
if (event.shiftKey) {
console.log('Shift is pressed');
}
});
Given an element. Make it turn red when clicked,
but only if the Alt
key is pressed at
the time of the click.
Let's say you have the list ul
with tags li
:
<ul id="elem">
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
<li>text</li>
</ul>
Make it so that when you click on any li
,
the number 1
is added to the end of its
text if the Ctrl
key is pressed, and the
number 2
if Shift
is pressed.