Simple gallery with scroll

Question

I just created a simple gallery with scroll. Everything works fine but I'm not sure how should I optimize this code:

document.addEventListener("DOMContentLoaded", function() {

    var smallImages = document.querySelectorAll('li img');
    var bigPhotoDiv = document.querySelector('.bigPhoto img');
    var scroller = document.querySelector('#scroller');
    var list = document.querySelector('ul');

    scroller.max = smallImages.length - 1;
    scroller.defaultValue = 0;
    smallImages[scroller.defaultValue].classList.add('centralTheBiggest');

    bigPhotoDiv.src = smallImages[0].src;
    bigPhotoDiv.classList.add('fullSize')

    scroller.addEventListener('input', function(event) {
        //changing the big photo in div
        var currentLink = smallImages[scroller.value].src;
        bigPhotoDiv.src = currentLink;

        //move the list with photos
        list.scrollLeft = scroller.value * 70; //poprawka

        //emphesasise choosen photo

        for (var i = 0; i < smallImages.length; i++) {
            smallImages[i].classList.remove('centralTheBiggest')
        }
        if (smallImages.index = scroller.value) {
            smallImages[scroller.value].classList.add('centralTheBiggest');
        }
    });
    var body = document.querySelector('body');

    //clicking on big photo display it on fullscreen
    bigPhotoDiv.addEventListener('click', function(event) {
        var fullScreen = document.createElement('div');
        fullScreen.classList.add('fullScreenDiv');

        var fullScreenImgContainer = document.createElement('div');
        fullScreenImgContainer.classList.add('fullScreenImgContainer');

        var fullScreenImg = document.createElement('img');
        fullScreenImg.src = smallImages[scroller.value].src;
        fullScreenImg.classList.add('fullScreenImg')

        fullScreenImgContainer.appendChild(fullScreenImg)
        fullScreen.appendChild(fullScreenImgContainer);
        body.appendChild(fullScreen);
        //adding buttons:
        var nextButton = document.createElement('button');
        nextButton.classList.add('nextButton');
        fullScreenImgContainer.appendChild(nextButton);

        var prevButton = document.createElement('button');
        prevButton.classList.add('prevButton');
        fullScreenImgContainer.appendChild(prevButton);

        var closeButton = document.createElement('button');
        closeButton.classList.add('closeButton');
        fullScreenImgContainer.appendChild(closeButton);

        closeButton.addEventListener('click', function(event) {
            fullScreen.parentNode.removeChild(fullScreen);
        });
        //adding events to new buttons
        nextButton.addEventListener('click', function(event) {
            scroller.value++
                fullScreenImg.src = smallImages[scroller.value].src;
            bigPhotoDiv.src = smallImages[scroller.value].src;
        });

        prevButton.addEventListener('click', function(event) {
            scroller.value--
                fullScreenImg.src = smallImages[scroller.value].src;
            bigPhotoDiv.src = smallImages[scroller.value].src;
        });
        //hiding and showing prev and next button
        fullScreenImgContainer.addEventListener('mouseover', function() {
            nextButton.style.display = "block";
            prevButton.style.display = "block";
        });
        fullScreenImgContainer.addEventListener('mouseout', function() {
            nextButton.style.display = "none";
            prevButton.style.display = "none";
        });
    });
});

Is it a good way to put so many Events inside another event? or should I create all possible elements (like nextButton, prevButton for example) outside the 'click' event? And what about hiding and showing those buttons? Is it a good idea to put it inside 'mouseover' event?