Is there an alternative possibly cleaner way (without so much repetition) to write the following? I'm thinking about the headache it's going to be when I have to remove all of my even listers.customCursor() {const prevButton = document.querySelector('.previous');const nextButton = document.querySelector('.next');const brandLogo = document.querySelector('.brand-logo');const navButton = document.querySelector('.nav-button');const carouselCellLink = document.querySelectorAll('.carousel-cell__link');const cursorContainer = this.cursorContainer;const cursorOffset = {  left : 50,  top  : 50}document.querySelector('.page-flickity').addEventListener(mousemove, function (e) {  cursorContainer.style.left = (e.pageX - cursorOffset.left) + 'px';  cursorContainer.style.top = (e.pageY - cursorOffset.top) + 'px';}, false);prevButton.addEventListener('mouseover', () => {  cursorContainer.classList.add('previous');});prevButton.addEventListener('mouseleave', () => {  cursorContainer.classList.remove('previous');});nextButton.addEventListener('mouseover', () => {  cursorContainer.classList.add('next');});nextButton.addEventListener('mouseleave', () => {  cursorContainer.classList.remove('next');});brandLogo.addEventListener('mouseover', () => {  cursorContainer.classList.add('hidden');});brandLogo.addEventListener('mouseleave', () => {  cursorContainer.classList.remove('hidden');});navButton.addEventListener('mouseover', () => {  cursorContainer.classList.add('hidden');});navButton.addEventListener('mouseleave', () => {  cursorContainer.classList.remove('hidden');});for(var i = 0; i < carouselCellLink.length; i++) {  carouselCellLink[i].addEventListener('mouseover', () => {    cursorContainer.classList.add('link');  });  carouselCellLink[i].addEventListener('mouseleave', () => {    cursorContainer.classList.remove('link');  });}}
Many event listeners
javascript;event handling