Предисловие

В DOM JavaScript (объектная модель документа),События мыши — это распространенный тип событий.,Используется для ответа пользователямивзаимодействие с мышью。onmouseover、onmouseout、onmouseenter и onmouseleave — это четыре типа JavaScript, которые обрабатывают элементы входа и выхода мыши, хотя они очень похожи.,Но есть некоторые ключевые различия в практическом использовании. Эти различия подробно описаны ниже.,И объяснено Примером. Эта точка знаний,Это также требование, с которым я столкнулся раньше при написании интерфейса.,Так что разберитесь,Поделитесь этим со всеми.

разница

Во-первых, разница этих четырех событий будет введена в соответствии с ситуацией.

1. Диапазон срабатывания события

Давайте сначала представим эти два события onmouseover и onmouseout

• onmouseover Срабатывает, когда указатель мыши перемещается над элементом onmouseover событие.
• onmouseout Срабатывает, когда указатель мыши выходит за пределы элемента onmouseout событие.

Оба события вызываются не только тогда, когда указатель мыши проходит непосредственно над элементом, но также когда указатель мыши проходит над дочерними элементами элемента. Это означает, что эти два события имеют характеристики пузырькового обмена событиями. Непосредственно загрузите код для демонстрации:

<!-- onmouseover и onmouseout Пример -->
<div id="parent" onmouseover="handleMouseOver()" onmouseout="handleMouseOut()">
  Наведите на меня мышь
  <div id="child">Или перейдите в мой дочерний элемент</div>
</div>

<script>
  function handleMouseOver() {
    console.log('Мышь перемещается в родительский элемент');
  }
  
  function handleMouseOut() {
    console.log('Мышь вышла за пределы родительского элемента');
  }
</script>

Далее следуют еще два события onmouseenter и onmouseleave

• onmouseenter Срабатывает, когда указатель мыши перемещается над элементом onmouseenter событие.
• onmouseleave Срабатывает, когда указатель мыши выходит за пределы элемента onmouseleave событие.

Первые два разные,Эти два события запускаются только тогда, когда указатель мыши проходит непосредственно над элементом.,Он не будет срабатывать, когда указатель мыши проходит над дочерними элементами элемента. также,onmouseleave События не поддерживают всплытие событий. То же самое делается прямо в коде для демонстрации:

<!-- onmouseenter и onmouseleave Пример -->
<div id="parent" onmouseenter="handleMouseEnter()" onmouseleave="handleMouseLeave()">
  Наведите на меня мышь
  <div id="child">Но не переходите в мои дочерние элементы</div>
</div>

<script>
  function handleMouseEnter() {
    console.log('Мышь перемещается в родительский элемент');
  }
  
  function handleMouseLeave() {
    console.log('Мышь вышла за пределы родительского элемента');
  }
</script>

2. Всплывание событий

Далее поговорим о Всплывание событий, в основном о следующей разнице

• onmouseover и onmouseout Поддерживает всплытие событий, то есть когда событие срабатывает, оно не только влияет на текущий элемент, но также всплывает по дереву DOM, влияя на родительский элемент.
• onmouseenter и onmouseleave Всплывание событий не поддерживается. Это означает, что когда вы используете эти события, они будут срабатывать только на указанном элементе и не будут влиять на другие элементы. в частности onmouseleave,Он не срабатывает на дочерних элементах,Он также не будет доходить до родительского элемента.

Подвести итог

Эта статья в основном посвящена краткому опишите разницу между событиями мыши onmouseover, onmouseout и onmouseenter, onmouseleave.,Можно отличить в реальном развитии,Я надеюсь, что это может быть полезно студентам, изучающим фронтенд. в общем,Имеются следующие различия

• onmouseover и onmouseout Срабатывает, когда указатель мыши перемещается на элемент или его подэлементы, и поддерживает всплывание событий.
• onmouseenter и onmouseleave Срабатывает только тогда, когда указатель мыши перемещается непосредственно над элементом, а всплывание событий не поддерживается, что делает их менее полезными, чем onmouseover и onmouseout Более надежный, особенно в сценариях, где требуется точный контроль запуска событий.

Я участвую в последнем конкурсе эссе для специального учебного лагеря Tencent по техническому созданию 2024 года.,Приходите и разделите со мной главный приз!