Доброго времени суток! В этой статье мы разберем события в JS.
О том как работает событие onclick а также об переменных и функциях вы можете узнать из прошлой статьи.
Сейчас разберем основные события.
Я написал две функции, одна выводит координы курсора прямо в кнопке и вторая выводит координаты нажатия кнопкой мыши.
Вот так они выглядят.
Первую будем активировать событием onmousemove, которое срабатывает при любом движении мыши в элементе, которому мы присвоили это событие, в нашем случае это кнопка, поэтому событие будет срабатывать при движении курсора в кнопке.
Вторую же функцию будем активировать при нажатии кнопки мыши в той же кнопке, в этом нам поможет событие onclick.
Теперь можно испытать работу этих событий.
Попробуйте сами, чтобы убедиться в работе программы.
Теперь попробуем события onmouseover и onmouseout.
onmouseover - срабатывает, когда курсор наводится на элемент.
onmouseout - срабатывает, когда курсор покидает элемент.
Теперь это будет выглядеть так
Результат лучше попробовать на практике, на картинке это не передать.
Курсор попал на элемент справа сверху, это координаты входа, а вышел справа снизу, это координаты выхода, как мы видим по оси x координаты почти совпадают.
И рассмотрим ещё два события, это onmousedown и onmouseup.
onmousedown - срабатывает, когда кнопка мыши на элементе была нажата;
onmouseup - срабатывает, когда кнопка мыши была отжата.
То есть на нашем примере я могу нажать кнопку в одном месте, а отпустить её в другом и получить разные координаты.
Вот так теперь будет выглядеть программа, почти без изменений, кроме текста и изменения событий.
Всё сработало как я и ожидал.
Оставлю код здесь, чтобы вы могли попробовать сами.
function func(x) {
var pk = document.getElementById("pk");
pk.innerHTML = "Координаты нажатия: " + x.pageX + " " + x.pageY;
}
function clckfunc(y) {
var fk = document.getElementById("fk");
fk.innerHTML = "Координаты отжатия: " + y.pageX + " " + y.pageY;
}
Спасибо всем, не болейте!
#программирование #javascript #js #программированиедляначинающих