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

"Mouseout js". "Что такое mouseout в JavaScript?"

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

Mouseout js.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

<div onmouseout="alert('Мышка покинула объект, это: первый пример mouseout')" class="onmouseout">Проверь работу mouseout!</div>

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

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

Для проверки "mouseout в js" наведите мышь на блок, который вы видите ниже, потом покиньте этот блок... и вы увидите "mouseout в js" в действии!

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

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

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

Html:

Опять div.

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

Js :

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

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

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

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

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

<script>

document.getElementById('id_mouseout').onmouseout = function(e) {

alert('Мышка покинула объект, это: Второй пример mouseout');

};

</script>

Пример №2 mouseout в js.

Для проверки "mouseout в js" наведите мышь на блок, который вы видите ниже, потом покиньте этот блок... и вы увидите "mouseout в js" в действии!

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

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

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

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

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

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

<script>

document.getElementById('id_mouseout_2').addEventListener('mouseout',

function()

{

alert('Мышка покинула объект, это: Третий пример mouseout');

}

);

</script>

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

Для проверки "mouseout в js" наведите мышь на блок, который вы видите ниже, потом покиньте этот блок... и вы увидите "mouseout в js" в действии!

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

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

+ =