Обработчик или источник появления курсора на элементе

.mouseenter()

Устанавливает обработчик появления курсора над элементом, либо, запускает это событие. Метод имеет три варианта использования:

.mouseenter(handler(eventObject)):jQuery1.0

Устанавливает функцию handler в качестве обработчика события mouseenter, на выбранные элементы.
Метод является аналогом bind("mouseenter", handler(eventObject)).

handler(eventObject) — функция, которая будет установлена в качестве обработчика. При вызове она будет получать объект события eventObject.

.mouseenter(eventData, handler(eventObject)):jQuery1.4.3

Метод отличается от предыдущего возможностью передавать в обработчик дополнительные данные.
Является аналогом bind("mouseenter", eventData, handler(eventObject)).

handler(eventObject) — см. выше.
eventData — дополнительные данные, передаваемые в обработчик. Они должны быть представлены объектом в формате: {fName1:value1, fName2:value2, ...}.

.mouseenter():jQuery1.0

Вызывает событие 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>

Страница будет выглядеть следующим образом:
Image:Pict34.png


Теперь, установим на элементы 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>');
});


Теперь, если мы проведем курсором снизу вверх по странице, события будут происходить следующим образом:
Image:Pict35.png

В действии

Следующий пример позволяет вам увидеть различия 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~

Ссылки

Поисковые ключи:
  • обработка события mouseenter
  • наведение курсора на элемент
  • обработка наведения курсора на элемент
  • обработчик наведения курсора на элемент
  • обработчик события mouseenter
  • .mouseenter()
  • mouseenter()