Auslösen von Ereignissen auf der gleichen Ebene von DOM mit ausgelöstem Ereignis

Ich lernte etwas über Sprudeln und Capturen, und obwohl diese Situation nicht für beide Fälle gilt, wollte ich wissen, ob es einen Weg gibt, dies mit der Ereignisbehandlung in JS zu tun. Das Problem:Auslösen von Ereignissen auf der gleichen Ebene von DOM mit ausgelöstem Ereignis

Hier mache ich ein paar Kästchen und einen Trigger auf der gleichen Ebene des DOM. Ich stelle jedem einen Ereignis-Listener für ein benutzerdefiniertes Ereignis (Lawine) zur Verfügung, das beim Klicken auf das untere Feld ausgelöst werden kann. Ich möchte, dass der Auslöser an die anderen Elemente gesendet wird, die ihre Hintergrundfarbe ändern. Siehe Code unten.

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

So wäre die Idee, das untere Feld klicken und die Ereignis Start haben und mit dem anderen zu sehen Divs im Körper. Diese divs würden alle ausgelöst werden, um die Hintergrundfarbe der Boxen zu ändern. Kann das gemacht werden? Es gibt offensichtlich andere Möglichkeiten, dies mit JS zu tun, aber ich wollte es tun, indem ich auf das Lawinenereignis lauschte.

Quelle

2017-05-03 trebek1

Der Versand muss auf den Zielelementen ausgeführt werden soll (siehe https://developer.mozilla.org/en-US/docs/Web/API/EventTarget/dispatchEvent) und nicht auf dem Leuchtfeuer, so dass Sie über die Anpassungselemente (die Geschwister in diesem Fall) zu wiederholen brauchen.

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>

Quelle

2017-05-03 15:47:49

Auslösen von Ereignissen auf der gleichen Ebene von DOM mit ausgelöstem Ereignis

Antwort

Verwandte Themen