значение «this» уничтожается слушателем

Question

У меня есть следующие функции:

function moveDown(event) {
  const submenus = document.getElementsByClassName('sub-menu')
  var navbar = document.getElementById("menu-1");

  var sub

  if (event.target.innerHTML === "ABOUT US") {
    sub = submenus[0]
  } else {
    sub = submenus[1]
  }

  var rect = sub.getBoundingClientRect();
  navbar.style.marginBottom = rect.height + "px"
}


function moveUp(event) {
  var navbar = document.getElementById("menu-1");
  navbar.style.marginBottom = 0
}

оба из них в порядке. Может ли кто-нибудь объяснить, почему «это» уничтожается следующим образом:

(function() {
  var takeAction = document.getElementsByClassName('takeAction')[0]
  var aboutUs = document.getElementsByClassName('aboutUs')[0]

  aboutUs.addEventListener('mouseover', function(event) {
    moveDown(event)
  }, {
    passive: false
  })
  takeAction.addEventListener('mouseover', function(event) {
    moveDown(event)
  }, {
    passive: false
  })

  aboutUs.addEventListener('mouseleave', function(event) {
    moveUp(event)
  }, {
    passive: false
  })
  takeAction.addEventListener('mouseleave', function(event) {
    moveUp(event)
  }, {
    passive: false
  }) 
})()

, но работает правильно, если я это сделаю:

(function() {
  var takeAction = document.getElementsByClassName('takeAction')[0]
  var aboutUs = document.getElementsByClassName('aboutUs')[0]

  aboutUs.addEventListener('mouseover', moveDown,{passive: false})
  takeAction.addEventListener('mouseover',moveDown,{passive: false})

  aboutUs.addEventListener('mouseleave', moveUp,{passive: false})
  takeAction.addEventListener('mouseleave',moveUp,{passive: false}) 
})()

Почему передача события в анонимную, а затем передачаэто для moveDown вызывает другое значение для 'this', а не просто вызывает moveDown напрямую.

ПРИМЕЧАНИЕ: во втором примере moveDown и moveUp не имеют аргументов.