Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        form, form p, form div {
            margin: 10px;
            border: 1px solid blue;
        }
    </style>
</head>
<body>
<!-- Events -->
    <div id="demo"></div>
    <button id="button">Click me</button>
<!-- End Events -->

<!-- Bubbling and Capturing-->

     <!--Bubbling -->
        <h1>Bubbling</h1>

        <form onclick="alert('form')">FORM
            <div onclick="alert('div')">DIV
                <p onclick="alert('p')">P</p>
            </div>
        </form>

     <!--event.target -->
        <h1>event.target</h1>

        <form id="form2">FORM
            <div>DIV
                <p>P</p>
            </div>
        </form>
        <script>
            var form = document.getElementById('form2');

            form.onclick = function(event) {
                event.target.style.backgroundColor = 'yellow';

                alert("target = " + event.target.tagName + ", this=" + this.tagName);

                event.target.style.backgroundColor = '';
            };
        </script>

    <!-- Capturing -->

        <!--<h1>Capturing</h1>-->

        <!--<form id="form4">FORM-->
            <!--<div>DI3-->
                <!--<p>P</p>-->
            <!--</div>-->
        <!--</form>-->

        <!--<script>-->
            <!--var elems = document.querySelectorAll('form,div,p');-->

            <!--for (var i = 0; i < elems.length; i++) {-->
                <!--elems[i].addEventListener("click", highlightThis, true);-->
            <!--}-->

            <!--function highlightThis() {-->
                <!--this.style.backgroundColor = 'yellow';-->
                <!--alert(this.tagName);-->
                <!--this.style.backgroundColor = '';-->
            <!--}-->
        <!--</script>-->
<!-- End Bubbling and Capturing-->

<!-- Closure -->
    <h1>Closure</h1>
    <button id="button0">button 1</button>
    <button id="button1">button 2</button>
    <button id="button2">button 3</button>
<!-- End Closure -->

    <script src="main.js"></script>
</body>
</html>