Question

如何根据事件触发事件和阶段？

就像在树中使用句柄创建的每个对象一样，如果单击一个按钮，则触发该div中链接的所有事件。

我制作的节目有不同的子节，有一个段落和按钮。

这样的事件冒泡的不同理论

Answer 1

基本示例在HTML中，元素嵌套在其他元素中，如此

<div id="outer">
   <h1 id="inner">Inner<h1>
</div>

当触发内部元素上的事件时，它会影响您在链接的帖子中读取的每个外部元素。这是冒泡的。事件流程可以通过

控制

var element = document.getElementById('inner');
element.addEventListener("event",yourFunction, false);

这里，false表示事件流是从内部元素（在其上触发事件）到外部元素。这是所有浏览器的默认设置。

停止冒泡你可以使用stopPropagation()

Answer 2

<html>
    <head>
        <title>Event Bubble and Phases</title>
        <script>
            function f1() {
                console.log("f1");
                console.log("Current Element " + event.currentTarget.id);
                console.log("Target "+event.target.id);
                console.log("Event Phase "+event.eventPhase);
                console.log("Bubble Status "+event.bubbles);
                console.log("Cancelable Status "+event.cancelable);
            }
            function f2() {
                console.log("f2");
                console.log("Current Element " + event.currentTarget.id);
                console.log("Target "+event.target.id);
                console.log("Event Phase "+event.eventPhase);
                console.log("Bubble Status "+event.bubbles);
                console.log("Cancelable Status "+event.cancelable);
            }
            function f3() {
                console.log("f3");
                console.log("Current Element " + event.currentTarget.id);
                console.log("Target "+event.target.id);
                console.log("Event Phase "+event.eventPhase);
                console.log("Bubble Status "+event.bubbles);
                console.log("Cancelable Status "+event.cancelable);
            }
            function f4() {
                console.log("f4");
                console.log("Current Element " + event.currentTarget.id);
                console.log("Target "+event.target.id);
                console.log("Event Phase "+event.eventPhase);
                console.log("Bubble Status "+event.bubbles);
                console.log("Cancelable Status "+event.cancelable);
            }
        </script>
    </head>
    <body>
        <div id="div1" onclick="f1()" style="background-color: brown; color: aliceblue;padding:20px">
            This is div at level1
            <div id="div2" onclick="f2()" style="background-color: burlywood;padding:20px">
                This is div at level2
                <p id="paragraph1" onclick="f3()" style="background-color: appworkspace;padding:20px">
                    <button id="button1" onclick="f4()" style="background-color: beige;padding:20px">   
                        Click 
                    </button>
                </p>
            </div>
        </div>    
    </body>
</html>

如何在html中发生事件冒泡和阶段

2 个答案: