JavaScriptにおけるイベントストリームとは-フロントエンドQ&A-php.cn

JavaScriptにおけるイベントストリームとは

青灯夜游

リリース： 2022-03-08 18:03:55

オリジナル

2479 人が閲覧しました

js では、イベントフローは、ターゲット要素と祖先要素の間でイベントがトリガーされる順序です。イベントの伝播順序に従って、イベントストリームは次の 2 つのタイプに分類できます: 1. 最も具体的なイベントターゲットから最も具体性の低いイベントターゲットにイベントが伝播されるバブルタイプのイベントストリーム、2. キャプチャタイプのイベントストリーム。この場合、イベントは最も具体性の低いイベントターゲットから最も具体性の高いイベントターゲットに伝播されます。

JavaScriptにおけるイベントストリームとは

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

イベントとは

イベントとは、ドキュメントまたはブラウザウィンドウで発生する対話の特定の瞬間です。

イベントとは、ユーザーまたはブラウザ自体によって実行される特定のアクションです。クリック、ロード、マウスオーバーなどはイベントの名前です。

イベントは、JavaScript と DOM の間の架け橋です。

あなたがトリガーした場合は、それを実行します。イベントが発生すると、そのハンドラー関数が呼び出され、対応する JavaScript コードが実行され、応答が返されます。

典型的な例には、ページが読み込まれるときにロードイベントがトリガーされ、ユーザーが要素をクリックしたときにクリックイベントがトリガーされます。

イベントフローとは

ページ上の要素で特定のイベントがトリガーされると、クリック (クリックされたターゲット要素を除く) の場合、ウィンドウに至るまでのすべての祖先要素がこのイベントをトリガーします。

次に、イベントを最初にターゲット要素でトリガーするか、それとも最初にイベントをトリガーするかという疑問が生じます。先祖要素が最初ですか? これはイベントフローの概念です。

イベントフローは、ターゲット要素と先祖要素の間でイベントがトリガーされる順序です。

初期の IE と Netscape は、まったく逆のイベントフローの概念を提案しました。IE のイベントフローはイベントバブリングであるのに対し、Netscape のイベントフローはイベントキャプチャです。

2 つのイベントフローモデル

イベントの伝播の順序は、ブラウザーの 2 つのイベントフローモデル (キャプチャイベントフローとバブリングタイプ) に対応します。イベントストリーム。

バブルイベントフロー: イベントの伝播は、 から最も具体的な までです。イベントターゲット から最も具体性の低い イベントターゲット まで。つまり、DOM ツリーの葉から根までです。 [推奨]
キャプチャ型イベントストリーム: イベントの伝播は##から# 最も具体性の低い イベントターゲット から最も具体的なイベントターゲット。つまり、DOM ツリーのルートから葉までです。イベントキャプチャの考え方は、特定性の低いノードがイベントをより早く受信し、最も特定性の高いノードが最後にイベントを受信するというものです。
```
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>
```
ログイン後にコピー
上記の HTML コードでは、ページ内の
要素がクリックされています。

バブリングイベントストリームにおけるクリックイベントの伝播の順序は、

です。 #—>>

#—>>

document

キャプチャイベントストリームをクリックします。イベントの伝播は document—>>—>>—>>

です note

:1)、最新のブラウザはすべてイベントバブリングをサポートしていますが、特定の実装の違い:

IE5.5 以前のバージョンでは、イベントのバブリングは要素をスキップします (本文からドキュメントに直接ジャンプします)。 IE9、Firefox、Chrome、および Safari は、イベントをウィンドウオブジェクトまでバブルします。 2)、IE9、Firefox、Chrome、Opera、Safari はすべてイベントキャプチャをサポートしています。 DOM 標準ではイベントがドキュメントオブジェクトから伝播される必要がありますが、これらのブラウザはウィンドウオブジェクトからイベントをキャプチャします。

3). 古いバージョンのブラウザではサポートされていないため、イベントキャプチャを使用する人はほとんどいません。

イベントバブリング

を使用することをお勧めします。

2)、DOM イベントフロー

DOM标准采用捕获+冒泡。两种事件流都会触发DOM的所有对象，从document对象开始，也在document对象结束。

DOM标准规定事件流包括三个阶段：事件捕获阶段、处于目标阶段和事件冒泡阶段。

事件捕获阶段：实际目标（
）在捕获阶段不会接收事件。也就是在捕获阶段，事件从document到再到就停止了。上图中为1~3.
处于目标阶段：事件在
上发生并处理。但是事件处理会被看成是冒泡阶段的一部分。
冒泡阶段：事件又传播回文档。

note:

1）、尽管“DOM2级事件”标准规范明确规定事件捕获阶段不会涉及事件目标，但是在IE9、Safari、Chrome、Firefox和Opera9.5及更高版本都会在捕获阶段触发事件对象上的事件。结果，就是有两次机会在目标对象上面操作事件。

2）、并非所有的事件都会经过冒泡阶段。所有的事件都要经过捕获阶段和处于目标阶段，但是有些事件会跳过冒泡阶段：如，获得输入焦点的focus事件和失去输入焦点的blur事件。

两次机会在目标对象上面操作事件例子：

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<style>
    #outer{
        position: absolute;
        width: 400px;
        height: 400px;
        top:0;
        left: 0;
        bottom:0;
        right: 0;
        margin: auto;
        background-color: deeppink;
    }
    #middle{
        position: absolute;
        width: 300px;
        height:300px;
        top:50%;
        left: 50%;
        margin-left: -150px;
        margin-top: -150px;
        background-color: deepskyblue;
    }
    #inner{
        position: absolute;
        width: 100px;
        height:100px;
        top:50%;
        left:50%;
        margin-left: -50px;
        margin-top: -50px;;
        background-color: darkgreen;
        text-align: center;
        line-height: 100px;
        color:white;
    }
    #outer,#middle,#inner{
        border-radius:100%;
    }
</style>
<body>
<div id="outer">
    <div id="middle">
        <div id="inner">
            click me!
        </div>
    </div>
</div>
<script>
    var innerCircle= document.getElementById("inner");
    innerCircle.addEventListener("click", function () {
        alert("innerCircle的click事件在捕获阶段被触发");
    },true);
    innerCircle.addEventListener("click", function () {
        alert("innerCircle的click事件在冒泡阶段被触发");
    },false);
    var middleCircle= document.getElementById("middle");
    middleCircle.addEventListener("click", function () {
        alert("middleCircle的click事件在捕获阶段被触发");
    },true);
    middleCircle.addEventListener("click", function () {
        alert("middleCircle的click事件在冒泡阶段被触发");
    },false);
    var outerCircle= document.getElementById("outer");
    outerCircle.addEventListener("click", function () {
        alert("outerCircle的click事件在捕获阶段被触发");
    },true);
    outerCircle.addEventListener("click", function () {
        alert("outerCircle的click事件在冒泡阶段被触发");
    },false);
</script>
</body>
</html>

ログイン後にコピー

运行效果就是会陆续弹出6个框，为说明原理我整合成了一个图：