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