Ниже — абсолютно бесполезная визуализация сказанного:
Вы уже несколько раз видели код для работы с событием клика, но его никогда не бывает достаточно, поэтому вот вам еще один пример:
let button = document.querySelector("#myButton");
button.addEventListener("click", doSomething, false);
function doSomething(e) {
console.log("Mouse clicked on something!");
}
Прослушивание события click аналогично практически любому другому событию, поэтому не стану утомлять вас подробностями нашей старой знакомой функции addEventListener. Вместо этого утомлю вас подробностями, связанными с событием dblclick.
dblclick срабатывает, когда вы быстро щелкаете мышью дважды. Код для использования этого события будет следующим:
let button = document.querySelector("#myButton");
button.addEventListener("dblclick", doSomething, false);
function doSomething(e) {
console.log("Mouse clicked on something…twice!");
}
Время между кликами, определяющее срабатывание события dblclick, заложено в ОС, где происходит выполнение кода. Оно не зависит от браузера и не определяется (не считывается) пользователем с помощью JavaScript.
НЕ ПЕРЕГРУЖАЙТЕ
Если вдруг случится прослушивать и событие click, и событие dblclick для элемента, обработчики событий будут вызваны три раза при двойном щелчке. Вы получите два события щелчка, которые будут соответствовать каждому щелчку. После второго щелчка вы также получите событие dblclick.
Наведение и отведение курсора
Классические сценарии наведения и отведения курсора обрабатываются логично названными событиями mouseover и mouseout соответственно:
Вот фрагмент кода с применением этих событий:
let button = document.querySelector("#myButton");
button.addEventListener("mouseover", hovered, false);
button.addEventListener("mouseout", hoveredOut, false);
function hovered(e) {
console.log("Hovered!");
}
function hoveredOut(e) {
console.log("Hovered Away!");
}
Это все, что касается этих событий. По большому счету, они весьма скучны, что, как вы уже наверняка поняли, даже хорошо, когда дело касается принципов программирования.
Что насчет двух других похожих событий?
Мы рассмотрели только два события (mouseover и mouseout), которые срабатывают при наведении курсора на что-либо и его отведении. На деле же оказывается, что есть еще два события, которые делают то же самое, — mouseenter и mouseleave. Уникальность этих событий обусловливается одной важной деталью, а именно тем, что они не всплывают.
Это важно, только если интересующий вас элемент имеет потомков. Все эти четыре события ведут себя одинаково, если в процессе не присутствуют потомки. Если же таковые присутствуют, тогда:
• mouseover и mouseout будут срабатывать каждый раз, когда вы наводите курсор на потомка. Это значит, что можно увидеть срабатывание многих ненужных событий, несмотря на то что курсор двигается внутри одной области.
• mouseenter и mouseleave будут срабатывать только единожды. При этом не важно, через сколько потомков вы переместите курсор мыши.
В 90 % случаев вам вполне подойдут mouseover и mouseout. В остальных случаях, которые зачастую связаны с более сложными сценариями UI, вас порадует, что существуют такие события, как mouseenter и mouseleave.
События mousedown и mouseup
Два события, которые практически являются субкомпонентами события click, — это mousedown и mouseup. Следующая диаграмма поясняет почему:
Когда вы нажимаете на кнопку мыши, срабатывает событие mousedown. Когда вы отпускаете нажатие, срабатывает событие mouseup. Если нажатие и отпускание произошло на одном и том же элементе, тогда также сработает событие click.
Все это показано в следующем фрагменте кода:
let button = document.querySelector("#myButton");
button.addEventListener("mousedown", mousePressed, false);
button.addEventListener("mouseup", mouseReleased, false);
button.addEventListener("click", mouseClicked, false);
function mousePressed(e) {
console.log("Mouse is down!");
}
function mouseReleased(e) {
console.log("Mouse is up!");
}
function mouseClicked(e) {
console.log("Mouse is clicked!");
}
Справедливый вопрос: «Зачем заморачиваться этими двумя событиями?» Кажется, что событие click идеально подходит для большинства случаев, в которых может понадобиться использовать mousedown и mouseup. Вы правы, можно не замарачиваться. При этом будет полезно пояснить, что события mousedown и mouseup просто дают больше контроля, когда он нужен. Некоторые взаимодействия (вроде перетаскиваний или отпадных приемов в видеоиграх, когда вы задерживаете нажатие, чтобы зарядить смертоносный удар молнии) подразумевают совершение действий, когда сработало только событие mousedown, но не mouseup.