バブルできないイベントの例外は何ですか?-jsチュートリアル-php.cn

バブルできないイベントの例外は何ですか?

WBOY

リリース： 2024-01-13 10:34:05

オリジナル

696 人が閲覧しました

バブルできないイベントの例外は何ですか?

バブリングイベントの例外: どのようなイベントがバブリングできないのでしょうか?

ほとんどの場合、Web ページ内のイベントはバブリングメカニズムを通じて配信および処理できます。ただし、場合によっては、一部の特別なイベントをバブル化できない場合があります。この記事では、バブルできない一般的なイベントをいくつか紹介し、読者の理解を助けるコード例を示します。

focus および blur イベント: これら 2 つのイベントには、要素のフォーカスの変更が含まれます。要素がフォーカスを取得すると、focus イベントがトリガーされ、要素がフォーカスを失うと、blur イベントがトリガーされます。フォーカスの変更は、その親要素や他の子孫要素ではなく、特定の要素で発生するため、これら 2 つのイベントがバブルアップすることはありません。

次はサンプルコードです。入力ボックスがフォーカスを取得したとき、バブリングイベントを使用してイベントをキャプチャすることはできません:

<!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 イベント: これら 2 つのイベントは、カーソルが要素の境界に出入りするときを検出するために使用されます。 mouseover および mouseout イベントとは異なり、mouseenter および mouseleave イベントは親要素または子孫要素にバブルしません。

以下はサンプルコードです。マウスが div 要素に出入りするとき、これら 2 つのイベントはバブリングイベントを通じてキャプチャできません。このコードでは、マウスが

div

要素に入ると、mouseenter イベントのみがトリガーされ、mouseenter イベントが body 要素にバブルされます。 イベントはトリガーされません。要約すると、

focus

、blur、mouseenter、mouseleave イベントは、バブリングメカニズムと処理を通じて配信することはできません。。これらの特別なイベントを理解し区別することは、フロントエンド開発者として必須の知識の 1 つです。

以上がバブルできないイベントの例外は何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。