Many event listeners 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', () =&gt; {
  cursorContainer.classList.add('previous');
});

prevButton.addEventListener('mouseleave', () =&gt; {
  cursorContainer.classList.remove('previous');
});

nextButton.addEventListener('mouseover', () =&gt; {
  cursorContainer.classList.add('next');
});

nextButton.addEventListener('mouseleave', () =&gt; {
  cursorContainer.classList.remove('next');
});

brandLogo.addEventListener('mouseover', () =&gt; {
  cursorContainer.classList.add('hidden');
});

brandLogo.addEventListener('mouseleave', () =&gt; {
  cursorContainer.classList.remove('hidden');
});

navButton.addEventListener('mouseover', () =&gt; {
  cursorContainer.classList.add('hidden');
});

navButton.addEventListener('mouseleave', () =&gt; {
  cursorContainer.classList.remove('hidden');
});

for(var i = 0; i &lt; carouselCellLink.length; i++) {
  carouselCellLink[i].addEventListener('mouseover', () =&gt; {
    cursorContainer.classList.add('link');
  });

  carouselCellLink[i].addEventListener('mouseleave', () =&gt; {
    cursorContainer.classList.remove('link');
  });
}
}
Somewhat obvious rule: the good way to avoid repetition is always to factorize as much as possible.

Here this can be achieved for all but page-flickity of your targets, which are almost identical: only involved elements and added/removed class-names vary.
It already reduces the code to add listeners, like this:

function customCursor() {
  const
    todo = {
      'previous': [false, 'previous'],
      'next': [false, 'next'],
      'brand-logo': [false, 'hidden'],
      'nav-button': [false, 'hidden'],
      'carousel-cell__link': [true, 'link']
    },
    events = {'mouseover': true, 'mouseleave': false},
    cursorContainer = this.cursorContainer,
    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
  );

  var className, action, elements, i, n;
  for (className in todo) {
    action = todo[className];
    elements = action[0]
      ? document.querySelectorAll(className)
      : [document.querySelector(className)];
    for (i = 0, n = elements.length; i &lt; n; i++) {
      for (var event in events) {
        elements[i].addEventListener(
          event,
          () =&gt; cursorContainer.classList.toggle(action[1], events[event])
        )
      }
    }
  }
}


The first important point is the todo object, where we register all targets:


each key is the class-name to operate querySelector[All] on
the corresponding value states true/false to indicate if all elements must be selected or not, and the class-name which will be added/removed when the mouse events occur


Based on that we iterate this object, then for each target we iterate the collection of involved elements (note that the unique element returned by querySelector is turned into an array).  

Then it becomes pretty easy to adapt it for also removing them.
This is achieved by introducing a "listeners archive", populated when adding listeners, then returned by the function:

function customCursor(listeners) {
  const
    todo = {
      'previous': [false, 'previous'],
      'next': [false, 'next'],
      'brand-logo': [false, 'hidden'],
      'nav-button': [false, 'hidden'],
      'carousel-cell__link': [true, 'link']
    },
    events = {
      'mouseover': true,
      'mouseleave': false
    },
    cursorContainer = this.cursorContainer,
    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
  );

  addListeners = !listeners;
  listeners = listeners || [];

  var className, action, elements, element, i, n;
  if (addListeners) {
    for (className in todo) {
      action = todo[className];
      elements = action[0]
        ? document.querySelectorAll(className)
        : [document.querySelector(className)];
      for (i = 0, n = elements.length; i &lt; n; i++) {
        element = elements[i];
        for (var event in events) {
          listener = function() {
            cursorContainer.classList.toggle(action[1], events[event])
          };
          element.addEventListener(event, listener);
          listeners.push([element, event, listener]);
        }
      }
    }
    return listeners;
  } else {
    for (i in listeners) {
      listener = listeners[i];
      listener[0].removeEventListener(listener[1], listener[2]);
    }
  }
}


(please note: I didn't do anything about the "lonely" event about page-flickity element; you may do your own here)

Then it's up to you to pass this archive in to the function when you want to remove these listeners:

// add listeners:
var listeners = customCursor();

// remove listeners:
customCursor(listeners);