JS – propagacja eventów

Bardzo prosty przykład, czym jest propagacja eventów oraz jak ją zatrzymać. Do dzieła!

Kodzik do przetestowania:

<p onclick="alertPara();">Bla bla bla <span onclick="alertSpan();">im in span</span> bla bla</p>
    <script>
        function alertPara(){
        alert("Para clicked");
        }

        function alertSpan(e){
        alert("span clicked");
        }
</script>

Kliknięcie spana wywołuje dwa eventy, idąc z zasadą capturing, czyli od dołu (alertSpan) do góry (alertPara).

Jak to zatrzymać? Cóż, mamy metodę eventu stopPropagation:

<p onclick="alertPara();">Bla bla bla <span id="span">im in span</span> bla bla</p>
<script>
        function alertPara(){
        alert("Para clicked");
        }

        document.getElementById("span")
        .addEventListener("click", function(e){
        e.stopPropagation();
        alert("SPAN CLICKED");
        });
</script>