Question

我正在学习冒泡和捕捉，虽然这种情况不适用于任何一种情况，但我想知道是否有办法在JS中使用事件处理。问题：

这里我在DOM的同一级别上制作了几个框和一个触发器。我为每个事件提供了一个事件监听器，用于自定义事件（雪崩），可以在单击底部框时触发。我希望将触发器发射到其他元素，改变它们的背景颜色。见下面的代码。

HTML

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css">
    <script src="./actions.js"></script>
</head>
<body>
    <div class="one block"></div>
    <div class="two block"></div>
    <div class="three block"></div>

    <div class="four trigger"> Fire When Ready </div>

</body>
</html>

CSS

.block, .trigger{
    height: 200px;
    width: 200px;
}

.one{
    background-color: red;
}

.two{
    background-color: yellow;
}

.three{
    background-color: green;
}

.four{
    background-color: orange;
    text-align: center;
    vertical-align: middle;
    line-height: 200px;
}

JS

 document.addEventListener("DOMContentLoaded", function(event){
    console.log("content loaded");

    var blocks = document.getElementsByClassName("block");

    for(var i = 0; i<blocks.length; i++){
        (function(){
            var target = blocks[i];

            target.addEventListener("avalanche", function(){
                this.style.backgroundColor = "brown";
            }, true);
        })()
    }

    var beacon = document.getElementsByClassName("four")[0]; 
    beacon.addEventListener("click", function(){
        console.log("fired!");
        // trigger the event and watch the cascade 
        beacon.dispatchEvent(cascade); 
    });

    // create a custom event 
    var cascade = new CustomEvent('avalanche', {});

    console.log("handlers set");
});

因此，想法是单击底部框并让事件启动并被正文中的其他div看到。这些div都将被触发以改变盒子的背景颜色。可以这样做吗？有很多其他方法可以用JS做到这一点，但我想通过听雪崩事件来做到这一点。

Answer 1

需要在目标元素上运行调度（请参阅https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent ），而不是在信标上运行，因此您需要迭代匹配的元素（兄弟姐妹在这种情况下）。

＆＃13;

 document.addEventListener("DOMContentLoaded", function(event){
    console.log("content loaded");

    var blocks = document.getElementsByClassName("block");

    for(var i = 0; i<blocks.length; i++){
        (function(){
            var target = blocks[i];

            target.addEventListener("avalanche", function(){
                this.style.backgroundColor = "brown";
            }, true);
        })()
    }

    var beacon = document.getElementsByClassName("four")[0]; 
    beacon.addEventListener("click", function(){
        console.log("fired!");
        // trigger the event and watch the cascade 
        var sameLevel = beacon.parentNode.children; // get siblings (and self)
        Array.from(sameLevel).forEach(function(node){
          node.dispatchEvent(cascade)
        });
    });

    // create a custom event 
    var cascade = new CustomEvent('avalanche', {});

    console.log("handlers set");
});

＆＃13;

.block, .trigger{
    height: 200px;
    width: 200px;
}

.one{
    background-color: red;
}

.two{
    background-color: yellow;
}

.three{
    background-color: green;
}

.four{
    background-color: orange;
    text-align: center;
    vertical-align: middle;
    line-height: 200px;
}

＆＃13;

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="./styles.css">
    <script src="./actions.js"></script>
</head>
<body>
    <div class="one block"></div>
    <div class="two block"></div>
    <div class="three block"></div>

    <div class="four trigger"> Fire When Ready </div>

</body>
</html>

＆＃13;

触发具有触发事件的DOM级别上的事件

1 个答案: