Что такое mouseover в JavaScript?

"Mouseover js". "Что такое mouseover в JavaScript?"

Разберу подробно, что такое mouseover в JavaScript и как с ним работать.

Mouseover js.

1. Что такое mouseover в JavaScript?
2. Простейший пример mouseover в js.
3. Пример номер 2 mouseover в js.
4. Пример номер 3 mouseover в js.

1. Что такое mouseover в JavaScript?

mouseover — это событие в JavaScript, которое срабатывает, когда пользователь наводит курсор мыши над определённым элементом.

Ключевые особенности mouseover в JavaScript?

срабатывает при входе курсора в элемент или его дочерние элементы;

всплывает (bubbles) — распространяется от дочернего элемента к родительскому;

может срабатывать многократно при движении между вложенными элементами;

имеет свойство relatedTarget — указывает на элемент, с которого курсор перешёл.

2. Простейший пример mouseover в js.

Сделаем "простейший пример mouseover в js" - для этого вам понадобится:

Какой то тег, пусть это будет div.

В первый тег помещаем "onmouseover".

Далее используем alert и какой-тол произвольный текст.

Соберем простейший пример mouseover в js.

<div onmouseover="alert('Ты навел мышку на первый пример mouseover')" class="onmouseover">Проверь работу mouseover!</div>

Проверь простейший пример mouseover в js.

На сайте только живые примеры - размещаем выше приведенный код "mouseover в js" прямо здесь:

Проверь работу mouseover!

3. Пример номер 2 mouseover в js.

Рассмотрим второй пример "mouseover в js" - для этого вам понадобится:

Html:

Опять div.

Внутрь первого тега размещаем id.

Js :

Начинаем с тега script.

Любым из способов обратиться по id к тегу div.

Используем getElementById в этом примере.

Дале уже ранее показанный alert.

Соберем пример №2 mouseover в js.

<script>

document.getElementById('id_mouseover').onmouseover = function(e) {

alert('Ты навел мышку на Второй пример mouseover');

};

</script>

Проверь работу mouseover #2!

4. Пример номер 3 mouseover в js.

Для того, чтобы создать "пример mouseover в js" вам понадобится:

Теория и практика из выше приведенного пункт с одним изменением ...

Используем addEventListener...

Соберем пример номер 3 mouseover в js.

<script>

document.getElementById('id_mouseover_2').addEventListener('mouseover',

function()

{

alert('Ты навел мышку на Третий пример mouseover');

}

);

</script>

Пример номер 3 mouseover в js.

Проверь работу mouseover #3!

Всего комментариев : Comments+ 2.0

+ =