JS - custom events

Poznajemy sposób jak robić własne eventy i jak ich słuchać + ogarniamy, dlaczego eventy w Vue.js nie bąbelkowały wyżej niż swój komponent. Do dzieła.

Ok, nasz markup:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <div id="myDiv">
        <ul>
            <li>Bla bla bla <button id="btn">Click Me</button></li>
        </ul>
    </div>
    <script src="./customevt.js" defer></script>
</body>
</html>

Łapiemy elementy:

let btn = document.querySelector("#btn");
let div = document.querySelector("#myDiv");

Button robi dispatch:

btn.addEventListener("click", function(){
    
    const notify = new CustomEvent("notifyevent", {
        detail: {},
        bubbles: true,
        cancelable: true,
        composed: false,
      });

    this.dispatchEvent(notify);
    
});

Div słucha i jako bubbles true wybąbelkuje do niego:

div.addEventListener("notifyevent", function(e){
    alert("notified");
    console.log(e);
})

Ok, działa. Dlaczego eventy w Vue js nie bąbelkowały wyżej niż komponent? Bubbles miały na false ustawione? Nie! Przecież bąbelkowały, tylko maksimum to był poziom komponentu, nie dało się np. aby komponent rodzic otrzymał event, który wybąbelkował z elementu komponentu dziecka.

Ok, a co to cancelable? To ustawienie, gdzie true znaczy można zrobić preventDefault, false znaczy nie można, odpowiednik passive z opcji eventu.

A composed? Composed oznacza, czy event powinien bąbelkować tylko w obrębie własnego shadow domu czy też aż do DOM wychodzić.

I Vue js używa komponentów, które mają swój shadow dom i eventy mają composed na false. I nie bąbelkują powyżej swój shadow dom, choć w jego obrębie bąbelkują.

Shadow dom już nieco poznaliśmy, ale niedługo poznamy go lepiej.

JS – custom events