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?
Simple gallery with scroll
javascript;image;event handling;dom