Обработчик или источник появления курсора на элементе
Устанавливает обработчик появления курсора над элементом, либо, запускает это событие. Метод имеет три варианта использования:
Устанавливает функцию handler в качестве обработчика события mouseenter, на выбранные элементы.
Метод является аналогом bind("mouseenter", handler(eventObject)).
handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.
Метод отличается от предыдущего возможностью передавать в обработчик дополнительные данные.
Является аналогом bind("mouseenter", eventData, handler(eventObject)).
handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: {fName1:value1, fName2:value2, ...}.
Вызывает событие mouseenter, у выбранных элементов страницы. Метод является аналогом trigger("mouseenter").
Убрать установленный обработчик можно с помощью метода unbind().
Все три варианта использования метода, являются аналогами других методов (см. выше), поэтому все подробности использования mouseenter(), можно найти в описании этих методов.
Метод хорошо совместим с mouseleave(), и плохо с mouseout().
Простой пример:
// установим обработчик события mouseenter, элементу с идентификатором foo $('#foo').mouseenter(function(){ alert('Курсор мыши находится над элементом "foo"'); }); // вызовем событие mouseenter на элементе foo $('#foo').mouseenter(); // установим еще один обработчик события mouseenter, на этот раз элементам // с классом block. В обработчик передадим дополнительные данные $('.block').mouseenter({a:12, b:"abc"}, function(eventObject){ var externalData = "a=" + eventObject.data.a + ", b=" + eventObject.data.b; alert('Курсор появился над элементом с классом block. '+ 'В обработчик этого события переданы данные: ' + externalData ); });
Особенности метода
По своему назначению, mouseenter совпадает с событием mouseover. Однако у них имеются заметные отличия. Дело в том, что mouseover, как и многие другие стандартные события javascript, обладает свойством "всплытия" вверх по иерархии. То есть, после выполнения на элементе, событие передается родительскому элементу, потом прародительскому, и так далее, вплоть до начала дерева DOM. Эта особенность может приводить к различным проблемам. Событие mouseenter таким свойством не обладает, и выполняется только один раз, на самом элементе. Поэтому, в некоторых случаях, оно может быть гораздо удобнее. Покажем различия в поведении этих событий на примере:
<!DOCTYPE html> <html> <head> <script src="https://code.jquery.com/jquery-latest.min.js"></script> <style> div{padding:10px; margin:5px; border:1px solid red} </style> </head> <body> <div id="outer"> Outer <div id="inner"> Inner </div> </div> <div id="log"></div> <script> // какой-то javascript </script> </body> </html>
Страница будет выглядеть следующим образом:
Теперь, установим на элементы Outer и Inner по одному обработчику событий mouseenter и mouseover:
// при возникновении события mouseenter, добавим новую запись в элемент с идентификатором log $('#outer').mouseenter(function(){ $('#log').append('<div style="color:blue">Был вызван обработчик события mouseenter на элементе outer</div>'); }); $('#inner').mouseenter(function(){ $('#log').append('<div style="color:blue">Был вызван обработчик события mouseenter на элементе inner</div>'); }); // при возникновении события mouseover, добавим новую запись в элемент с идентификатором log $('#outer').mouseover(function(){ $('#log').append('<div style="color:green">Был вызван обработчик события mouseover на элементе outer</div>'); }); $('#inner').mouseover(function(){ $('#log').append('<div style="color:green">Был вызван обработчик события mouseover на элементе inner</div>'); });
Теперь, если мы проведем курсором снизу вверх по странице, события будут происходить следующим образом:
В действии
Следующий пример позволяет вам увидеть различия mouseenter и mouseover "в живую":
~lt~!DOCTYPE html~gt~ ~lt~html~gt~ ~lt~head~gt~ ~lt~script src="https://code.jquery.com/jquery-latest.min.js"~gt~~lt~/script~gt~ ~lt~style~gt~ div{padding:10px; margin:5px;} #outer{background-color:#D6EDFC} #inner{background-color:#FFCC00} #out-over, #in-over{float:right} #out-enter, #in-enter{float:left} ~lt~/style~gt~ ~lt~/head~gt~ ~lt~body~gt~ ~lt~div id="outer"~gt~ ~lt~p id="out-enter"~gt~mouseenter - 0~lt~/p~gt~~lt~p id="out-over"~gt~mouseover - 0~lt~/p~gt~ ~lt~div style="clear:both" /~gt~ ~lt~div id="inner"~gt~ ~lt~p id="in-enter"~gt~mouseenter -0~lt~/p~gt~~lt~p id="in-over"~gt~mouseover - 0~lt~/p~gt~ ~lt~div style="clear:both" /~gt~ ~lt~/div~gt~ ~lt~/div~gt~ ~lt~script~gt~ var out_i = 0; var in_i = 0; $('#outer').mouseenter(function(){ out_i++; $("#out-enter").text("mouseenter - " + out_i); }); $('#inner').mouseenter(function(){ in_i++; $("#in-enter").text("mouseenter - " + in_i); }); var out_j = 0; var in_j = 0; $('#outer').mouseover(function(){ out_j++; $("#out-over").text("mouseover - " + out_j); }); $('#inner').mouseover(function(){ in_j++; $("#in-over").text("mouseover - " + in_j); }); ~lt~/script~gt~ ~lt~/body~gt~ ~lt~/html~gt~