버블링할 수 없는 이벤트에 대한 예외는 무엇입니까?-JS 튜토리얼-php.cn

버블링할 수 없는 이벤트에 대한 예외는 무엇입니까?

WBOY

풀어 주다： 2024-01-13 10:34:05

원래의

702명이 탐색했습니다.

버블링할 수 없는 이벤트에 대한 예외는 무엇입니까?

버블링 이벤트 예외: 버블링할 수 없는 이벤트는 무엇인가요?

대부분의 경우 웹페이지의 이벤트는 버블링 메커니즘을 통해 전달되고 처리될 수 있습니다. 그러나 일부 특별 이벤트는 버블링이 불가능한 경우도 있습니다. 이 문서에서는 버블링할 수 없는 몇 가지 일반적인 이벤트를 소개하고 독자의 이해를 돕기 위한 코드 예제를 제공합니다.

focus 및 blur 이벤트: 이 두 이벤트는 요소의 포커스 변경과 관련됩니다. 요소가 포커스를 얻으면 focus 이벤트가 트리거되고, 요소가 포커스를 잃으면 blur 이벤트가 트리거됩니다. 포커스 변경은 상위 요소나 다른 하위 요소가 아닌 특정 요소에서 발생하므로 이 두 이벤트는 버블링될 수 없습니다.

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>

로그인 후 복사

在上面的代码中，当输入框获得焦点时，只会触发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>

로그인 후 복사

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

总结而言，focus、blur、mouseenter和mouseleave다음은 입력 상자에 포커스가 있을 때 버블링 이벤트를 사용하여 이벤트를 캡처할 수 없는 샘플 코드입니다.

rrreee🎜위 코드에서 입력 상자에 포커스가 있을 때만 이벤트를 캡처합니다. focus 이벤트는 body 요소에 버블링되는 focus 이벤트를 트리거하지 않습니다. 🎜

mouseenter

mouseleave

mouseover

mouseout

mouseenter

museleave

🎜다음은 샘플 코드입니다. 마우스가 div 요소에 들어가거나 나갈 때 이 두 이벤트는 버블링 이벤트를 통해 캡처할 수 없습니다. 🎜rrreee🎜위 코드에서, 마우스가 div 요소에 들어가면 mouseenter 이벤트만 트리거되고 body 요소에 버블링되는 mouseenter 이벤트 이벤트가 발생하지 않습니다. 🎜🎜요약하자면, focus, blur, mouseenter 및 mouseleave 이벤트는 버블링 메커니즘 및 처리를 통해 전달될 수 없습니다. . 이러한 특별한 이벤트를 이해하고 구별하는 것은 프론트엔드 개발자로서 필수적인 지식 중 하나입니다. 🎜

위 내용은 버블링할 수 없는 이벤트에 대한 예외는 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!