klienckie_mendela/Lekcja_05/codeshare_zdarzenia.md

<html lang="en"> <head> <script> function zmiana(d) { d.innerText = "Szymek"; }

    function init() {
        const els = document.getElementsByTagName("button");
        console.log(els);
        for (let i = 0; i < els.length; i++) {
            // els[i].onclick = function () {
            //     console.log("click", this);
            // }

            els[i].onclick = (e) => {
                console.log("click", this, e, e.target);
                e.target.style.backgroundColor = "pink"
            }

            //els[i].onclick = function () {
            //    console.log("test");
            //}
            // nadpisuje tego samego typu zdarzenie
        }

        // Listenery
        const inner = document.getElementById("inner");
        inner.addEventListener("click", function (e) {
            console.log("INNER1", e)
            e.stopPropagation();
        }, false);

        const outer = document.getElementById("outer");
        outer.addEventListener("click", function () {
            console.log("OUTER")

        }, false); // true/false event capturing bubbling

        // inner.addEventListener("click", function () {
        //     console.log("INNER2")
        // }, false);
        // zdarzenie sie "dopisuje"
        // removeEventListener
    }
</script>

</head> A B C

<div id="outer">OUTER
    <div id="inner">INNER</div>
</div>

</html>