在觸發事件的DOM上觸發事件

我正在學習冒泡和捕獲，雖然這種情況不適用於這兩種情況，但我想知道是否有辦法在JS中處理事件。問題：在觸發事件的DOM上觸發事件

這裏我在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; 
}

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"); 
});

所以，想法是單擊底部的框，並有活動推出，並通過其他可見在身體divs。這些div將全部被觸發以改變盒子的背景顏色。這可以做到嗎？有很明顯的其他方法可以用JS做到這一點，但我想通過聽雪崩事件來做到這一點。

來源

2017-05-03 trebek1

調度需要對目標元素（見https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent），而不是在信標運行，所以你需要遍歷匹配的元素（姐弟倆在這種情況下）。

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"); 
 
});

.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; 
 
}

<!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>

來源

2017-05-03 15:47:49

在觸發事件的DOM上觸發事件

回答

相關問題