Одну из наиболее часто используемых событий составляют события мыши:
click: возникает при нажатии указателем мыши на элемент
dblclick: возникает при двойном нажатии указателем мыши на элемент
contextmenu: возникает при открытии контекстного меню (правой кнопкой мыши)
mousedown: возникает при нахождении указателя мыши на элементе, когда кнопка мыши находится в нажатом состоянии
mouseup: возникает при нахождении указателя мыши на элементе во время отпускания кнопки мыши
mousemove: возникает при прохождении указателя мыши над элементом
mouseover: возникает при вхождении указателя мыши в границы элемента
mouseout: возникает, когда указатель мыши выходит за пределы элемента
mouseenter: возникает при вхождении указателя мыши в границы элемента
mouseleave: возникает, когда указатель мыши выходит за пределы элемента
Отдельно стоит сказать про разницу между последними четырьмя событиями. mouseenter и mouseleave срабатывают только тогда, когда пересекается внешний край соответствующего элемента.
А события mouseover и mouseout также срабатывают, когда другой элемент находится внутри соответствующего элемента и
курсор мыши перемещается во внутренний элемент (т.е. уходит от внешнего элемента) или покидает внутренний элемент (то есть
перемещается на внешний элемент).
Например, обработаем события mouseover и mouseout:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>METANIT.COM</title>
<style>
#blueRect{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="blueRect"></div>
<script>
function setColor(e){
if(e.type==="mouseover")
e.target.style.backgroundColor = "red";
else if(e.type==="mouseout")
e.target.style.backgroundColor = "blue";
}
const blueRect = document.getElementById("blueRect");
blueRect.addEventListener("mouseover", setColor);
blueRect.addEventListener("mouseout", setColor);
</script>
</body>
</html>
Теперь при наведении указателя мыши на блок blueRect он будет окрашиваться в красный цвет, а при уходе указателя мыши - блок будет обратно окрашиваться в синий цвет.
Объект Event является общим для всех событий. Однако для разных типов событий существуют также свои объекты событий, которые добавляют ряд своих свойств. Так, для работы с событиями указателя мыши определен объект MouseEvent, который добавляет следующие свойства:
altKey: возвращает true, если была нажата клавиша Alt во время генерации события
button: содержит номер нажатой кнопки мыши
buttons: содержит номер, который представляет нажатую кнопку мыши. 1 обозначает левую кнопку мыши, 2 — правую кнопку мыши, 4 — колесо мыши или среднюю кнопку мыши, 8 — четвертую кнопку мыши, а 16 — пятую кнопку мыши. Если при срабатывании события было нажато несколько кнопок, это свойство содержат сумму соответствующих чисел.
clientX: определяет координату Х окна браузера, на которой находился указатель мыши во время генерации события
clientY: определяет координату Y окна браузера, на которой находился указатель мыши во время генерации события
ctrlKey: возвращает true, если была нажата клавиша Ctrl во время генерации события
movementX: содержит координату Х относительно предыдущей координаты X при последнем событии перемещения мыши
movementY: содержит координату Y относительно предыдущей координаты Y при последнем событии перемещения мыши
metaKey: возвращает true, если была нажата во время генерации события метаклавиша клавиатуры
region: содержит идентификатор области или элемента, которая относится к событию
relatedTarget: определяет вторичный источник возникновения события
screenX: определяет координату Х относительно верхнего левого угла экрана монитора, на которой находился указатель мыши во время генерации события
screenY: определяет координату Y относительно верхнего левого угла экрана монитора, на которой находился указатель мыши во время генерации события
shiftKey: возвращает true, если была нажата клавиша Shift во время генерации события
Определим координаты клика:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<style>
#blueRect{
width:100px;
height:100px;
background-color:blue;
}
</style>
</head>
<body>
<div id="blueRect"></div>
<script>
function handleClick(e){
console.log("screenX: " + e.screenX);
console.log("screenY: " + e.screenY);
console.log("clientX: " + e.clientX);
console.log("clientY: " + e.clientY);
}
const blueRect = document.getElementById("blueRect");
blueRect.addEventListener("click", handleClick);
</script>
</body>
</html>