Делегирование событий JavaScript не работает должным образом

Основная проблема заключается в том, что в обработчике событий есть синтаксическая ошибка, вам не хватает } для switch. (Использование последовательных отступов поможет избежать подобных ошибок.)

Тогда ваша проблема в том, что event.target - это не то, что вы думаете. event.target - это фактический элемент, который был нажат. Шансы в вашем случае состоят в том, что фактический элемент, который был нажат, - a элемент (ссылка).

Итак, что вы хотите сделать, это посмотреть на линию от элемента clicked до элемента, на который вы нажмете клик (который будет this), ища тот, который находится на нужном уровне (в вашем случае, li): Живой пример | Источник

var list = document.getElementById("nav");
list.addEventListener("click", function(event) {
    // Start with the element that was clicked
    var li = event.target;

    // You may want 'event.preventDefault();' here

    // If the element exists, it isn't the list on which we hooked
    // the event, and its tag name isn't LI, go to the parent
    // element instead.
    while (li && li !== this && li.tagName.toUpperCase() !== "LI") {
        li = li.parentNode;
    }

    // If we got an LI, use it
    if (li) {
        // OR you may want 'event.preventDefault();' here
        switch(li.id) {
            case "click":
                alert("haha");
                // OR you may want 'event.preventDefault();' here
                break;
        }
    }
}, false);

Кроме того, убедитесь, что приведенный выше код находится либо в элементе script под вашим навигационным списком в HTML, либо в обработчике onload (я рекомендую первый, просто поместите скрипт в конец).

И, наконец: Поскольку ссылка href просто "#", я предполагаю, что на самом деле вы не хотите, чтобы за ней следовал браузер (так как это прокрутит вверх до верхней части страницы). В этом случае вам нужно добавить вызов event.preventDefault() в обработчик. Я заметил несколько мест выше, где вы можете этого захотеть, это зависит от того, хотите ли вы всегда препятствовать тому, чтобы ссылка не соблюдалась, или только в определенных случаях.

Замечание: Хотя вы, конечно, можете сделать эту работу самостоятельно, вы можете повторно использовать работу других, используя хорошую библиотеку, такую как jQuery, YUI, Closure или любой другой. Например, в jQuery это выглядит так:

$("#nav").on("click", "li", function(event) {
    // Possibly with 'event.preventDefault();' here
    switch (this.id) {
        case "click":
            alert("haha");
            // OR possibly with 'event.preventDefault();' here
            break;
    }
});

Другие библиотеки имеют схожие функции.