Capturing and Bubbling Events

<!DOCTYPE html>

<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta charset="utf-8" />
    <title></title>
</head>
<body>
     <ul>
        <li>first</li>
        <li>second</li>
    </ul>
    <script>
    'use strict'

        // Capturing ul => li => ........
        document.getElementsByTagName('ul')[0].addEventListener('click', function (ev) {
            alert('ul'); //ev.target -> li
        }, true);
        var liSet = document.getElementsByTagName('li');
        for (var i = 0; i < liSet.length; i++) {
            liSet[i].addEventListener('click', function (ev) {
                alert('li'); //ev.target -> li
            }, true);
        }

        // Bubbling li => ul => ........
        document.getElementsByTagName('ul')[0].addEventListener('click', function (ev) {
            alert('ul'); //ev.target -> li
        }, false);
        var liSet = document.getElementsByTagName('li');
        for (var i = 0; i < liSet.length; i++) {
            liSet[i].addEventListener('click', function (ev) {
                alert('li'); //ev.target -> li
            }, false);
        }
        </script>
</body>
</html>