'Why can't I remove the event listeners?

I've reviewed many answers to similar questions, but I don't have a solution.

The if statements below ensure that the listeners are only added once, and as I resize the window I can see the attributes added and removed accordingly. Unfortunately, I'm finding the listeners are not removed. For the throttle, I'm using this function.

Why can't I remove the listeners?

window.addEventListener('load', loadListenersHome);
window.addEventListener('resize', throttle(loadListenersHome(), 1000));

function loadListenersHome() {

  var navPanel = document.getElementById('nav');
  var trigger = document.getElementById('trigger');

  var makeNavPanelOpaque = function() {
    if (navPanel.className.indexOf('change') !== -1) {
      navPanel.setAttribute('style','background-color: white;');
    }
  }
  var makeNavPanelTransparent = function() {
    if (navPanel.className.indexOf('change') !== -1) {
      navPanel.setAttribute('style','');
    }
  }

  if (window.matchMedia('(max-width: 567.98px)').matches && window.matchMedia('(max-height: 799.98px)').matches) {
    if(trigger.getAttribute('listener-mouseenter') !== 'added') {
      trigger.addEventListener('mouseenter', makeNavPanelOpaque, false);
      trigger.setAttribute('listener-mouseenter','added');
    }
    if(trigger.getAttribute('listener-mouseleave') !== 'added') {
      trigger.addEventListener('mouseleave', makeNavPanelTransparent, false);
      trigger.setAttribute('listener-mouseleave','added');
    }
  } else {
    if(trigger.getAttribute('listener-mouseenter') === 'added') {
      trigger.removeEventListener('mouseenter', makeNavPanelOpaque, false);
      trigger.removeAttribute('listener-mouseenter');
    }
    if(trigger.getAttribute('listener-mouseleave') === 'added') {
      trigger.removeEventListener('mouseleave', makeNavPanelTransparent, false);
      trigger.removeAttribute('listener-mouseleave');
    }
  }
}

UPDATE 1 (this works, but is not throttled):

window.addEventListener('load', addRemoveListeners);
window.addEventListener('resize', addRemoveListeners);

function addRemoveListeners() {
  var trigger = document.getElementById('trigger');
  if (window.matchMedia('(max-width: 567.98px)').matches && window.matchMedia('(max-height: 799.98px)').matches) {
    if(trigger.getAttribute('listener-mouseenter') !== 'added') {
      addListener(trigger, 'mouseenter', makeNavPanelOpaque, false);
      trigger.setAttribute('listener-mouseenter','added');
    }
    if(trigger.getAttribute('listener-mouseleave') !== 'added') {
      addListener(trigger, 'mouseleave', makeNavPanelTransparent, false);
      trigger.setAttribute('listener-mouseleave','added');
    }
  } else {
    if(trigger.getAttribute('listener-mouseenter') === 'added') {
      removeListener(trigger, 'mouseenter', makeNavPanelOpaque, false);
      trigger.removeAttribute('listener-mouseenter');
    }
    if(trigger.getAttribute('listener-mouseleave') === 'added') {
      removeListener(trigger, 'mouseleave', makeNavPanelTransparent, false);
      trigger.removeAttribute('listener-mouseleave');
    }
  }
}

function makeNavPanelOpaque() {
  var navPanel = document.getElementById('nav');
  if (navPanel.className.indexOf('change') !== -1) {
    navPanel.setAttribute('style','background-color: rgba(255,255,255,0.96); height: 100%;');
  }
}

function makeNavPanelTransparent() {
  var navPanel = document.getElementById('nav');
  if (navPanel.className.indexOf('change') !== -1) {
    navPanel.setAttribute('style','');
  }
}

UPDATE 2 (for Peter, listeners are not added on resize with this version):

window.addEventListener('load', addRemoveListeners);
window.addEventListener('resize', throttleAddRemoveListeners);

var throttleAddRemoveListeners = throttle(addRemoveListeners, 1000);

function addRemoveListeners() {
  var trigger = document.getElementById('trigger');
  if (window.matchMedia('(max-width: 567.98px)').matches && window.matchMedia('(max-height: 799.98px)').matches) {
    if(trigger.getAttribute('listener-mouseenter') !== 'added') {
      addListener(trigger, 'mouseenter', makeNavPanelOpaque, false);
      trigger.setAttribute('listener-mouseenter','added');
    }
    if(trigger.getAttribute('listener-mouseleave') !== 'added') {
      addListener(trigger, 'mouseleave', makeNavPanelTransparent, false);
      trigger.setAttribute('listener-mouseleave','added');
    }
  } else {
    if(trigger.getAttribute('listener-mouseenter') === 'added') {
      removeListener(trigger, 'mouseenter', makeNavPanelOpaque, false);
      trigger.removeAttribute('listener-mouseenter');
    }
    if(trigger.getAttribute('listener-mouseleave') === 'added') {
      removeListener(trigger, 'mouseleave', makeNavPanelTransparent, false);
      trigger.removeAttribute('listener-mouseleave');
    }
  }
}

function makeNavPanelOpaque() {
  var navPanel = document.getElementById('nav');
  if (navPanel.className.indexOf('change') !== -1) {
    navPanel.setAttribute('style','background-color: rgba(255,255,255,0.96); height: 100%;');
  }
}

function makeNavPanelTransparent() {
  var navPanel = document.getElementById('nav');
  if (navPanel.className.indexOf('change') !== -1) {
    navPanel.setAttribute('style','');
  }
}


Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source