События onmouseover и onmouseout в javascript и jQuery

Использование событий onmouseover и onmouseout во многих случаях можно заменить CSS стилями, но иногда требуется на javascript отследить действие курсора над одним элементом и совершить в этот момент действие с другим другим объектом. Разберем на простых примерах как это реализовать.
- «onmouseover» — срабатывает при заходе курсора на элемент;
- «onmouseout» — срабатывает при уходе курсора с элемента.
Самое простое, это создать эти события внутри тега:
<span onmouseover="document.getElementById('exemple1').style.display='block';" onmouseout="document.getElementById('exemple1').style.display='none';" style="cursor: pointer;">Скрыть/показать блок</span> <div id="exemple1" style="display: none; padding: 5px; border: 1px solid;">БЛОК</div>Код в действии:
При наведении курсора на текст появляется блок, который может содержать любые элементы веб-сайта. Несмотря на то, что кода мало — он плохо воспринимается и работать с ним не удобно, поэтому отделим html-теги, javascript-функции и CSS-стили:
<style type="text/css"> #ShowHide1 { cursor: pointer; } #exemple1 { display: none; padding: 5px; background-color: #CDE; border: 1px solid; } </style> <script type="text/javascript"> //дожидаемся полной загрузки страницы window.onload = function () { //ищем элемент по селектору var a = document.querySelector('#ShowHide1'); //вешаем на него события a.onmouseout = function(e) { document.getElementById('exemple1').style.display='none'; } a.onmouseover = function(e) { document.getElementById('exemple1').style.display='block'; }; } </script> <span id="ShowHide1">Скрыть/показать блок</span> <div id="exemple1">БЛОК</div>
Количество строк увеличилось, но код стал лучше читаться и теперь править его проще.
События onmouseover и onmouseout в jQuery
Javascript это хорошо, но если в проекте используется библиотека jQuery, то стоит воспользоваться её возможностями для работы с событиями onmouseover и onmouseout. Перепишем предыдущий пример на jQuery.
не забудьте про CSS стили<script type="text/javascript"> //дожидаемся полной загрузки страницы $(function () { $("#ShowHide1").on("mouseover mouseout", function(){ //быстро изменяем стиль display $("#exemple1").slideToggle("fast"); }); }); </script> <span id="ShowHide1">Скрыть/показать блок</span> <div id="exemple1">БЛОК</div>
Скрипт сократился за счет того, что одну функцию вешаем на оба события сразу. Так же, для вызова событий можно воспользоваться следующей конструкцией:
$(function () { $("#ShowHide1").mouseover(function(){ //действия }); $("#ShowHide1").mouseout(function(){ //действия }); });