ГРУППА КУРСА
|
Указатель мыши на элементеСобытие mouseover возникает, когда указатель мыши оказвается на элементе. Событие mouseout срабатывает, когда указатель уходит с элемента. Следует иметь в виду, что возможна ситуация, когда пользователь быстро проводит указатель над маленьким элементом, и скрипт не успевает это отследить. Поэтому нет полной гарантии, что эти события сработают. Хотя, это редко может быть какой-то проблемой, просто это нужно учитывать. Также существуют события mouseenter и mouseleave, которые тоже отслеживают заход указателя на элемент и выход с него. Но в работе этих событий есть важное отличие. Если указатель мыши зашёл на элемент, а затем зашёл на вложенный в него элемент, то события mouseover и mouseout считают, что указатель ушёл с внешнего элемента на вложенный. Более того, существует всплытие событий, оно рассмотрено в другой теме. Из-за всплытия, событие сработавшее на вложенном элементе передаётся и внешнему элементу. Поэтому, когда указатель переходит на вложенный элемент, то для внешнего элемента срабатывает mouseout и тут же mouseover. Пока это будет для Вас не совсем понятно, но когда Вы изучите всплытие событий, то Вы разберётесь, почему так получается. События mouseenter и mouseleave не реагируют на переход указателя на вложенный элемент и полагают, что если указатель перешёл на вложенный элемент, то при этом он остаётся и на внешнем элементе. Рассмотрим работу этих событий на примере. Создадим блоки - внешний и вложенный и поставим обработчики на оба блока: Стиль:
HTML код:
JavaScript:
Запустите страницу, откройте консоль и установите указатель мыши сначала на внешний блок, затем на вложенный. Посмотрите, как срабатывают события. Обратите внимание, событие сработавшее на внутреннем блоке, срабатывает и на внешнем. Получается что на внешнем блоке срабатывает mouseout и сразу mouseover. С выходом указателя с вложенного блока возникает такая же ситуация. Из-за этой особенности эти события редко применяются для работы с большим внешним блоком. Они используются для делегирования событий или для элементов, у которых нет вложенных элементов. Добавим на страницу такие же блоки и поствим на них обработчики других событий: HTML код:
JavaScript:
Рассмотренные события работают по-разному и в зависимости от решаемой задачи, используются либо одни либо другие. Кроме того, в CSS есть псевдокласс hover, который позволяет изменить стиль элемента, на котором находится указатель мыши. Его желательно использовать всегда, когда это возможно. А в скриптах делать более сложные изменения страницы. |