Home > Article > Web Front-end > What is event stream in JavaScript

What is event stream in JavaScript

青灯夜游Original: 2022-03-08 18:03:552484browse

In js, event flow is the order in which events are triggered between the target element and ancestor elements. According to the order of event propagation, event streams can be divided into two types: 1. Bubble-type event stream, in which events are propagated from the most specific event target to the least specific event target; 2. Capture-type event stream, in which events are propagated from From the least specific event target to the most specific event target.

The operating environment of this tutorial: windows7 system, javascript version 1.8.5, Dell G3 computer.

What is an event

An event is a specific moment of interaction that occurs in a document or browser window.

An event is a certain action performed by the user or the browser itself, such as click, load and mouseover are the names of the events.

Events are the bridge between javaScript and DOM.

If you trigger it, I will execute it - when the event occurs, its handler function is called to execute the corresponding JavaScript code to give a response.

Typical examples include: the load event is triggered when the page is loaded; the click event is triggered when the user clicks on an element.

What is event flow

When a specific event is triggered on an element on the page, such as a click, except For the clicked target element, all ancestor elements will trigger this event, all the way up to the window.

Then a question arises, should the event be triggered on the target element first, or on the ancestor element first? This is the concept of event flow.

Event flow is the sequence in which events are triggered between the target element and ancestor elements.

The early IE and Netscape proposed completely opposite event flow concepts. IE event flow is event bubbling, while Netscape's event flow is event capture.

Two event flow models

The order of event propagation corresponds to the two event flow models of the browser: capture event flow and bubbling type event stream.

Bubble event flow: The propagation of events is from to the most specific Event target to the least specific event target . That is, from the leaves of the DOM tree to the root. [Recommendation]
Capture-type event stream: The propagation of events is from The least specific of the event target to the most specific event target . That is, from the root of the DOM tree to the leaves.

The idea of event capture is that less specific nodes should receive events earlier, and the most specific nodes should receive events last.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title></title>
</head>
<body>
<div id="myDiv">Click me!</div>
</body>
</html>

In the above html code, the e388a4556c0f65e1904146cc1a846bee element in the page is clicked.

The order of click event propagation in the bubbling event stream is6e7c7ca441895c8fbae4afd8c582bd17—》100db36a723c770d327fc0aef2ce13b1—》document

click in the capture event stream The order of event propagation is document—》100db36a723c770d327fc0aef2ce13b1—》6c04bd5ca3fcae76e30b72ad730ca86d—》e388a4556c0f65e1904146cc1a846bee

note:

1), all modern browsers support event bubbling, but in There are slight differences in the specific implementation:

In IE5.5 and earlier versions, event bubbling will skip the 100db36a723c770d327fc0aef2ce13b1 element (jump directly from body to document).

IE9, Firefox, Chrome, and Safari bubble the event all the way to the window object.

2), IE9, Firefox, Chrome, Opera, and Safari all support event capture. Although the DOM standard requires that events should be propagated from the document object, these browsers capture events from the window object.

3). Since old versions of browsers do not support it, few people use event capture. It is recommended to use event bubbling.

2), DOM event flow

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

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

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

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个框，为说明原理我整合成了一个图：

【相关推荐：javascript视频教程、web前端】

The above is the detailed content of What is event stream in JavaScript. For more information, please follow other related articles on the PHP Chinese website!

JavaScript firefox chrome safari html JS 对象事件 dom

Statement：

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Previous article：How to sum and average javascript arraysNext article：How to sum and average javascript arrays

See more

What is event stream in JavaScript

What is an event

What is event flow

Related articles