JS - target, currentTarget

Poznajemy target oraz currentTarget, czyli podstawy delegacji eventów w JavaScript. 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" style="background-color: aliceblue;">
        <div id="innerDiv" style="background-color: aqua;">
            <hr>
            <p>Para para para</p>
            <ul>
                <li>
                    Bla bla li<span>Bla bla span</span>
                </li>
            </ul>
            <button>Click me</button>
        </div>
    </div>
    <script src="./evttarget.js" defer></script>
</body>
</html>

A teraz nasz JS:

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

div.addEventListener('click', function(event){
    console.log("Taget: ", event.target);
    console.log("Current target: ", event.currentTarget);
})

Ćwiczymy kliknięcia. Jak się okazuje, target wskazuje na kliknięty element, zaś currentTarget na element, do którego dopięto event, czyli div.

Zazwyczaj to było to samo, tak się jeszcze nie bawiliśmy. To, co tu robimy to jest delegacja eventów. Wynika to z faktu, jak działają eventy w JS.

Gdy klikamy coś mamy trzy fazy:

capturing phase: event idzie z góry (okno) w dół (nie odwiedzając wszystkich elementów, ale wszystkie elementy-rodziców targetu)
target phase: event trafił w element pod event.target
bubbling phase: event „bąbelkuje” w górę aż do rodzica, który jest jego listenerem.

Delegacja eventów polega na tym, że nasłuchujemy na rodzicu (currentTarget, tam gdzie listener) na jakiś event, zaś sam handler sprawdza target i odpowiednio deleguje działania.

JS – target, currentTarget