JavaScript Click Events — зачем мне два addEventListener?

Прослушиватели событий критически важны для JS. Каждый раз, когда пользователь взаимодействует с вашей страницей, вам нужно уловить это событие и отреагировать на него.
Конечно, в этом фрагменте ваши функции предполагают, что в DOM есть элемент с заданным идентификатором, готовый, установленный и ожидающий. Это может быть не так, поэтому вам нужно подождать, пока JS не получит OK (событие DOMReady).

Это всего лишь один очень простой пример того, почему можно использовать addEventListener. Но, по моему мнению, прослушиватели событий действительно проявляют себя, когда вы начинаете использовать вызовы Ajax для добавления нового контента на свою страницу по мере продвижения:
Предположим, что DOM готов, но некоторые элементы могут или не могут быть запрошены позже. (в зависимости от ввода пользователя). В jQuery вы бы использовали такие вещи:

$('#foo').on('click',functionRef);

Это не требует, чтобы элемент foo был доступен при запуске этого кода, но как только элемент будет добавлен в dom, события щелчка будут обрабатываться по вашему желанию.
В не-jQ вы будете использовать для этого addEventListener. Из-за модели событий (см. quirksmode для получения подробной информации о распространении и всплытии) прослушиватель не должен быть прикреплен к элементу напрямую:

document.body.addEventListener('click',function(e)
{
    if ((e.target || e.srcElemet).id === 'foo')
    {
        //function that deals with clicks on foo element
    }
},false);//last param is for bubbling/propagating events

Таким образом, вы можете асинхронно связывать все события для элементов, которые могут быть добавлены в dom, без необходимости проверять каждый ответ на каждый вызов ajax...

Давайте сделаем еще один шаг вперед: делегирование. Как видите, в приведенном выше фрагменте мы прослушиваем все события кликов, которые происходят где-то внутри body. Это практически не имеет значения: все клики, поэтому вам не нужно добавлять 101 отдельный прослушиватель кликов для 101 элемента, достаточно одного. Единственное, что вам нужно сделать, это написать обработчик таким образом, чтобы он соответствующим образом обрабатывал каждый элемент:

document.body.addEventListener('click',function(e)
{
    e = e || window.event;
    var elem = e.target || e.srcElement;
    switch (true)
    {
        case elem.id === 'foo':
            //either code here or:
            return fooCallback.apply(elem,[e]);//use another function as though it were the handler
        case elem.id.className.match(/\bsomeClass\b/):
            return someClassCallback.apply(elem,[e]);//~= jQuery's $('.someClass').on('click',function);
         case elem.type === 'text':
             //and so on
    }
},false);

Довольно мощная штука. Есть, конечно, и многое другое, и минусы тоже есть (в основном X-браузеры), но основные плюсы:

1. Обработка событий для элементов, которые динамически добавляются/удаляются
2. Единый прослушиватель событий, который обрабатывает все события для всех элементов, делает ваш код более эффективным, иногда намного повышая производительность. вот хороший пример того, когда делегирование в порядке, к сожалению, это также показывает те трудности, которые приносит разработка X-браузера на вечеринку...

Эта строка кода: document.addEventListener("DOMContentLoaded", showArrays, false); гарантирует, что ваша функция showArrays() не начнет выполняться до того, как DOM будет готов. Другими словами, функция showArrays() начнет выполняться после того, как документ (X)HTML будет загружен и проанализирован.

Я рекомендую вам поместить код JavaScript в отдельный файл и использовать следующий код HTML в разделе head: <script type="text/javascript" src="yourfilepath.js"></script>. Тогда вы также можете использовать события window.onload и onclick вместо метода document.addEventListener().

Когда вы это сделаете, вы можете поместить код внутри функции showArrays вне ее тела и удалить функцию.

Например:

window.onload = function()
{
  var link = document.getElementById("clickHandler");
  link.onclick = getArrays;
}

Это считается гораздо лучшей практикой.

Полный пример

В файле script.js:

//This is the beginning of the script...

    function getArrays() {
        var ddlValArray = new Array();
        var ddlTextArray = new Array();
        var ddl = document.getElementById("ddlFlavors");

        for (i=0; i<ddl.options.length; i++) {
            ddlValArray[i] = ddl.options[i].value;
            ddlTextArray[i] = ddl.options[i].text;
            alert(ddlValArray[i] + ' ' + ddlTextArray[i]);  
        }
    }

window.onload = function()
{
  var link = document.getElementById("clickHandler");
  link.onclick = getArrays;
}

Внутри вашей HTML-головы:

<script type="text/javascript" src="script.js"></script>

В большинстве случаев лучше писать JavaScript отдельно от файла HTML, как и CSS. Таким образом, вы сделаете свой HTML-код более аккуратным и организованным.