JS events - capture, options

Kolejna szybka lekcja, poznajemy eventy w JavaScript. Konieczność, jeżeli chcemy mieć coś więcej niż apkę z mocarnym backendem, ale wszystko bez reaktywności.

Ok, poprzedni 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">
        Text node in div
        <ul id="myUl">
            Text node in ul
            <li>Click Me</li>
            <li>Click Me</li>
            <li>Click Me</li>
        </ul>
    </div>
    <script src="./evtphase.js" defer></script>
</body>
</html>

No i teraz zmodyfikujemy poprzedni JS tak, aby eventy były odpalane w capture phase:

let div = document.querySelector("#myDiv");
let ul = document.querySelector("#myUl");
let liFirst = ul.querySelector("li");


liFirst.addEventListener("click", function(e){
    console.log(e.target);
    alert("li clicked");
    
});

ul.addEventListener("click", function(e){
    console.log(e.target);
    alert("ul clicked");
   
}, {capture: true});

div.addEventListener("click", function(e){
    console.log(e.target);
    alert("div clicked");
    
}, {capture: true});

I co mamy na klik li? Najpierw leci event kliku diva, potem ul, potem li (target phase). Potem event bąbelkuje w górę, ale nikogo to już nie obchodzi, bo listenerów tam nie ma.

Zresztą – napiszmy je:

liFirst.addEventListener("click", function(e){
    console.log(e.target);
    alert("li clicked - target phase");
    
});

ul.addEventListener("click", function(e){
    console.log(e.target);
    alert("ul clicked - capture/target phase");
   
}, {capture: true});

ul.addEventListener("click", function(e){
    alert("Ul clicked - bubble/target phase");
});

div.addEventListener("click", function(e){
    console.log(e.target);
    alert("div clicked - capture/target phase");
    
}, {capture: true});

div.addEventListener("click", function(e){
    alert("div clicked - bubble/target phase");
});

Pobawmy się tym, aż zrozumiemy. Eventy z caputre odpalane są w capture phase (albo target phase, ten element też można kliknąć, niekoniecznie jego dzieci). Eventy bez capture odpalają się w target phase oraz bubble phase.

Wiemy też jak działa bąbelkowanie i nie powinno nas tu nic dziwić, ale niech ta wiedza osiądzie.

JS events – capture, options