ホームページ > 記事 > ウェブフロントエンド > バブルできないイベントの例外は何ですか?

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

WBOYオリジナル: 2024-01-13 10:34:05645ブラウズ

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

ほとんどの場合、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 サイトの他の関連記事を参照してください。

事件

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：JS バブリングイベント解析ガイド: 初心者必読の資料次の記事：JS バブリングイベント解析ガイド: 初心者必読の資料

続きを見る

バブリングを防ぐためのvueのイベントの使い方を詳しく解説