Quelles sont les exceptions pour les événements qui ne peuvent pas bouillonner ?-js tutoriel-php.cn

Quelles sont les exceptions pour les événements qui ne peuvent pas bouillonner ?

WBOY

Libérer： 2024-01-13 10:34:05

original

701 Les gens l'ont consulté

Quelles sont les exceptions pour les événements qui ne peuvent pas bouillonner ?

Exceptions pour les événements bouillonnants : Quels événements ne peuvent pas faire l'objet d'un bouillonnement ?

Dans la plupart des cas, les événements dans les pages Web peuvent être livrés et traités via le mécanisme de bulle. Cependant, dans certains cas, certains événements spéciaux ne peuvent pas être diffusés. Cet article présentera certains événements courants qui ne peuvent pas être diffusés et fournira des exemples de code pour aider les lecteurs à mieux comprendre.

Événements focus et blur : ces deux événements impliquent des changements de focus des éléments. Lorsqu'un élément obtient le focus, l'événement focus est déclenché ; lorsque l'élément perd le focus, l'événement blur est déclenché. Étant donné que le changement de focus se produit sur un élément spécifique, et non sur ses éléments parents ou autres éléments descendants, ces deux événements ne peuvent pas se produire.

focus和blur事件：这两个事件涉及到元素的焦点变化。当一个元素获得焦点时，会触发focus事件；当元素失去焦点时，会触发blur事件。由于焦点变化发生在特定的元素上，而不是其父元素或其他后代元素上，所以这两个事件无法进行冒泡。

下面是一个示例代码，当输入框获得焦点时，使用冒泡事件无法捕获该事件：

<!DOCTYPE html>
<html>
<head>
  <title>Focus and Blur Event</title>
</head>
<body>
  <div>
    <input type="text" id="myInput">
  </div>
  
  <script>
    var myInput = document.getElementById("myInput");
    
    myInput.addEventListener("focus", function(){
      console.log("Input has focus");
    });
    
    document.body.addEventListener("focus", function(){
      console.log("Focus event bubbled");
    }, true);
    
    // 输出结果：
    // Input has focus
  </script>
</body>
</html>

Copier après la connexion

在上面的代码中，当输入框获得焦点时，只会触发focus事件，并不会触发冒泡到body元素上的focus事件。

mouseenter和mouseleave事件：这两个事件用于检测光标进入或离开元素的边界。与mouseover和mouseout事件不同，mouseenter和mouseleave事件不会冒泡到父元素或后代元素上。

下面是一个示例代码，当鼠标进入或离开div元素时，无法通过冒泡事件捕获这两个事件：

<!DOCTYPE html>
<html>
<head>
  <title>Mouse Enter and Leave Event</title>
  <style>
    #myDiv {
      width: 100px;
      height: 100px;
      background-color: red;
    }
  </style>
</head>
<body>
  <div id="myDiv"></div>
  
  <script>
    var myDiv = document.getElementById("myDiv");
    
    myDiv.addEventListener("mouseenter", function(){
      console.log("Mouse entered the div");
    });
    
    document.body.addEventListener("mouseenter", function(){
      console.log("Mouse entered the body");
    }, true);
    
    // 输出结果：
    // Mouse entered the div
  </script>
</body>
</html>

Copier après la connexion

在上面的代码中，当鼠标进入div元素时，只会触发mouseenter事件，并不会触发冒泡到body元素上的mouseenter事件。

总结而言，focus、blur、mouseenter和mouseleaveCe qui suit est un exemple de code. Lorsque la zone de saisie obtient le focus, l'événement ne peut pas être capturé à l'aide d'événements bouillonnants :

rrreee🎜Dans le code ci-dessus, lorsque la zone de saisie obtient le focus, elle le sera uniquement. être déclenché. L'événement focus ne déclenchera pas l'événement focus qui bouillonne vers l'élément body. 🎜

mouseenter

mouseleave

mouseover

mouseout

mouseenter

mouseleave

🎜Voici un exemple de code, lorsque la souris entre ou quitte l'élément div, ces deux événements ne peuvent pas être capturés via des événements bouillonnants : 🎜rrreee🎜Dans le code ci-dessus, lorsque la souris entre dans l'élément div, seul l'événement mouseenter sera déclenché, et l'événement mouseenter qui bouillonne vers l'élément <code>body ne sera pas déclenché l'événement . 🎜🎜En résumé, les événements focus, blur, mouseenter et mouseleave ne peuvent pas être transmis via le mécanisme de bouillonnement et le traitement. . Comprendre et distinguer ces événements spéciaux fait partie des connaissances essentielles en tant que développeur front-end. 🎜

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!